curtains.js

Question

我正在尝试将片段着色器添加到通过窗帘创建的平面。我之前将此片段着色器与其他库一起使用 - 即 canvas-sketch - 但是我似乎无法将着色器设置为运行，因为控制台提示我错误：Program: Unable to initialize the shader program.

#canvas {
    /* make the canvas wrapper fits the document */
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.plane {
    /* define the size of your plane */
    width: 80%;
    height: 80vh;
    margin: 10vh auto;
}

<div id="canvas"></div>
<div class="plane"></div>
<script type="module">
import { Curtains, Plane } from "https://cdn.jsdelivr.net/npm/curtainsjs@7.1.0/src/index.mjs";

window.addEventListener("load", () => {
  // set up our WebGL context and append the canvas to our wrapper
  const curtains = new Curtains({
    container: "canvas",
  });

  // get our plane element
  const planeElement = document.getElementsByClassName("plane")[0];

  // set our initial parameters (basic uniforms)

  const fragmentShader = `
    precision mediump float;
    uniform float uTime;
    varying vec2 vUv;

    void main() {
        vec3 color = 0.5 + 0.5 * cos(uTime + vUv.xyx + vec3(0.0, 2.0, 4.0));
        gl_FragColor = vec4(color, 1.0);
    }
  `;
  const params = {
    fragmentShader,
    widthSegments: 20,
    heightSegments: 20,
    uniforms: {
      time: {
        name: "uTime", // uniform name that will be passed to our shaders
        type: "1f", // this means our uniform is a float
        value: 0,
      },
    },
  };

  // create our plane using our curtains object, the bound HTML element and the parameters
  const plane = new Plane(curtains, planeElement, params);

  plane.onRender(() => {
    // use the onRender method of our plane fired at each requestAnimationFrame call
    plane.uniforms.time.value++; // update our time uniform value
  });
});
</script>

我确实在其他问题中看到了关于如何为 GL 启用更详细的错误日志记录的注释，但我不确定如何使用此库设置这些属性。

Answer 1

窗帘没有叫 vUv。它有一个叫做 vTextureCoord

#canvas {
    /* make the canvas wrapper fits the document */
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.plane {
    /* define the size of your plane */
    width: 80%;
    height: 80vh;
    margin: 10vh auto;
}

<div id="canvas"></div>
<div class="plane"></div>
<script type="module">
import { Curtains, Plane } from "https://cdn.jsdelivr.net/npm/curtainsjs@7.1.0/src/index.mjs";

window.addEventListener("load", () => {
  // set up our WebGL context and append the canvas to our wrapper
  const curtains = new Curtains({
    container: "canvas",
  });

  // get our plane element
  const planeElement = document.getElementsByClassName("plane")[0];

  // set our initial parameters (basic uniforms)

  const fragmentShader = `
    precision mediump float;
    uniform float uTime;
    varying vec2 vTextureCoord;

    void main() {
        vec3 color = 0.5 + 0.5 * cos(uTime + vTextureCoord.xyx + vec3(0.0, 2.0, 4.0));
        gl_FragColor = vec4(color, 1.0);
    }
  `;
  const params = {
    fragmentShader,
    widthSegments: 20,
    heightSegments: 20,
    uniforms: {
      time: {
        name: "uTime", // uniform name that will be passed to our shaders
        type: "1f", // this means our uniform is a float
        value: 0,
      },
    },
  };

  // create our plane using our curtains object, the bound HTML element and the parameters
  const plane = new Plane(curtains, planeElement, params);

  plane.onRender(() => {
    // use the onRender method of our plane fired at each requestAnimationFrame call
    plane.uniforms.time.value++; // update our time uniform value
  });
});
</script>

curtains.js — 无法初始化着色器程序

curtains.js — Unable to initialize the shader program

shader

webgl