About CustomProceduralTexture and Sprite2D of Canvas2D

[PizzaLYJ]

Hi all,

I want to create a Sprite2D and it's image can make some effect like grayscale.

So I consider using CustomProceduralTexture to implement it.

My pseudo code is like below (the shader is just basic one not grayscale):

let sampleTexture = new BABYLON.Texture("img/sample.png", scene, true, false, BABYLON.Texture.NEAREST_SAMPLINGMODE);
BABYLON.Effect.ShadersStore["TestPixelShader"]
    = "precision highp float;\n"
    + "varying vec2 vUV;\n"
    + "uniform sampler2D sampleTexture;\n"
    + "void main(void) {\n"
    +     "gl_FragColor = texture2D(sampleTexture, vUV);\n"
    + "}\n";

let procedualTexture = new BABYLON.CustomProceduralTexture("custom", "Test", 1024, scene);
procedualTexture.setTexture("sampleTexture", sampleTexture);

let sprite2d = new BABYLON.Sprite2D(procedualTexture, { options... });

Is my idea workable? Or do I need using another ways to implement it?

Thanks!

[PizzaLYJ]

Hi all,

I try a case: creating a custom procedural texture and using the texture to apply two Sprite2Ds.

One Sprite2D attaches to ScreenSpaceCanvas2D, the other one attaches to WorldSpaceCanvas2D.

The result is the texture can display at ScreenSpaceCanvas2D but the other one cannot at WorldSpaceCanvas2D.

Here is my sample code at the playground: http://babylonjs-playground.com/#20MSFF#54

So, is there something limitations on showing custom procedural texture at WorldSpaceCanvas2D?

Thanks.

 

[Nabroski]

@PizzaLYJ

i think you have a hard time trying and you 3hours away, from a breakthrough. once you did so, you will become a master. so i dont want to stop you, for now.

just a hint: you got no texture! 

the reason its working on spacecanvas is 
http://www.babylonjs-playground.com/#DLKLE#0

https://doc.babylonjs.com/tutorials/How_to_use_Procedural_Textures

Note : when using ShaderStore or DOM Element shader for custom procedural textures : the config.json file is not needed anymore and you can just use setFloat or setVector3 (and so on), and setTexture on the CustomProceduralTexture will give values and Sampler2D to the shader code.

&You have to hack to get a Postprocess on a Mesh, that why its called Postprocess. 
 

[PizzaLYJ]

Hi @Nabroski,

Thanking for your reply and the hint.

Now I use onGenerated event trigger to waiting a procedural texture ready and then setting Sprite2D.

http://babylonjs-playground.com/#20MSFF#55

Looking great!

Thank you.

[Nabroski]

@PizzaLYJ  i hang around here since months i see a lot of guys try to hack this. i think nockawa added shaders to cancas2d like yesterday.
great.
http://babylonjs-playground.com/#20MSFF#56