Is there a way to use canvas image data as texture data directly?

[BangTao]

the texture data is from canvas,but i can't use the canvas data as Texture//

[JohnK]

Use dynamicTexture

  http://doc.babylonjs.com/classes/2.5/dynamictexture

This PG might help

http://www.babylonjs-playground.com/#1OQFOC#48

[georage]

Is there any way to create a dynamic texture from a noise function? I thought this was possible and created a function to generate a 2D array of color values but it seems from my searched that dynamic textures require an image. I guess I could make an image from the array, but that seems like a step that could avoided.

 

[JohnK]

@georage

I am only on mobile for a couple of days so cannot do any new PG.

If you look at the PG in my above texturecontext can be used just as a canvas context

Then you could get the imagedata for this canvas randomise data in the imagedata  and put imagedata on the canvas then update the dynamictexture.

You may well know this already but if not find out about using imagedata like this at

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas

Just change the greyscale and invert examples to randomising.

 

 

 

 

[GameMonetize]

Hello this demo uses random noise texture: http://www.babylonjs.com/Demos/planet/

Here is the code: https://github.com/BabylonJS/Website/blob/master/Demos/Planet/planet.js

random textures are created here: https://github.com/BabylonJS/Website/blob/master/Demos/Planet/planet.js#L55

[georage]

Thanks fellas! I will investigate!

[BangTao]

On 2017/2/16 at 6:38 PM, JohnK said:

Use dynamicTexture

  http://doc.babylonjs.com/classes/2.5/dynamictexture

This PG might help

http://www.babylonjs-playground.com/#1OQFOC#48

AHa,Thank u  for your time.^ ^,i thought there no one answer me ,i've tried many times,but i still confused,,,,look at this PG

http://www.babylonjs-playground.com/#VKBJN#29

now i know dynamic texture can accept canvasElement ,so i think it can be used like base texture ,then i parsed the canvasElement,but it seems can't show on the customMesh.

@JohnK

 @Deltakosh

will you please check it for me?

[JohnK]

@BangTao There are a couple of errors in your PG

1. canvas width and height are not set using style but set directly with numbers

2. only draw on canvas after creating dynamic texture and once you draw on it update it.

Check out http://www.babylonjs-playground.com/#VKBJN#31 which has corrected the ode and removed most of the unnecessary code.

[BangTao]

I benefit a lot from your help.and that worked,thank u

[BangTao]

@JohnK

I found a weird thing(i can get the right texture by setting the proportion),see PG

http://www.babylonjs-playground.com/#VKBJN#32

why the canvas width and height changed after use DynamicTexture?

[JohnK]

@BangTao

Line 39 the final parameter is true, this forces the dynamictexture to use MipMaps  https://en.wikipedia.org/wiki/Mipmap  theseneed powers of 2 so the canvas size is changed so that width and height are powers of 2 keeping the proportion as close as possible to the original,

Delete the last parameter or change it to false and check the width and height again.

[BangTao]

Oh, I see. That's why. Thank you!