# How to render a dynamictexture in a multimaterial? **URL:** \ **Category:** Questions\ **Tags:** material\ **Created:** [October 30, 2019, 4:12pm UTC](https://forum.babylonjs.com/t/how-to-render-a-dynamictexture-in-a-multimaterial/6678 "2019-10-30T16:12:53Z")\ **Posts on this page:** 18\ **Page:** 1
**Author:** ![Lolo](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/lolo/32/5199_2.png) [@Lolo](https://forum.babylonjs.com/u/Lolo)\ **Post date:** [October 30, 2019, 4:12pm UTC](https://forum.babylonjs.com/t/how-to-render-a-dynamictexture-in-a-multimaterial/6678/1 "2019-10-30T16:12:53Z")
Hi everyone! By advance, sorry for my syntax errors, english is not my native language and I don’t master it. 🙂 I exported a character mesh model from 3dsMax with a multiMaterial attached to it in the intention to seperate the face and the body textures renderings, because I animate the face texture for expressions and the body texture has no changes, excepting after some click events on the scene. You can maybe understand better what I’m talking about here, testing to click on the colored spheres on the ground and wait for the random idle animation face time (in seconds) of the character (sorry if it’s too long to wait, i’ll balance it) : [http://51.68.226.225](http://51.68.226.225) Searching a way to have dynamic textures rendering changes without clipping, I tried to test the dynamic texture after reading a discussion on the forum about it, but! When I attach the dynamic texture to the body material, push the body material on the multiMaterial and edit the submeshes indexes to render the both materials, draw the loaded image with the dynamic texture context and update, the body texture is rendering as a black color on my local version and as transparent on this playground : [https://www.babylonjs-playground.com/#0EL6Y9#2](https://www.babylonjs-playground.com/#0EL6Y9#2) I surely missed something on the dynamic texture application but I don’t understand what. I tested to play with many attributes of the DynamicTexure Object, delete the multimaterial to test it in a simplest way, trying with .jpg or .png picture but nothing works… 😔 You can uncommented the standard diffuse texture line (54) on the top of the dynamic diffuse texture line (55), comment this last line and run the playground again to see by the good diffuse texture rendering that it’s not either a problem about a wrong image path… If someone has an idea to solve it, i’m going to be very grateful 🙂 Thank you for your attention 🙂 ---
**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\ **Post date:** [October 30, 2019, 5:10pm UTC](https://forum.babylonjs.com/t/how-to-render-a-dynamictexture-in-a-multimaterial/6678/2 "2019-10-30T17:10:44Z")
Unfortunately I cannot help as the texture as loaded from a server enforcing CORS: ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/7/7a3a354a989969cce12e2e2a8d49ab3bb90b8b60.png) But anyhow, I think the issue is coming from the dynamictexture not correctly setup (no width and height): [https://www.babylonjs-playground.com/#0EL6Y9#3](https://www.babylonjs-playground.com/#0EL6Y9#3) ---
**Author:** ![Lolo](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/lolo/32/5199_2.png) [@Lolo](https://forum.babylonjs.com/u/Lolo)\ **Post date:** [October 30, 2019, 5:41pm UTC](https://forum.babylonjs.com/t/how-to-render-a-dynamictexture-in-a-multimaterial/6678/3 "2019-10-30T17:41:42Z")
Hi @Deltakosh! Thank you for your answer 🙂 > [@Deltakosh](#): > > Unfortunately I cannot help as the texture as loaded from a server enforcing CORS: I’m sorry but I don’t understand this error message, and I don’t know what is the CORS enforcing. I saw in the Firefox console F12 tools that the onLoad event line creates an error message, I forgot to say that in the first topic message, sorry. However the message was not talkative as yours, it only returns “Unable to import meshes from scene.babylon: Error in onSuccess callback”. > [@Deltakosh](#): > > But anyhow, I think the issue is coming from the dynamictexture not correctly setup (no width and height): [https://www.babylonjs-playground.com/#0EL6Y9#3](https://www.babylonjs-playground.com/#0EL6Y9#3) Thank for the test you did. I tried to give the width and height loaded picture setup on the dynamictexture declaration (as you did ) before creating the topic, but it didn’t work too… The playground gives the same result : > **[Babylon.js Playground](https://www.babylonjs-playground.com/#0EL6Y9%234)** > > Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes I will search about the server enforcing CORS, thank you 🙂 ---
**Author:** ![Lolo](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/lolo/32/5199_2.png) [@Lolo](https://forum.babylonjs.com/u/Lolo)\ **Post date:** [October 30, 2019, 6:23pm UTC](https://forum.babylonjs.com/t/how-to-render-a-dynamictexture-in-a-multimaterial/6678/4 "2019-10-30T18:23:24Z")
Hi again! @Deltakosh do you need that I put my textures somewhere else the dropbox servers? The documentation talks about [https://imgur.com/](https://imgur.com/). Can you debug without cross-origin resource sharing troubles from this domain? ---
**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\ **Post date:** [October 30, 2019, 10:59pm UTC](https://forum.babylonjs.com/t/how-to-render-a-dynamictexture-in-a-multimaterial/6678/5 "2019-10-30T22:59:35Z")
Hey! Here is a good doc for that: [Using External Assets - Babylon.js Documentation](https://doc.babylonjs.com/resources/external_pg_assets) ---
**Author:** ![Lolo](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/lolo/32/5199_2.png) [@Lolo](https://forum.babylonjs.com/u/Lolo)\ **Post date:** [October 31, 2019, 12:25am UTC](https://forum.babylonjs.com/t/how-to-render-a-dynamictexture-in-a-multimaterial/6678/6 "2019-10-31T00:25:07Z")
Ok, I understood that the error message you shared came from the Google Chrome Playground F12 Tools Console . Actually, the playground console is more talkative than in my local Firefox version. > [@Deltakosh](#): > > Hey! Here is a good doc for that: [Using External Assets - Babylon.js Documentation](https://doc.babylonjs.com/resources/external_pg_assets) Thank you for sharing this link, reading this documentation a new time made me realize that I didn’t read the wiki CORS specifications. However, I followed it when I built the playground and copy/past the babylon scene and pictures dropbox paths. I also tried with the diffuse texture stored in [https://imgur.com/](https://imgur.com/) as specified in this link but the security error message persists in the playground, without changing the initial material from the 3dsMax scene this time, worse than with the dropbox path… I initially wanted to try those methods in the playground to avoid to configure my web server for https protocol now, considering that is not my priority… I discovered that the standard diffuse texture is not rendered in Google Chrome but works in Firefox without returning a security error message in the playground. I write it in the case it can be usefull to know that about the playground. Concerning the CORS behaviour on my online version, i don’t uderstand why all my XMLHttpRequests work good (clicking on the right top screen button for example to load and create the events contents), all the standard textures load and are displayed without problems, and only the diffuse texture in the dynamic texture doesn’t render good. And the browsers return a success loading feedback in the F12 Tools Network… 😑 I cleared all the console messages on my online version to allow you to take a look inside if it’s possible/usefull : [http://51.68.226.225/](http://51.68.226.225/) I also added a appendChild(bodyDiffuse) line in the scene script to check if the loaded image can really be displayed, and it can be… The html image element is created in the #content div. If you or someone definitely can’t do anything with it, I’ll finish all I have to do before configuring my server for https protocol and allow the playground to load the texture from it and I’ll come back on the topic. In any case, thank you for your answers. 🙂 ---
**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\ **Post date:** [October 31, 2019, 3:05pm UTC](https://forum.babylonjs.com/t/how-to-render-a-dynamictexture-in-a-multimaterial/6678/7 "2019-10-31T15:05:42Z")
Without using your code, do we agree that this works? [https://www.babylonjs-playground.com/#0EL6Y9#4](https://www.babylonjs-playground.com/#0EL6Y9#4) If yes it should be easy to translate it in your code ---
**Author:** ![Lolo](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/lolo/32/5199_2.png) [@Lolo](https://forum.babylonjs.com/u/Lolo)\ **Post date:** [October 31, 2019, 3:27pm UTC](https://forum.babylonjs.com/t/how-to-render-a-dynamictexture-in-a-multimaterial/6678/8 "2019-10-31T15:27:55Z")
Good morning 🙂 > [@Deltakosh](#): > > Without using your code, do we agree that this works? > [https://www.babylonjs-playground.com/#0EL6Y9#4](https://www.babylonjs-playground.com/#0EL6Y9#4) This example is not working as I want, in the playground and on my local and online version. Sorry if I’m not clear enough. The result I want is the rendering of this playground but with the dynamic texture : [https://www.babylonjs-playground.com/#0EL6Y9#5](https://www.babylonjs-playground.com/#0EL6Y9#5) Please open this link with Firefox, it doesn’t work with Google Chrome. You can notice that this rendering works uncommenting the standard diffuse texture attribution line (54) and commenting the dynamic diffuse texture attribution line (55). In image, it gives this : ![playground00](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/7/7f488241ee6e6d56b070d89211079ed326a6e586.jpeg) ---
**Author:** ![Lolo](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/lolo/32/5199_2.png) [@Lolo](https://forum.babylonjs.com/u/Lolo)\ **Post date:** [October 31, 2019, 3:35pm UTC](https://forum.babylonjs.com/t/how-to-render-a-dynamictexture-in-a-multimaterial/6678/9 "2019-10-31T15:35:23Z")
And gives this on my local and online version : ![local00](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/9/99ccbeb687be3ee4f2ce1d88d1acc16a8a3a1996.jpeg) With the same code as in the playground #4 you shared in your last message, apart from the dropbox paths babylon scene and textures I only wrote for the playground purposes. My local and online versions have relative paths. Am I clear enough ? … 😕 ---
**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\ **Post date:** [October 31, 2019, 4:12pm UTC](https://forum.babylonjs.com/t/how-to-render-a-dynamictexture-in-a-multimaterial/6678/10 "2019-10-31T16:12:30Z")
@Lolo, I am still struggling to understand your issue. Is it the fact that the textures are black in you own version outside of the playground ??? ---
**Author:** ![JohnK](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/johnk/32/26764_2.png) [@JohnK](https://forum.babylonjs.com/u/JohnK)\ **Post date:** [October 31, 2019, 4:51pm UTC](https://forum.babylonjs.com/t/how-to-render-a-dynamictexture-in-a-multimaterial/6678/11 "2019-10-31T16:51:11Z")
The issue is on line 76 setting the image src directly you get the following in the console `SecurityError: The operation is insecure.` and so your image has not loaded and you dynamicTexture is blank Calling a texture from the one available in the playground works [https://www.babylonjs-playground.com/#0EL6Y9#6](https://www.babylonjs-playground.com/#0EL6Y9#6) Sorry I do not know a way around this others might. ---
**Author:** ![JohnK](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/johnk/32/26764_2.png) [@JohnK](https://forum.babylonjs.com/u/JohnK)\ **Post date:** [October 31, 2019, 5:40pm UTC](https://forum.babylonjs.com/t/how-to-render-a-dynamictexture-in-a-multimaterial/6678/12 "2019-10-31T17:40:21Z")
Your online version gives the following error messages Error: WebGL warning: generateMipmap: Tex image TEXTURE\_2D level 0 is incurring lazy initialization. [babylon.js:16:139065](https://cdn.babylonjs.com/babylon.js) Error: WebGL warning: drawElements: TEXTURE\_2D at unit 0 is not a depth texture with TEXTURE\_COMPARE\_MODE, but the shader sampler is a shadow sampler. 2 [babylon.js:16:114011](https://cdn.babylonjs.com/babylon.js) It might help to if you use babylon.max.js in your on-line version to get closer to where errors are being logged. ---
**Author:** ![Lolo](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/lolo/32/5199_2.png) [@Lolo](https://forum.babylonjs.com/u/Lolo)\ **Post date:** [October 31, 2019, 5:58pm UTC](https://forum.babylonjs.com/t/how-to-render-a-dynamictexture-in-a-multimaterial/6678/13 "2019-10-31T17:58:44Z")
Hi guys! Thank you for your participation 🙂 @sebavan! Yes it’s my issue. I’m using a dynamic texture in the diffuseTexture of a standard material pushed in a multimaterial assigned on the character mesh, wich has 2 subMeshes, one for the face and the other one for the body. The character body texture is black in my local and online version when I use the dynamic texture, and not rendered in the playground due to the CORS security problem returning by the SecurityError on wich @Deltakosh and @JohnK told. But, if I use a standard texture for the diffuseTexture of the body material, it works good on my local and online version and on the playground only with Firefox. Like this 🙂 > [@Lolo](#): > > ![playground00.jpg](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/7/7f488241ee6e6d56b070d89211079ed326a6e586.jpeg) Chrome render the red and black default babylon material like in this picture, showind that the texture isn’t loaded, so it doesn’t work : ![playground01](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/4/4a31f183dc0ba314eb32ac8918171d1731ff5603.jpeg) It’s not the point of my issue, but I talk about it because I discovered it in the tests i did after having talked to @Deltakosh. I’m only talking about it in the goal to give the information in a maybe usefull way for anyone… A difference to understand between my local/online version and the playground version is that in my local/online version I use relatives paths and in the playground I use dropbox external paths as specified in this documentation link : [https://www.babylonjs-playground.com/#0EL6Y9#4](https://www.babylonjs-playground.com/#0EL6Y9#4) shared by @Deltakosh. @JohnK Please don’t be sorry, you’re trying to help me, i reeeally appreciate it! 🙂 > [@JohnK](#): > > Error: WebGL warning: generateMipmap: Tex image TEXTURE\_2D level 0 is incurring lazy initialization. [babylon.js:16:139065](https://cdn.babylonjs.com/babylon.js) > > Error: WebGL warning: drawElements: TEXTURE\_2D at unit 0 is not a depth texture with TEXTURE\_COMPARE\_MODE, but the shader sampler is a shadow sampler. 2 [babylon.js:16:114011](https://cdn.babylonjs.com/babylon.js) I search things about those messages today but I found nothing to solve the problem or I can understand to do it. > [@JohnK](#): > > It might help to if you use babylon.max.js in your on-line version to get closer to where errors are being logged. You mean using a .max.js of my babylon scene js script? I will try it! Thank you guys! 🙂 Don’t hesitate to ask me anything if I’m not clear enough 🙂 ---
**Author:** ![Lolo](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/lolo/32/5199_2.png) [@Lolo](https://forum.babylonjs.com/u/Lolo)\ **Post date:** [October 31, 2019, 6:29pm UTC](https://forum.babylonjs.com/t/how-to-render-a-dynamictexture-in-a-multimaterial/6678/14 "2019-10-31T18:29:40Z")
@JohnK I put the scene.min.js in my on-line version but nothing seems to change. The F12 Tools Console still returns the same message. What do you mean with “get closer to where errors are being logged” ? I never used .min.js files until now. > [@JohnK](#): > > Error: WebGL warning: generateMipmap: Tex image TEXTURE\_2D level 0 is incurring lazy initialization. [babylon.js:16:139065](https://cdn.babylonjs.com/babylon.js) I read this answer on stackoverflow today about this message : [https://stackoverflow.com/questions/57734645/error-tex-image-texture-2d-level-0-is-incurring-lazy-initialization-on-webgl](https://stackoverflow.com/questions/57734645/error-tex-image-texture-2d-level-0-is-incurring-lazy-initialization-on-webgl) It doesn’t seem to be a real warning. ---
**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\ **Post date:** [October 31, 2019, 8:12pm UTC](https://forum.babylonjs.com/t/how-to-render-a-dynamictexture-in-a-multimaterial/6678/15 "2019-10-31T20:12:43Z")
[https://www.babylonjs-playground.com/#0EL6Y9#8](https://www.babylonjs-playground.com/#0EL6Y9#8) So it definitely seems that it should work find with local textures: [https://www.babylonjs-playground.com/#0EL6Y9#8](https://www.babylonjs-playground.com/#0EL6Y9#8) Canvas2d feeding the dynamic texture will only allow none external sources or the canvas might be flagged as “tainted” and be usable through WebGL. ---
**Author:** ![Lolo](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/lolo/32/5199_2.png) [@Lolo](https://forum.babylonjs.com/u/Lolo)\ **Post date:** [November 1, 2019, 5:02pm UTC](https://forum.babylonjs.com/t/how-to-render-a-dynamictexture-in-a-multimaterial/6678/16 "2019-11-01T17:02:53Z")
Hi everyone! I found the solution of my problem. @Deltakosh was right in part in this comment, referring to the dynamictexture declaration : > [@Deltakosh](#): > > But anyhow, I think the issue is coming from the dynamictexture not correctly setup (no width and height): From this moment, I gave width and height in the setup. The other part of the solution was changing the wrapU an wrapV of the dynamictexture, giving to it the 1 value to take advantage of the WRAP\_ADRESSMODE as specified in the documentation here : [https://doc.babylonjs.com/api/classes/babylon.dynamictexture#wrapu](https://doc.babylonjs.com/api/classes/babylon.dynamictexture#wrapu) I discovered it in this work process : First I built a little local scene only with the code I needed as in the playground. I added an appendChild() function to create the html image element from the loaded picture to be sure that this picture was really loaded and usable. I had this result, the same as usual : ![local01](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/3/3082f80bbab836d7c2819cb9785a723d4efb0e5c.jpeg) Then I tried to see what was possible with an other texture and the result was the following, make me sure that the loaded picture was drawn in the canvas : ![local02](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/4/4eba68f558b326fd9945aa07ebb09eb1ea5b8cc1.jpeg) It was like only the first pixel of the loaded picture was drawn in the whole diffuse texture. So after some tests, l found that setting the 1 value to the wrapU and the wrapV attributes, and removing the appendChild() function for the loaded picture in my case, gave the expected result : ![local03](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/c/c7e52026d38b890e5ca5c5fa3e5e2e912ec9e940.jpeg) @sebavan, @JohnK and @Deltakosh Thank you for your playground examples with the local textures. I understood why the playground didn’t work with external sources. And thank you for all your answers too 🙂 If someone doesn’t understand the way I’m describing how I solved the problem, don’t hesitate to ask me anything. ---
**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\ **Post date:** [November 1, 2019, 7:42pm UTC](https://forum.babylonjs.com/t/how-to-render-a-dynamictexture-in-a-multimaterial/6678/17 "2019-11-01T19:42:55Z")
Coool makes total sense 🙂 ---
**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\ **Post date:** [November 1, 2019, 11:03pm UTC](https://forum.babylonjs.com/t/how-to-render-a-dynamictexture-in-a-multimaterial/6678/18 "2019-11-01T23:03:55Z")
This is really cool!