webgl 显示图片

力博荣三维可视化
于 2024-09-03 16:14:33 发布
阅读量414
点赞数 2
分类专栏：前端基础文章标签： webgl android
本文链接：https://blog.csdn.net/qq_21476953/article/details/141864792
版权
前端基础专栏收录该内容
22 篇文章 0 订阅
订阅专栏
在这里插入图片描述
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <title>WebGL Image Display</title>
    <style>
      canvas {
        width: 500px;
        height: 500px;
        display: block;
        margin: 0 auto;
      }

    </style>
  </head>

  <body>
    <canvas id="glcanvas"></canvas>


    <script>
      // Vertex shader source code
      const vsSource = `
    attribute vec4 aVertexPosition;
    attribute vec2 aTextureCoord;
    varying highp vec2 vTextureCoord;
    void main(void) {
        gl_Position = aVertexPosition;
        vTextureCoord = aTextureCoord;
    }
`;

      // Fragment shader source code
      const fsSource = `
    varying highp vec2 vTextureCoord;
    uniform sampler2D uSampler;
    void main(void) {
        gl_FragColor = texture2D(uSampler, vTextureCoord);
    }
`;

      // Initialize WebGL context
      const canvas = document.getElementById('glcanvas');
      const gl = canvas.getContext('webgl');

      // Initialize shaders
      function initShaderProgram(gl, vsSource, fsSource) {
        const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource);
        const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource);

        const shaderProgram = gl.createProgram();
        gl.attachShader(shaderProgram, vertexShader);
        gl.attachShader(shaderProgram, fragmentShader);
        gl.linkProgram(shaderProgram);

        if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
          alert('Unable to initialize the shader program: ' + gl.getProgramInfoLog(shaderProgram));
          return null;
        }
        return shaderProgram;
      }

      function loadShader(gl, type, source) {
        const shader = gl.createShader(type);
        gl.shaderSource(shader, source);
        gl.compileShader(shader);

        if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
          alert('An error occurred compiling the shaders: ' + gl.getShaderInfoLog(shader));
          gl.deleteShader(shader);
          return null;
        }
        return shader;
      }

      const shaderProgram = initShaderProgram(gl, vsSource, fsSource);
      const programInfo = {
        program: shaderProgram,
        attribLocations: {
          vertexPosition: gl.getAttribLocation(shaderProgram, 'aVertexPosition'),
          textureCoord: gl.getAttribLocation(shaderProgram, 'aTextureCoord'),
        },
        uniformLocations: {
          uSampler: gl.getUniformLocation(shaderProgram, 'uSampler'),
        },
      };

      // Initialize buffers
      const positionBuffer = gl.createBuffer();
      gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
      const positions = [
        -1.0, 1.0,
        1.0, 1.0,
        -1.0, -1.0,
        1.0, -1.0,
      ];
      gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);

      const textureCoordBuffer = gl.createBuffer();
      gl.bindBuffer(gl.ARRAY_BUFFER, textureCoordBuffer);
      const textureCoordinates = [
        0.0, 0.0,
        1.0, 0.0,
        0.0, 1.0,
        1.0, 1.0,
      ];
      gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(textureCoordinates), gl.STATIC_DRAW);

      // Load texture
      function loadTexture(gl, cb) {
        const texture = gl.createTexture();
        gl.bindTexture(gl.TEXTURE_2D, texture);

        const level = 0;
        const internalFormat = gl.RGBA;
        const width = 1;
        const height = 1;
        const border = 0;
        const srcFormat = gl.RGBA;
        const srcType = gl.UNSIGNED_BYTE;
        const pixel = new Uint8Array([0, 0, 255, 255]);  // Blue default color
        gl.texImage2D(gl.TEXTURE_2D, level, internalFormat, width, height, border, srcFormat, srcType, pixel);

        const image = new Image();
        image.onload = function () {
          gl.bindTexture(gl.TEXTURE_2D, texture);
          gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);

          gl.texImage2D(gl.TEXTURE_2D, level, internalFormat, srcFormat, srcType, image);

          if (isPowerOf2(image.width) && isPowerOf2(image.height)) {
            gl.generateMipmap(gl.TEXTURE_2D);
          } else {
            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.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.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);

          cb();
        };
        image.src = 'data:image/png;base64,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';

        return texture;
      }

      function isPowerOf2(value) {
        return (value & (value - 1)) == 0;
      }

      const texture = loadTexture(gl, () => {
        render();
      });

      // Draw the scene
      function drawScene(gl, programInfo, buffers, texture) {
        gl.clearColor(0.0, 0.0, 0.0, 1.0);
        gl.clear(gl.COLOR_BUFFER_BIT);

        gl.useProgram(programInfo.program);

        gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
        gl.vertexAttribPointer(programInfo.attribLocations.vertexPosition, 2, gl.FLOAT, false, 0, 0);
        gl.enableVertexAttribArray(programInfo.attribLocations.vertexPosition);

        gl.bindBuffer(gl.ARRAY_BUFFER, textureCoordBuffer);
        gl.vertexAttribPointer(programInfo.attribLocations.textureCoord, 2, gl.FLOAT, false, 0, 0);
        gl.enableVertexAttribArray(programInfo.attribLocations.textureCoord);

        gl.activeTexture(gl.TEXTURE0);
        gl.bindTexture(gl.TEXTURE_2D, texture);
        gl.uniform1i(programInfo.uniformLocations.uSampler, 0);

        gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
      }

      function render() {
        drawScene(gl, programInfo, { position: positionBuffer, textureCoord: textureCoordBuffer }, texture);
      }

      render();
    </script>
  </body>

</html>