the worldSpaceCanvas can't use pointEvent in ORTHOGRAPHIC_CAMERA

[MasterK]

the worldSpaceCanvas can't use pointEvent in ORTHOGRAPHIC_CAMERA

 

http://www.babylonjs-playground.com/#1X37TG

[Nockawa]

Quote

And i think maybe screenCanvas can related to camera. So that i can use two screenCavas, one below 3d scene, one in front of 3d scene.

Beasuse  ORTHOGRAPHIC_CAMERA  worldSpaceCanvas texture is very blur...

What are you trying to achieve to want one screen canvas below and another above the 3D Scene?

 

[Nockawa]

As for the blur in WorldSpace you have to use "fontSuperSample: true" when creating Text2D, otherwise the quality won't be good enough.

Also please read this post which explains things a little clearer:

 

[MasterK]

8 minutes ago, Nockawa said:

As for the blur in WorldSpace you have to use "fontSuperSample: true" when creating Text2D, otherwise the quality won't be good enough.

Also please read this post which explains things a little clearer:

 

not only text2d...  sprite2d is also blur, how to solve?

17 minutes ago, Nockawa said:

What are you trying to achieve to want one screen canvas below and another above the 3D Scene?

 

if worldCanvas in ORTHOGRAPHIC_CAMERA can handle pointEvent and not blur, It can achieve my want. Like i ask before. 

http://www.html5gamedevs.com/topic/23837-use-canvas2d-as-ui-can-other-3d-mesh-display-above-on-this-ui/

Otherwise if screenCanvas is more simple to do this...

[Nockawa]

Just now, MasterK said:

not only text2d...  sprite2d is also blur, how to solve?

It's blurred because the resolution of your texture is smaller than how it's displayed on screen, if one pixel of your texture (a texel) is covering many on screen pixel because the texture is too small: it's going to be blurred and there's nothing I can do about it.

Quote

if worldCanvas in ORTHOGRAPHIC_CAMERA can handle pointEvent and not blur, It can achieve my want. Like i ask before. 

I understand that, but I was curious about your concrete use case: why do you need Canvas2D content below the 3D scene? What do you want to do exactly? I'd like to understand. thanks

[MasterK]

[MasterK]

32 minutes ago, Nockawa said:

It's blurred because the resolution of your texture is smaller than how it's displayed on screen, if one pixel of your texture (a texel) is covering many on screen pixel because the texture is too small: it's going to be blurred and there's nothing I can do about it.

I understand that, but I was curious about your concrete use case: why do you need Canvas2D content below the 3D scene? What do you want to do exactly? I'd like to understand. thanks

ScreenCanvas also has scale, i set worldCanvas size same as screen, and orthograph camera is same too.

and the same pic is blurer in worldCanvas than screen. You didn't explain that..

[Nockawa]

32 minutes ago, MasterK said:

In this case I would do the opposite: a Canvas2D Primitive that display the content of a 3D Viewport/Scene. This is something that could be done. This way I think things will be more coherent for what you're trying to achieve, don't you think?

[Nockawa]

5 minutes ago, MasterK said:

ScreenCanvas also has scale, i set worldCanvas size same as screen, and orthograph camera is same too.

and the same pic is blurer in worldCanvas than screen. You didn't explain that..

Well, please show me a screenshot, it's hard to figure it out like this.

[MasterK]

i use ScreenWidth = engine.getRenderWidth(), and ScreenHeight = engine.getRenderHeight() to set worldSpaceCanvas size. same as screenCanvas.

And set ORTHOGRAPHIC_CAMERA for worldSpace

bottomCamera.orthoTop = ScreenHeight / 2;

bottomCamera.orthoRight = ScreenWidth / 2;

bottomCamera.orthoBottom = -ScreenHeight / 2;

bottomCamera.orthoLeft = -ScreenWidth / 2;

 

these two pic file is 256*256. they have some same scale value in this case.

left two are added to worldSpaceCanvas, right two are added to screenCanvas.

Can you see left two are more blur then right two?

 

[Nockawa]

16 minutes ago, MasterK said:

i use ScreenWidth = engine.getRenderWidth(), and ScreenHeight = engine.getRenderHeight() to set worldSpaceCanvas size. same as screenCanvas.

And set ORTHOGRAPHIC_CAMERA for worldSpace

bottomCamera.orthoTop = ScreenHeight / 2;

bottomCamera.orthoRight = ScreenWidth / 2;

bottomCamera.orthoBottom = -ScreenHeight / 2;

bottomCamera.orthoLeft = -ScreenWidth / 2;

 

these two pic file is 256*256. they have some same scale value in this case.

left two are added to worldSpaceCanvas, right two are added to screenCanvas.

Can you see left two are more blur then right two?

 

Exciting work by the way, congratulation!

I think I know what's going on, with SceenCanvas, per default I align Sprite2d texel with the viewport's pixel, to ensure the best rendering quality. But for understandable reason it's not the case with WorldSpaceCanvas, so what happens here is your WSC is displaying content not aligned to the viewport's pixel and the resulting quality is lower. You can find more info about this in the Update #4 of this post:

Maybe you can get back the good rendering quality by rounding your World Space coordinates to eliminate fractions.

[MasterK]

10 minutes ago, Nockawa said:

Maybe you can get back the good rendering quality by rounding your World Space coordinates to eliminate fractions.

hmmm... I don't know rounding what coordinates?

my WSC 's position is (0,0).  I make canvas size 1136*640 and WSC size is same.

I think every coordinates is round... Help me.

[Nockawa]

1 hour ago, MasterK said:

hmmm... I don't know rounding what coordinates?

my WSC 's position is (0,0).  I make canvas size 1136*640 and WSC size is same.

I think every coordinates is round... Help me.

Unfortunately I don't think you can do anything, you use rounded coordinate, but for world space object, then a world to view transformation is applied using the the ortho camera and I'm pretty sure the result introduce fraction in the position of your objects. This is an issue I had with Sprite2d and the only way to solve it is through the shader. Which is what I did with the alignToPixel mode.

What I could do is also introduce an alignToPixel setting in the WorldSpaceCanvas to make sure everything I draw in the viewport is aligned. I've created a trello card to keep track of the dev. I'm pretty confident it will solve your issue so you can keep using WSC, once this setting will be available you'll have the quality you want. I can't do the dev right now because I'm hands are full but I will in a short time.

[Nockawa]

19 hours ago, MasterK said:

the worldSpaceCanvas can't use pointEvent in ORTHOGRAPHIC_CAMERA

 

http://www.babylonjs-playground.com/#1X37TG

I've also created a trello card for this bug, I'll try to fix it asap.

[MasterK]

Thank you. I hope one or two weeks, WSC ORTHOGRAPHIC pointEvent and zOrder will solved... So that i can believe we could solve any problem of UI in our project..Fighting!!!

[Nockawa]

2 minutes ago, MasterK said:

Thank you. I hope one or two weeks, WSC ORTHOGRAPHIC pointEvent and zOrder will solved... So that i can believe we could solve any problem of UI in our project..Fighting!!!

zOrder is solved and got merged few minutes ago, but only deltakosh can update the playground. but if you work from a local version of the sources you can get the latest version and z Order will be fixed.

[Nockawa]

Ok, after some investigation in you PG: http://www.babylonjs-playground.com/#1X37TG if I comment line 19 the WorldSpaceCanvas is picked as expected. We don't know why it's not working when there's this particular parent/child relationship but we will investigate when possible.

In the meantime can you work without this relationship?

[Nabroski]

I think its just a position translate issue u have to uncomment to see the result
it works in layers and everything, the z position is important

http://www.babylonjs-playground.com/#1FXRQ5#4

MasterKs Exampel

http://www.babylonjs-playground.com/#1X37TG#3

with preload
http://www.babylonjs-playground.com/#1X37TG#5

If you parent a plane to a camera its behind the lens 1 or -1 for WorldSpaceCanvas in the z direction is enough.
you parent it to the origin of the thing. to display other things on ui. if you know what i mean. or should i describe more details

@MasterK its also a big play of scale of the image
@Nockawa on my 1366 resolution notebook the second example batman looks also a bit(with trained eyes), just a bit, blurry, mainly be course my screen, and the ratio scale of wsc to scale of the texture. sprite.scale =0.7 for 1366 and 1.0 for 1920, but also only for this playground, their is no resize function.

i got a screen, where the light is mirrored, if i could easily adjust the image just a bit darker/lighter, it would improve the quality, so if their is something that you can do to improve the image, it would be nice! 
this looks o.k on my notebook

http://www.babylonjs-playground.com/#1X37TG#7

[MasterK]

@Nabroski

It looks perfect in playground...

But i use latest code from Github and try it local and it doesn't work...

If set parent, never receive pointer event... same when set position (0,0,1);

If not set parent, can receive pointer event, but click area is not right, very large.

[HenryPeng]

23 hours ago, Nabroski said:

I think its just a position translate issue u have to uncomment to see the result
it works in layers and everything, the z position is important

http://www.babylonjs-playground.com/#1FXRQ5#4

MasterKs Exampel

http://www.babylonjs-playground.com/#1X37TG#3

with preload
http://www.babylonjs-playground.com/#1X37TG#5

If you parent a plane to a camera its behind the lens 1 or -1 for WorldSpaceCanvas in the z direction is enough.
you parent it to the origin of the thing. to display other things on ui. if you know what i mean. or should i describe more details

@MasterK its also a big play of scale of the image
@Nockawa on my 1366 resolution notebook the second example batman looks also a bit(with trained eyes), just a bit, blurry, mainly be course my screen, and the ratio scale of wsc to scale of the texture. sprite.scale =0.7 for 1366 and 1.0 for 1920, but also only for this playground, their is no resize function.

i got a screen, where the light is mirrored, if i could easily adjust the image just a bit darker/lighter, it would improve the quality, so if their is something that you can do to improve the image, it would be nice! 
this looks o.k on my notebook

http://www.babylonjs-playground.com/#1X37TG#7

http://www.babylonjs-playground.com/#1X37TG#11

If I have two cameras , one is orthoraphic camera ,the other is arcRotateCamera.

it doesn't work well, because the click position is error.

@Nockawa

@Nabroski 

[Nabroski]

@HenryPeng

You are in the wrong layer 
http://www.babylonjs-playground.com/#1X37TG#12

This is a simpel array, (push, pop everything works as with any other array) 
Push camera ONE push camera TWO ( camera.array [0] WSC, camera.array [1] empty space)
 your are in the camera TWO and try to access objects from camera ONE 

@MasterK I know you project is far more complicated, sorry to hear you run into bugs. 
I attached my playground example, it works on my local machine, maybe you are missing something, check your code.

Best Wishes 

wsctest.zip

[MasterK]

@Nabroski

You're right, it's camera order problem.

But I want world/orthographic camera behind, and arcRotate camera(to display 3d mesh) front.

So you think there's no way to click world normal?

[Nockawa]

@MasterK use the Scene.cameraToUseForPointers to specify which Camera must be use for interaction

[MasterK]

1 hour ago, Nockawa said:

@MasterK use the Scene.cameraToUseForPointers to specify which Camera must be use for interaction

@Nockawa

Thanks, i'll try.

Another bug(if strictly speak):

WorldSpaceCanvas size(100, 100), add Sprite2D size(50,50), pos(-25,0).

then the sprite has left half part outside of WSC.

when i add pointEvent to sprite, I think it cant be click on left part. Should boundInfo controled inside of canvas size???

[Nockawa]

3 minutes ago, MasterK said:

@Nockawa

Thanks, i'll try.

Another bug(if strictly speak):

WorldSpaceCanvas size(100, 100), add Sprite2D size(50,50), pos(-25,0).

then the sprite has left half part outside of WSC.

when i add pointEvent to sprite, I think it cant be click on left part. Should boundInfo controled inside of canvas size???

I'm not sure to understand, you'd like the left part of the sprite (the one that is off the canvas) to be clickable? If so, I'm afraid this is not the behavior that I'd like.

As always a little PG would help. For me the clipped part is "gone" you can't do anything with it.