Port shader with multiple buffers from shadertoy

Questions
1

Im trying to understand how to implement multiple buffers in three.js by porting a shader from shadertoy with help of this thread.
https://discourse.threejs.org/t/help-porting-shadertoy-to-threejs/

I tried to rewrite it for js but it doesnt compile.
Here is the code:

It is based on this one:

My understanding of using buffers is:

  1. create a bufferscene
    bufferAscene = new THREE.Scene();

  2. create a texture
    textureA = new THREE.WebGLRenderTarget(window.innerWidth, window.innerHeight, {
    minFilter: THREE.LinearFilter,
    magFilter: THREE.NearestFilter
    });

  3. create a shadermaterial where you define the uniforms for passing to the shader
    bufferA = new THREE.ShaderMaterial({
    uniforms: {
    iFrame: { value: 0 },
    iResolution: { value: resolution },
    iMouse: { value: mousePosition },
    iChannel0: { value: textureA.texture },
    iChannel1: { value: textureB.texture }
    },
    vertexShader: VERTEX_SHADER,
    fragmentShader: BUFFER_A_FRAG,
    });

  4. create a PlaneBufferGeometry and create a mesh from the geometry and buffermaterial
    new THREE.Mesh(planeA, bufferA)

  5. add it to the Scene
    bufferAscene.add(new THREE.Mesh(planeA, bufferA));

In the render:

  1. update the uniforms
    bufferA.uniforms.iChannel0.value = textureA

I dont really understand the swap though.

If anyone can help me to get the application to compile it would be very much apreciated!

2 Likes
2

/cc

1 Like