Dynamic Texture Breaks Source Canvas

Questions
1

Good afternoon everyone, I have 3 questions here

  1. As shown in the title and the example below, can anyone gives me some hints about why except background, all my other colors just turn black?
    Minimal Example

  2. I thought I could update the dynamicTexture just before rendering(I comment out that line before render), but that is not true, I am kind of confused…

  3. It’s about doc. I would like to know the difference between interface, function, variable, enumerations
    So far, I guess interface is some ‘features’ certain class could have ?
    enumeration is some flags we will use is the code?
    And when I tried to find MeshBuilder, I thought it would be in method, but it turns out to be in variable, so why method, variable and functions … is organized in that way?

Any answer is deeply appreciated, thank you for reading!!

2

  1. This https://playground.babylonjs.com/#STVYXT#17 based on this topic P5js canvas on babylonjs mesh may be of interest

  2. See above

  3. These are Typescript terms and the API docs are generated directly from the Babylon.js code placing them in the appropriate sections

code example ---- export interface ITextureCreationOptions {



code example — export enum PointColor {

Etc.

3

Can you clarify what you mean by “all your other colors just turn black”? The codepen you posted seems to work for me:
image

4

I have read it and it makes things clear a lot, thank you for such helpful information!!

5

Actually the square and the moving line are not black when I initialized the p5 canvas, only after I used the canvas for dynamicTexture they turn black suddenly(I use setTimeout to wait 3 seconds in the example)

6

Forcing the P5 canvas to use WebGL seems to solve the issue!

Just need to adjust the coordinates on the P5 functions since the WebGL mode puts the center in the actual center of the canvas instead of the top-left.

7

That’s one great solution, thank you very much!!