13-texture/index.html

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

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/gl-matrix/3.4.2/gl-matrix.js"
    type="application/javascript"></script>
</head>

<body>
  <canvas width="400" height="400" id="canvas"></canvas>

  <script id="vertexShader" type="x-shader/v-vertex">
    attribute vec4 a_Position;
    attribute vec2 a_TexCoord;
    varying vec2 v_TexCoord;
    void main(){
      gl_Position = a_Position;
      v_TexCoord = a_TexCoord;
    }
  </script>
  <script id="fragmentShader" type="x-shader/v-vertex">
      precision mediump float;
      uniform sampler2D u_Sampler;
      varying vec2 v_TexCoord;
      void main(){
          gl_FragColor = texture2D(u_Sampler,v_TexCoord);
      }
  </script>
  <script>
    const canvas = document.getElementById("canvas");
    const range = document.getElementById("range");
    const range2 = document.getElementById("range2");

    const gl = canvas.getContext("webgl");

    // 使用完全不透明的黑色清除所有图像
    gl.clearColor(0.0, 0.0, 0.0, 1.0);
    // 用上面指定的颜色清除缓冲区
    gl.clear(gl.COLOR_BUFFER_BIT);

    let vertexShader = document.getElementById("vertexShader").innerText;
    let fragmentShader = document.getElementById("fragmentShader").innerText;

    let program = initShader(gl, vertexShader, fragmentShader);

    let n = 4
    let data = new Float32Array([
      -0.8, 0.8, 0.0, 1.0,
      -0.8, -0.8, 0.0, 0.0,
      0.8, 0.8, 1.0, 1.0,
      0.8, -0.8, 1.0, 0.0
    ]);

    let FSIZE = data.BYTES_PER_ELEMENT

    let buffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
    gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);

    let a_Position = gl.getAttribLocation(gl.program, "a_Position");
    gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, FSIZE * 4, 0)
    gl.enableVertexAttribArray(a_Position);


    let a_TexCoord = gl.getAttribLocation(gl.program, 'a_TexCoord')

    gl.vertexAttribPointer(a_TexCoord, 2, gl.FLOAT, false, FSIZE * 4, FSIZE * 2)
    gl.enableVertexAttribArray(a_TexCoord);


    function initTexture(gl) {
      let texture = gl.createTexture();

      let u_Sampler = gl.getUniformLocation(gl.program, 'u_Sampler')


      let image = new Image()
      image.onload = () => {
        loadTexture(gl, n, texture, u_Sampler, image)
      }

      image.src = "./texture.jpeg"
    }

    function draw() {
      initTexture(gl)
    }

    draw()

    function loadTexture(gl, n, texture, u_Sampler, image) {
      gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1)
      // 开启0号纹理单元
      gl.activeTexture(gl.TEXTURE0)
      // 向target绑定纹理对象
      gl.bindTexture(gl.TEXTURE_2D, texture)

      // 配置纹理参数
      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
      // 配置纹理图像
      gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, image)
      // 将0号纹理传递给着色器
      gl.uniform1i(u_Sampler, 0)

      // 绘制矩形
      // gl.clear(gl.COLOR_BUFFER_BIT)
      gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4)
    }

    function initShader(gl, vertexSource, fragmentSource) {
      const vertexShader = gl.createShader(gl.VERTEX_SHADER);
      const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);

      gl.shaderSource(vertexShader, vertexSource);
      gl.shaderSource(fragmentShader, fragmentSource);

      gl.compileShader(vertexShader);
      gl.compileShader(fragmentShader);

      let program = gl.createProgram();
      gl.attachShader(program, vertexShader);
      gl.attachShader(program, fragmentShader);
      gl.linkProgram(program);
      gl.useProgram(program);

      gl.program = program

      return program;
    }
  </script>
</body>

</html>