CustomNoiseProceduralTexture?

Questions
1

I’m trying to define a custom NoiseProceduralTexture to control how particles move in a particle system.

I don’t have a lot of background in working with graphics.

I have a non-Noise CustomProcedualTexture working and rendering to a plane

    BABYLON.Effect.ShadersStore["LinesPixelShader"] =
       `#ifdef GL_ES
        precision highp float;
        #endif\n
        varying vec2 vUV; 
        void main(void) {
            float color = 0.0;
            vec2 center = vec2(0.5, 0.5);

            vec2 here = vUV.xy;
            vec2 whatever = normalize((here - center).yx);
            
            gl_FragColor = vec4(whatever, 0.0, 1.0);

       }
       `;

    const customProcText = new BABYLON.CustomProceduralTexture("customtext", "Lines", 1024, scene);

But I’m not sure how to apply that to a particle system.

As a test, I’m trying to get the particles to move in a circle, so am trying to calculate the tangent to the vector pointing away from the center

Any help would be appreciated!

2

I saw this example https://www.babylonjs-playground.com/#R1JWLA#3

But I want to use a custom shader

3

cc @Evgeni_Popov @sebavan

4

How about creating a procedural node material?

You have access to VoronoiNoise / WorleyNoise3D / SimplexPerlin3D nodes, so it should be pretty easy to create a procedural noise texture.

Don’t forget to choose “Procedural” for the material type!

image

1 Like
5

Oh, this looks cool!

I’m not sure if I asked the right question though.

I’m trying to make something like this

Screenshot 2023-06-07 at 11.42.13 AM
Screenshot 2023-06-07 at 11.42.13 AM859×568 104 KB

Where the direction that the particles move is determined by the output of the shader. More specifically, each point on the texture is a vec2 that represents how much and in what direction a force should be applied to any particle at that point. I’m not sure if this is the right way to go about accomplishing that

6

I basically want gravity that can have a different value at every point in a 2d space

7

Calculating particle direction in a shader automatically excludes the CPU particle system, as you’d have to read the values back to the CPU, which is slow and takes at least one frame (as the read is asynchronous and returns a promise).

You’d have to use a GPU particle system, but that’s not easy either because we don’t provide a way for the user to override the shader we use to update the particles, so you’re kind of on your own to figure out the shader and replace it with your own shader. The shader code can be found in BABYLON.ShaderStore.ShadersStore["gpuUpdateParticlesVertexShader"]. You can replace it by simply changing the value of this entry.

3 Likes
8

Babylon.js Playground Neat!

1 Like
9

Okay, follow up here.

I’ve made some progress https://playground.babylonjs.com/#H534AK#6

I’m defining a vector field that determines where each particle should move.

The next thing I want to do is have the function that creates that vector field be dependent on absolute time

Looking through the inputs to that shader, it seems like there is only the time delta

Is there an straightforward way to access time?

1 Like
10

Not really, you will have to add a new uniform to the shader and set it in the javascript code. You will have to patch Particles/webgl2ParticleSystem.ts to do that.

Nice result by the way!