How to call multiple planes in javascript?

问题

I've been trying to fix an issue with my site for the past week to no avail. I'm using Curtains.js and I just want to display multiple planes on the home page. I've got that working, but every plane after the first shifts up, overlaps or is overlapped. I've tested the code on other shopify themes, and only the first plane is displayed properly as well. Any help would be much appreciated.

<script>
    window.addEventListener("load", function () {
  var curtains = new Curtains({
    container: "planes-canvas"
  });

  var planeEls = document.getElementsByClassName("planes");

  var vs = `#ifdef GL_ES
  precision mediump float;
  #endif

  // default mandatory attributes
  attribute vec3 aVertexPosition;
  attribute vec2 aTextureCoord;

  // those projection and model view matrices are generated by the library
  // it will position and size our plane based on its HTML element CSS values
  uniform mat4 uMVMatrix;
  uniform mat4 uPMatrix;

  // texture coord varying that will be passed to our fragment shader
  varying vec2 vTextureCoord;

  void main() {
    // apply our vertex position based on the projection and model view matrices
    gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);

    // varying
    // use texture matrix and original texture coords to generate accurate texture coords
    vTextureCoord = aTextureCoord;
  }`;

  var fs = `
    #ifdef GL_ES
    precision mediump float;
    #endif

    // get our varyings
    varying vec3 vVertexPosition;
    varying vec2 vTextureCoord;

    // the uniform we declared inside our javascript
    uniform float uTime;

    // our texture sampler (default name, to use a different name please refer to the documentation)
    uniform sampler2D planeTexture;

    void main() {
    // get our texture coords
    vec2 textureCoord = vTextureCoord;

    // displace our pixels along both axis based on our time uniform and texture UVs
    // this will create a kind of water surface effect
    // try to comment a line or change the constants to see how it changes the effect
    // reminder : textures coords are ranging from 0.0 to 1.0 on both axis
    const float PI = 3.141592;

    textureCoord.x += (
                    sin(textureCoord.x * 10.0 + ((uTime * (PI / 10.0)) * 0.031))
                    + sin(textureCoord.y * 10.0 + ((uTime * (PI / 10.489)) * 0.047))
                    ) * 0.0075;

                textureCoord.y += (
                    sin(textureCoord.y * 15.0 + ((uTime * (PI / 10.023)) * 0.023))
                    + sin(textureCoord.x * 15.0 + ((uTime * (PI / 10.1254)) * 0.067))
                    ) * 0.0125;

    gl_FragColor = texture2D(planeTexture, textureCoord);
    }
  `;

  var planes = [];

  function handlePlane(index) {
    var plane = planes[index];

    plane
      .onReady(function () {
        // our texture has been loaded, resize our plane!
        plane.planeResize();
      })
      .onRender(function () {
        plane.uniforms.time.value++;
      });
  }

  for (var i = 0; i < planeEls.length; i++) {
    var params = {
      vertexShader: vs,
      fragmentShader: fs,
      uniforms: {
        time: {
          name: "uTime",
          type: "1f",
          value: 0
        }
      }
    };

    var plane = curtains.addPlane(planeEls[i], params);

    if (plane) {
      planes.push(plane);

      handlePlane(i);
    }
  }
});

  </script>

#planes-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  pointer-events: none;
}

.planes {
  background-color: #000;
  margin: 0 auto;
}

/*** the images will define the height of our planes ***/
.planes img {
  display: block;
  width: 100%;
  height: auto;
  /* hide the original image */
  opacity: 0;
  background-color: #000;
}

来源：https://stackoverflow.com/questions/63200746/how-to-call-multiple-planes-in-javascript

标签

javascript

canvas

plane

curtains.js