这个百叶窗的效果跟着老师一模一样写的写出来的报错，老师的源码在浏览器里打开也是报错的

来源：3-11 实战：实现动态入场效果

南京烧饼

2023-02-22

老师可以帮我看看我代码哪里错了么？跟老师的代码对了好几遍，这个百叶窗的还是找不到问题所在，但是在浏览器里打开就是错的，老师给的源码里也是报错的

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="../lib/index-demo.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    canvas {
      margin: 50px auto 0;
      display: block;
    }
  </style>
</head>

<body>
  <canvas id="canvas" width="400" height="400">
    此浏览器不支持canvas
  </canvas>
</body>

</html>
<script>
  const ctx = document.getElementById('canvas')
  const gl = ctx.getContext('webgl')
  // 创建着色器源码
  const VERTEX_SHADER_SOURCE = `
    attribute vec4 aPosition;
    varying vec4 vPosition;
    void main() {
      vPosition = aPosition;
      gl_Position = aPosition;
      gl_PointSize = 10.0;
    }
  `; // 顶点着色器

  const FRAGMENT_SHADER_SOURCE = `
    precision lowp float;
    uniform float uHeight;
    varying vec4 vPosition;
    uniform float list[5]; 
    void main() {
      for(int i = 0; i < 5; i++){
        if(vPosition.y > list[i + 1] && vPosition.y < list[i]){
           if(vPosition.y > uHeight - float(i) * 0.5){
              gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
            }
        }
      }
    }
  `; // 片元着色器

  const program = initShader(gl, VERTEX_SHADER_SOURCE, FRAGMENT_SHADER_SOURCE)
  const aPosition = gl.getAttribLocation(program, 'aPosition');
  const uHeight = gl.getUniformLocation(program, 'uHeight');
  const uList = gl.getUniformLocation(program,'list');
  
 gl.uniform1fv(uList, [1.0, 0.5, 0.0, -0.5, -1.0]); 


  const points = new Float32Array([
    -1.0, -1.0,
    1.0, -1.0,
    -1.0, 1.0,
    1.0, 1.0,
  ])

  const buffer = gl.createBuffer();

  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
  gl.bufferData(gl.ARRAY_BUFFER, points, gl.STATIC_DRAW);
  gl.vertexAttribPointer(aPosition, 2, gl.FLOAT, false, 0, 0);
  gl.enableVertexAttribArray(aPosition)
    // 对uList进行赋值

  // 添加一个动画效果
  let value = 1;
  function run() {
    value -= 0.01;
    gl.uniform1f(uHeight, value);
    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
    requestAnimationFrame(run)
  }

  run()

</script>

报的下面这个错
图片描述