Jump to content

Canvas2D Main Post


Nockawa
 Share

Recommended Posts

Ok, back to talking about me me me.  hehe

http://babylonjs-playground.com/#DIF54#5

Ok, here, I did what I mentioned earlier.  I figured that IF I want a gold border around "bottom"... I need to put IT... into a rectangle2D of its own (insideRect).

In this demo, we can see that it works perfectly... except...

BROWSER CRASHER   :)

(For ME, anyway.)  IE or FF... just RUN that playground again, and it crashes the browser!  COOOOL!  I'm SO proud when I get-to crash browsers.  :)

Update:  Ok, the problem was in line 15.  The parent parameter needed to be 'rect' and not 'canvas'.

http://babylonjs-playground.com/#DIF54#6

Now she's workin' real nice.  Yay!  You can actually REMOVE the parent parameter from that sub-rectangle2D, too:

http://babylonjs-playground.com/#DIF54#7

Link to comment
Share on other sites

For fun, I decided to try a WorldSpaceCanvas2D instead.  (line 2)  It requires slightly different parameters, so I adjusted those, and then I backed-out the camera, and there it was, but viewed on-edge.  I needed to pan the camera to see it.

I set auto-rotate for camera alpha-orbit axis (Y)... some kind of delay happening... not sure why.  Still learning.  Fun, though.  :)

http://babylonjs-playground.com/#DIF54#8

There will be a short delay... before the WorldSpaceCanvas2D "comes-around" to our way of thinking.  ;)  It seems we have to wait... AS IF the plane-like panel... were a box.  The delay... is a wait for our camera-panning to pass an invisible side of the "box" (which we thought was a plane).  Interesting!  In theory, and likely in actuality, the panel is invisible exactly 50% of the time.

Notice how the primitives don't respect the line 4 rounded corners?  They render themselves out to the full corners.  That's cuzzzz... it's a rounded-corner FILL, painted into a square container.  errr... something... illusion!  Fun eyeball foolery.  :)

From what I can see, so far, Nockawa's magic machine will SURELY become the defacto standard for most webGL JS frameworks.  It is THAT good.  SO many things have been taken into consideration... it's just amazing.  Canvas2D has nothing but open skies and clear sailing ahead... and we should be honored to have it for our use.  Thanks Nockawa... amazing work.  Really.

Did you see the new forum thread that asked about putting shader material into a rectangle2D?  *nod*  I was too scared to try a reply.  :)

Link to comment
Share on other sites

@Nockawa It looks like the Playground isn't rendering any Canvas2D examples. 

Here is the PG link for the Animated Sprite2D example from the Canvas2D homepage:
http://babylonjs-playground.com/#20MSFF#16

The console shows the following:

loader.js:4Duplicate definition of module 'vs/languages/javascript/javascript'
babylon.js:3 BJS - [18:43:02]: Babylon.js engine (v2.5-alpha) launched
babylon.js:25 ERROR: Couldn't detect the size of the Property topLeftUV from type object. Property is ignored.
babylon.js:25 ERROR: Couldn't detect the size of the Property sizeUV from type object. Property is ignored.
babylon.js:25 ERROR: Couldn't detect the size of the Property textureSize from type object. Property is ignored.
babylon.js:25 ERROR: Couldn't detect the size of the Property properties from type object. Property is ignored.
babylon.js:4 'CanvasRenderingContext2D.webkitImageSmoothingEnabled' is deprecated. Please use 'CanvasRenderingContext2D.imageSmoothingEnabled' instead.

 

Link to comment
Share on other sites

@Nockawa

Regarding the transparency. When I load a Sprite2D into a WorldSpaceCanvas2D, any transparency in the image gets darkened. 

This is the image I'm loading into a Sprite2D:

 image.png

This is what it looks like when the canvas.backgroundFill is set to white:

 image_With_Background_Fill.jpg

This is what it looks like when the no canvas backgroundFill is set (transparent). Shows other elements in my scene:

 image_No_Background_Fill.jpg

You'll notice that on the no backgroundFill image, that the transparency on the white is darkened. I hope that makes sense. Any thoughts on how transparent images render?

Thanks so much!!

 

Link to comment
Share on other sites

18 hours ago, FlashyGoblin said:

@Nockawa It looks like the Playground isn't rendering any Canvas2D examples. 

Here is the PG link for the Animated Sprite2D example from the Canvas2D homepage:
http://babylonjs-playground.com/#20MSFF#16

The console shows the following:


loader.js:4Duplicate definition of module 'vs/languages/javascript/javascript'
babylon.js:3 BJS - [18:43:02]: Babylon.js engine (v2.5-alpha) launched
babylon.js:25 ERROR: Couldn't detect the size of the Property topLeftUV from type object. Property is ignored.
babylon.js:25 ERROR: Couldn't detect the size of the Property sizeUV from type object. Property is ignored.
babylon.js:25 ERROR: Couldn't detect the size of the Property textureSize from type object. Property is ignored.
babylon.js:25 ERROR: Couldn't detect the size of the Property properties from type object. Property is ignored.
babylon.js:4 'CanvasRenderingContext2D.webkitImageSmoothingEnabled' is deprecated. Please use 'CanvasRenderingContext2D.imageSmoothingEnabled' instead.

 

Hi, thank  you for reporting, I know what's going on I'll fix it right away.

Link to comment
Share on other sites

19 hours ago, FlashyGoblin said:

@Nockawa It looks like the Playground isn't rendering any Canvas2D examples. 

Here is the PG link for the Animated Sprite2D example from the Canvas2D homepage:
http://babylonjs-playground.com/#20MSFF#16

The console shows the following:


loader.js:4Duplicate definition of module 'vs/languages/javascript/javascript'
babylon.js:3 BJS - [18:43:02]: Babylon.js engine (v2.5-alpha) launched
babylon.js:25 ERROR: Couldn't detect the size of the Property topLeftUV from type object. Property is ignored.
babylon.js:25 ERROR: Couldn't detect the size of the Property sizeUV from type object. Property is ignored.
babylon.js:25 ERROR: Couldn't detect the size of the Property textureSize from type object. Property is ignored.
babylon.js:25 ERROR: Couldn't detect the size of the Property properties from type object. Property is ignored.
babylon.js:4 'CanvasRenderingContext2D.webkitImageSmoothingEnabled' is deprecated. Please use 'CanvasRenderingContext2D.imageSmoothingEnabled' instead.

 

Looks like it's fixed

Link to comment
Share on other sites

20 hours ago, FlashyGoblin said:

 

Regarding the transparency. When I load a Sprite2D into a WorldSpaceCanvas2D, any transparency in the image gets darkened...

@Nockawa I have more insight on this issue to help locate the bug. It seems that all alpha rendering, even on other meshes (outside of the Canvas2D) can be effected. I have a plane with a loaded texture and the following settings so that it supports alpha and is self illuminating ...

    var reticle = new BABYLON.Mesh.CreatePlane("outterReticle", 1, scene);
    reticle.renderingGroupId = 3;   // always render on top

    var reticleMat = new BABYLON.StandardMaterial("reticleMat", scene);
    reticleMat.diffuseTexture = new BABYLON.Texture("reticle-outter.png", scene);
    reticleMat.emissiveTexture = reticleMat.diffuseTexture;
    reticleMat.opacityTexture = reticleMat.emissiveTexture;
    reticleMat.diffuseTexture.hasAlpha = true;
    reticleMat.specularColor = new BABYLON.Color3(0, 0, 0); // disables the specularity
    reticleMat.emissiveColor = new BABYLON.Color3(1, 1, 1);  // force material to be self illuminating
    reticle.material = reticleMat;

 

Then when I add a Text2D primitive to the Canvas2D, the plane's alpha gets darkened like the previous examples from my earlier post.

var textLabel = new BABYLON.Text2D("Test", {
        parent: canvas,
        id:"textLabel",
        fontName: "32pt Rajdhani-Semibold",
        scale:.8,
        defaultFontColor:new BABYLON.Color4(1,1,1,1),
        marginAlignment: "h: center, v: center",
        alignToPixel: true
});

I wish I could create a Playground so I can demonstrate, but the Playground doesn't allow loading cross domain files.

Link to comment
Share on other sites

1 hour ago, FlashyGoblin said:

@Nockawa I have more insight on this issue to help locate the bug. It seems that all alpha rendering, even on other meshes (outside of the Canvas2D) can be effected. I have a plane with a loaded texture and the following settings so that it supports alpha and is self illuminating ...


    var reticle = new BABYLON.Mesh.CreatePlane("outterReticle", 1, scene);
    reticle.renderingGroupId = 3;   // always render on top

    var reticleMat = new BABYLON.StandardMaterial("reticleMat", scene);
    reticleMat.diffuseTexture = new BABYLON.Texture("reticle-outter.png", scene);
    reticleMat.emissiveTexture = reticleMat.diffuseTexture;
    reticleMat.opacityTexture = reticleMat.emissiveTexture;
    reticleMat.diffuseTexture.hasAlpha = true;
    reticleMat.specularColor = new BABYLON.Color3(0, 0, 0); // disables the specularity
    reticleMat.emissiveColor = new BABYLON.Color3(1, 1, 1);  // force material to be self illuminating
    reticle.material = reticleMat;

 

Then when I add a Text2D primitive to the Canvas2D, the plane's alpha gets darkened like the previous examples from my earlier post.


var textLabel = new BABYLON.Text2D("Test", {
        parent: canvas,
        id:"textLabel",
        fontName: "32pt Rajdhani-Semibold",
        scale:.8,
        defaultFontColor:new BABYLON.Color4(1,1,1,1),
        marginAlignment: "h: center, v: center",
        alignToPixel: true
});

I wish I could create a Playground so I can demonstrate, but the Playground doesn't allow loading cross domain files.

Weird, because I save/restore all the settings... What kind of texture do you need to make the test? maybe you can post the file and @Deltakosh could upload it on the webserver.

Link to comment
Share on other sites

Hi guys... sorry to interrupt flow.  @Nockawa, at this page, the link to Layout and Positioning dedicated doc, is 404. 

The .md exists, but not the .html, and I think it is because "Canvas2D_Prim_Positioning" is not seen in statics.json

I know you're pretty busy right now, and I DID think about adjusting statics.json FOR you, but... I decided to pass-it-on, instead.  Later, I'll give all your C2D docs a thorough proofread, if you want.  I'm a little behind in my docs duties, currently.  Maybe this belongs in PM and not in announcements thread.  Direct me, as wanted.  Hope you're well.

Link to comment
Share on other sites

2 hours ago, Wingnut said:

Hi guys... sorry to interrupt flow.  @Nockawa, at this page, the link to Layout and Positioning dedicated doc, is 404. 

The .md exists, but not the .html, and I think it is because "Canvas2D_Prim_Positioning" is not seen in statics.json

I know you're pretty busy right now, and I DID think about adjusting statics.json FOR you, but... I decided to pass-it-on, instead.  Later, I'll give all your C2D docs a thorough proofread, if you want.  I'm a little behind in my docs duties, currently.  Maybe this belongs in PM and not in announcements thread.  Direct me, as wanted.  Hope you're well.

Many thanks for reporting this. I've made the changed and submit the PR.

Link to comment
Share on other sites

8 hours ago, adam said:

I think I found a bug with padding:

http://babylonjs-playground.com/#DIF54#9

I'm unable to add padding to the top or right of the canvas.

@adam in the example you provide you can see the background rect is offseted of 50 pix from the bottom/left corner of the viewport, which is the default behavior because bottom/left is the origin. What is not expected is the background rect which should have all its edges 50 pixels from the viewport's edge. Is this what you were expecting/trying to achieve?

Link to comment
Share on other sites

@FlashyGoblin I didn't forget about your issue, but I think it's not an easy one and I don't have time right now to concentrate on important issues. I've filled a bug to make sure I remember it. Try to post the texture you use in this thread it will be very useful because I need to repro the issue locally to debug/fix. Thank you!

(my moving back to my house is about 60% complete right now, lol, I think I could take a break at 80% and I'll be able to code a bit)

Link to comment
Share on other sites

On 7/10/2016 at 9:26 AM, Nockawa said:

@FlashyGoblin I didn't forget about your issue, but I think it's not an easy one and I don't have time right now to concentrate on important issues. I've filled a bug to make sure I remember it. Try to post the texture you use in this thread it will be very useful because I need to repro the issue locally to debug/fix. Thank you!

(my moving back to my house is about 60% complete right now, lol, I think I could take a break at 80% and I'll be able to code a bit)

@Nockawa I posted the texture I used in comment above ( http://www.html5gamedevs.com/topic/22552-canvas2d-is-coming-to-town-well-24-beta-at-least/?do=findComment&comment=135210 ) .

 

Thanks!! Good luck with your move!!

 

Link to comment
Share on other sites

  • 2 weeks later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...