#yyds干货盘点#愚公系列2022年12月 微信小程序-WebGL纹理材质的使用

Posted 2022-12-21

前言

在现实中webgl的用途很多，比如医院运维网站，地铁运维网站，海绵城市，可以以三维网页形式展示出现实状态。

WebGL相关文档：http://doc.yonyoucloud.com/doc/wiki/project/webgl/webgL-fundamentals.html

一、webgl的使用

安装第三方包：npm i --save threejs-miniprogram

1.立体图形的绘制

import drawTextureCube from ./drawTextureCube
 

Page(

  /**
   * 页面的初始数据
   */
  data: 

  ,

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) 

  ,

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () 
    wx.createSelectorQuery()
      .select(#myCanvas1)
      .node()
      .exec((res) => 
        const canvas = res[0].node
        const gl = canvas.getContext(webgl)
        if (!gl) 
          console.log(webgl未受支持);
          return
        
        // 检查所有支持的扩展
        var available_extensions = gl.getSupportedExtensions();
        console.log(available_extensions);

        // 清除画布
        // 使用完全不透明的黑色清除所有图像，我们将清除色设为黑色，此时并没有开始清除
        gl.clearColor(0.0, 0.0, 0.0, 1.0);
        // 用上面指定的颜色清除缓冲区
        gl.clear(gl.COLOR_BUFFER_BIT);

        // 画的是一个正方形
        drawTextureCube(gl, canvas)
)

import 
  mat4
 from ../../lib/gl-matrix


var cubeRotation = 0.0;


// Start here
//
function drawTextureCube(gl,canvas) 

const vsSource = `
  attribute vec4 aVertexPosition;
  attribute vec2 aTextureCoord;
  uniform mat4 uModelViewMatrix;
  uniform mat4 uProjectionMatrix;
  varying highp vec2 vTextureCoord;
  void main(void) 
    gl_Position = uProjectionMatrix * uModelViewMatrix * aVertexPosition;
    vTextureCoord = aTextureCoord;
  `;

  // Fragment shader program

  // 通过texture2D函数我们可以得到一个纹素（texel），这是一个纹理图片中的像素。
const fsSource = `
  varying highp vec2 vTextureCoord;
  uniform sampler2D uSampler;
  void main(void) 
    gl_FragColor = texture2D(uSampler, vTextureCoord);
  `

  // Initialize a shader program; this is where all the lighting
  // for the vertices and so forth is established.
  const shaderProgram = initShaderProgram(gl, vsSource, fsSource);

  // Collect all the info needed to use the shader program.
  // Look up which attributes our shader program is using
  // for aVertexPosition, aTextureCoord and also
  // look up uniform locations.
  const programInfo = 
    program: shaderProgram,
    attribLocations: 
      vertexPosition: gl.getAttribLocation(shaderProgram, aVertexPosition),
      textureCoord: gl.getAttribLocation(shaderProgram, aTextureCoord),
    ,
    uniformLocations: 
      projectionMatrix: gl.getUniformLocation(shaderProgram, uProjectionMatrix),
      modelViewMatrix: gl.getUniformLocation(shaderProgram, uModelViewMatrix),
      uSampler: gl.getUniformLocation(shaderProgram, uSampler),
    ,
  ;

  // Heres where we call the routine that builds all the
  // objects well be drawing.
  const buffers = initBuffers(gl);

  const texture = loadTexture(gl, /static/cubetexture1.png, canvas);
  // const texture = loadTexture(gl, /static/cubetexture.png, canvas);

  var then = 0;

  // Draw the scene repeatedly
  function render(now) 
    now *= 0.001;  // convert to seconds
    const deltaTime = now - then;
    then = now;

    drawScene(gl, programInfo, buffers, texture, deltaTime);

    canvas.requestAnimationFrame(render);
  
  canvas.requestAnimationFrame(render);


//
// initBuffers
//
// Initialize the buffers well need. For this demo, we just
// have one object -- a simple three-dimensional cube.
//
function initBuffers(gl) 

  // Create a buffer for the cubes vertex positions.

  const positionBuffer = gl.createBuffer();

  // Select the positionBuffer as the one to apply buffer
  // operations to from here out.

  gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);

  // Now create an array of positions for the cube.

  const positions = [
    // Front face
    -1.0, -1.0,  1.0,
     1.0, -1.0,  1.0,
     1.0,  1.0,  1.0,
    -1.0,  1.0,  1.0,

    // Back face
    -1.0, -1.0, -1.0,
    -1.0,  1.0, -1.0,
     1.0,  1.0, -1.0,
     1.0, -1.0, -1.0,

    // Top face
    -1.0,  1.0, -1.0,
    -1.0,  1.0,  1.0,
     1.0,  1.0,  1.0,
     1.0,  1.0, -1.0,

    // Bottom face
    -1.0, -1.0, -1.0,
     1.0, -1.0, -1.0,
     1.0, -1.0,  1.0,
    -1.0, -1.0,  1.0,

    // Right face
     1.0, -1.0, -1.0,
     1.0,  1.0, -1.0,
     1.0,  1.0,  1.0,
     1.0, -1.0,  1.0,

    // Left face
    -1.0, -1.0, -1.0,
    -1.0, -1.0,  1.0,
    -1.0,  1.0,  1.0,
    -1.0,  1.0, -1.0,
  ];

  // Now pass the list of positions into WebGL to build the
  // shape. We do this by creating a Float32Array from the
  // javascript array, then use it to fill the current buffer.

  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);

  // Now set up the texture coordinates for the faces.

  const textureCoordBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, textureCoordBuffer);

const textureCoordinates = [
  // Front
  0.0,  0.0,
  1.0,  0.0,
  1.0,  1.0,
  0.0,  1.0,
  // Back
  0.0,  0.0,
  1.0,  0.0,
  1.0,  1.0,
  0.0,  1.0,
  // Top
  0.0,  0.0,
  1.0,  0.0,
  1.0,  1.0,
  0.0,  1.0,
  // Bottom
  0.0,  0.0,
  1.0,  0.0,
  1.0,  1.0,
  0.0,  1.0,
  // Right
  0.0,  0.0,
  1.0,  0.0,
  1.0,  1.0,
  0.0,  1.0,
  // Left
  0.0,  0.0,
  1.0,  0.0,
  1.0,  1.0,
  0.0,  1.0,
];

  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(textureCoordinates),
                gl.STATIC_DRAW);

  // Build the element array buffer; this specifies the indices
  // into the vertex arrays for each faces vertices.

  const indexBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);

  // This array defines each face as two triangles, using the
  // indices into the vertex array to specify each triangles
  // position.

  const indices = [
    0,  1,  2,      0,  2,  3,    // front
    4,  5,  6,      4,  6,  7,    // back
    8,  9,  10,     8,  10, 11,   // top
    12, 13, 14,     12, 14, 15,   // bottom
    16, 17, 18,     16, 18, 19,   // right
    20, 21, 22,     20, 22, 23,   // left
  ];

  // Now send the element array to GL

  gl.bufferData(gl.ELEMENT_ARRAY_BUFFER,
      new Uint16Array(indices), gl.STATIC_DRAW);

  return 
    position: positionBuffer,
    textureCoord: textureCoordBuffer,
    indices: indexBuffer,
  ;


//
// Initialize a texture and load an image.
// When the image finished loading copy it into the texture.
//
function loadTexture(gl, url, canvas) 
  const texture = gl.createTexture();
  gl.bindTexture(gl.TEXTURE_2D, texture);

  // Because images have to be download over the internet
  // they might take a moment until they are ready.
  // Until then put a single pixel in the texture so we can
  // use it immediately. When the image has finished downloading
  // well update the texture with the contents of the image.
  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]);  // opaque blue

  // void gl.texImage2D(target, level, internalformat, width, height, border, format, type, ArrayBufferView? pixels);
  gl.texImage2D(gl.TEXTURE_2D, level, internalFormat, width, height, border, srcFormat, srcType, pixel);

  const image = canvas.createImage()
  image.onload = function() 
    gl.bindTexture(gl.TEXTURE_2D, texture);
    // texImage2D() 方法指定了二维纹理图像。
    // void gl.texImage2D(target, level, internalformat, width, height, border, format, type, htmlImageElement source); 
    gl.texImage2D(gl.TEXTURE_2D, level, internalFormat, srcFormat, srcType, image);

    // 检查宽高是否都是2的幂
    // WebGL1 has different requirements for power of 2 images
    // vs non power of 2 images so check if the image is a
    // power of 2 in both dimensions.
    if (isPowerOf2(image.width) && isPowerOf2(image.height)) 
      console.log(power2);
      // 1，2，4，8，16，32，64，128，256，512，1024
      
       // Yes, its a power of 2. Generate mips.
      //  生成多级渐远纹理
       gl.generateMipmap(gl.TEXTURE_2D);
     else 
      console.log(not power2);
      // 纹理坐标的范围通常是从(0, 0)到(1, 1)，那如果我们把纹理坐标设置在范围之外会发生什么
      // GL_REPEAT	对纹理的默认行为。重复纹理图像。
      // GL_MIRRORED_REPEAT	和GL_REPEAT一样，但每次重复图片是镜像放置的。
      // GL_CLAMP_TO_EDGE	纹理坐标会被约束在0到1之间，超出的部分会重复纹理坐标的边缘，产生一种边缘被拉伸的效果。
      // GL_CLAMP_TO_BORDER	超出的坐标为用户指定的边缘颜色。
      // 
       // No, its not a power of 2. Turn of mips and set
       // wrapping to clamp to edge
      //  texParameter[fi]()方法用于设置纹理参数.
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);
// gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
// gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
    
  ;
  image.src = url;

  return texture;


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


//
// Draw the scene.
//
function drawScene(gl, programInfo, buffers, texture, deltaTime) 
  gl.clearColor(0.0, 0.0, 0.0, 1.0);  // Clear to black, fully opaque
  gl.clearDepth(1.0);                 // Clear everything
  gl.enable(gl.DEPTH_TEST);           // Enable depth testing
  gl.depthFunc(gl.LEQUAL);            // Near things obscure far things

  // Clear the canvas before we start drawing on it.

  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

  // Create a perspective matrix, a special matrix that is
  // used to simulate the distortion of perspective in a camera.
  // Our field of view is 45 degrees, with a width/height
  // ratio that matches the display size of the canvas
  // and we only want to see objects between 0.1 units
  // and 100 units away from the camera.

  const fieldOfView = 45 * Math.PI / 180;   // in radians
  const aspect = gl.canvas.clientWidth / gl.canvas.clientHeight;
  const zNear = 0.1;
  const zFar = 100.0;
  const projectionMatrix = mat4.create();

  // note: glmatrix.js always has the first argument
  // as the destination to receive the result.
  mat4.perspective(projectionMatrix,
                   fieldOfView,
                   aspect,
                   zNear,
                   zFar);

  // Set the drawing position to the "identity" point, which is
  // the center of the scene.
  const modelViewMatrix = mat4.create();

  // Now move the drawing position a bit to where we want to
  // start drawing the square.

  mat4.translate(modelViewMatrix,     // destination matrix
                 modelViewMatrix,     // matrix to translate
                 [-0.0, 0.0, -6.0]);  // amount to translate
  mat4.rotate(modelViewMatrix,  // destination matrix
              modelViewMatrix,  // matrix to rotate
              cubeRotation,     // amount to rotate in radians
              [0, 0, 1]);       // axis to rotate around (Z)
  mat4.rotate(modelViewMatrix,  // destination matrix
              modelViewMatrix,  // matrix to rotate
              cubeRotation * .7,// amount to rotate in radians
              [0, 1, 0]);       // axis to rotate around (X)

  // Tell WebGL how to pull out the positions from the position
  // buffer into the vertexPosition attribute
  
    const numComponents = 3;
    const type = gl.FLOAT;
    const normalize = false;
    const stride = 0;
    const offset = 0;

    gl.bindBuffer(gl.ARRAY_BUFFER, buffers.position);
    gl.vertexAttribPointer(
        programInfo.attribLocations.vertexPosition,
        numComponents,
        type,
        normalize,
        stride,
        offset);
    gl.enableVertexAttribArray(
        programInfo.attribLocations.vertexPosition);
  

  // Tell WebGL how to pull out the texture coordinates from
  // the texture coordinate buffer into the textureCoord attribute.
  
    const numComponents = 2;//st二维坐标
    const type = gl.FLOAT;
    const normalize = false;
    const stride = 0;
    const offset = 0;

gl.bindBuffer(gl.ARRAY_BUFFER, buffers.textureCoord);

gl.vertexAttribPointer(
    programInfo.attribLocations.textureCoord,
    numComponents,
    type,
    normalize,
    stride,
    offset);

gl.enableVertexAttribArray(
    programInfo.attribLocations.textureCoord);
  

  // Tell WebGL which indices to use to index the vertices
  gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, buffers.indices);

  // Tell WebGL to use our program when drawing

  gl.useProgram(programInfo.program);

  // Set the shader uniforms

  gl.uniformMatrix4fv(
      programInfo.uniformLocations.projectionMatrix,
      false,
      projectionMatrix);

  gl.uniformMatrix4fv(
      programInfo.uniformLocations.modelViewMatrix,
      false,
      modelViewMatrix);

  // Specify the texture to map onto the faces.

  // Tell WebGL we want to affect texture unit 0
  gl.activeTexture(gl.TEXTURE0);

  // Bind the texture to texture unit 0
  gl.bindTexture(gl.TEXTURE_2D, texture);

  // uniform[1234][fi][v]() 方法指定了uniform 变量的值。
  // Tell the shader we bound the texture to texture unit 0
  gl.uniform1i(programInfo.uniformLocations.uSampler, 0);

  
    const vertexCount = 36;
    const type = gl.UNSIGNED_SHORT;
    const offset = 0;

    gl.drawElements(gl.TRIANGLES, vertexCount, type, offset);
  

  // Update the rotation for the next draw

  cubeRotation += deltaTime;


//
// Initialize a shader program, so WebGL knows how to draw our data
//
function initShaderProgram(gl, vsSource, fsSource) 
  const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource);
  const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource);

  // Create the shader program

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

  // If creating the shader program failed, alert

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

  return shaderProgram;


//
// creates a shader of the given type, uploads the source and
// compiles it.
//
// 
function loadShader(gl, type, source) 
  const shader = gl.createShader(type);

  // Send the source to the shader object

  gl.shaderSource(shader, source);

  // Compile the shader program

  gl.compileShader(shader);

  // See if it compiled successfully

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

  return shader;


export default drawTextureCube

实际效果

二、相关包源码

gl-matrix相关包源码链接如下： https://download.csdn.net/download/aa2528877987/86513333

三、总结

画一个图形主要经历如下四个步骤：

• 1.编写GLSL着色器代码，一个是顶点着色器，一个是片断着色器。
• 2.加载着色器，组成着色器程序。
• 3.创建缓冲区对象，填充缓冲区。
• 4.创建摄像机透视距阵，把元件放到适当的位置。
• 5.给着色器中的变量绑定值。
• 6.调用gl.drawArrays，从向量数组中开始绘制。