• OPENGL 不同绘制图元的类型，顶点索引的解释方式不同

    先看几个摘抄的代码例子

    1

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Documenttitle>
    9. head>
    10.  
    11. <body>
    12.     <canvas id="canvas" width="400" height="400">
    13.         Please use a browser that supports "canvas"
    14.     canvas>
    15.     <script src="../lib/cuon-matrix.js">script>
    16.     <script>
    17.         var VSHADER_SOURCE =
    18.             'attribute vec4 a_Position;\n' +
    19.             'attribute vec4 a_Color;\n' +
    20.             'uniform mat4 u_ViewProjMatrix;\n' +
    21.             'varying vec4 v_Color;\n' +
    22.             'void main() {\n' +
    23.             '  gl_Position = u_ViewProjMatrix * a_Position;\n' +
    24.             '  v_Color = a_Color;\n' +
    25.             '}\n';
    26.  
    27.         // Fragment shader program
    28.         var FSHADER_SOURCE =
    29.             '#ifdef GL_ES\n' +
    30.             'precision mediump float;\n' +
    31.             '#endif\n' +
    32.             'varying vec4 v_Color;\n' +
    33.             'void main() {\n' +
    34.             '  gl_FragColor = v_Color;\n' +
    35.             '}\n';
    36.         const gl = canvas.getContext('webgl');
    37.         const createShader = (type, source) => {
    38.             const shader = gl.createShader(type);
    39.             gl.shaderSource(shader, source);
    40.             gl.compileShader(shader);
    41.             const compileState = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
    42.             if (!compileState) {
    43.                 const info = gl.getShaderInfoLog(shader);
    44.                 console.log('编译白痴信息为' + info)
    45.                 gl.deleteShader(shader);
    46.                 return null;
    47.             }
    48.             return shader
    49.         }
    50.         const createProgram = (vshader, fshader) => {
    51.             const vertexShader = createShader(gl.VERTEX_SHADER, vshader);
    52.             const fragementSaher = createShader(gl.FRAGMENT_SHADER, fshader);
    53.             if (!vertexShader || !fragementSaher) {
    54.                 console.log('创建着色器失败')
    55.                 return null
    56.             }
    57.             const program = gl.createProgram();
    58.             gl.attachShader(program, vertexShader);
    59.             gl.attachShader(program, fragementSaher);
    60.             gl.linkProgram(program);
    61.             const linkState = gl.getProgramParameter(program, gl.LINK_STATUS);
    62.             if (!linkState) {
    63.                 const err = gl.getProgramInfoLog(program);
    64.                 console.log('链接报错信息为' + err);
    65.                 gl.deleteShader(vertexShader);
    66.                 gl.deleteShader(fragementSaher);
    67.                 gl.deleteProgram(program);
    68.                 return null
    69.             }
    70.             return program
    71.         }
    72.         const program = createProgram(VSHADER_SOURCE, FSHADER_SOURCE)
    73.         gl.useProgram(program);
    74.         gl.program = program;
    75.         const initVertexBuffers = () => {
    76.             var verticesColors = new Float32Array([
    77.                 // Vertex coordinates and color
    78.                 1.0, 1.0, 1.0, 1.0, 1.0, 1.0,  // v0 White
    79.                 -1.0, 1.0, 1.0, 1.0, 0.0, 1.0,  // v1 Magenta
    80.                 -1.0, -1.0, 1.0, 1.0, 0.0, 0.0,  // v2 Red
    81.                 1.0, -1.0, 1.0, 1.0, 1.0, 0.0,  // v3 Yellow
    82.                 1.0, -1.0, -1.0, 0.0, 1.0, 0.0,  // v4 Green
    83.                 1.0, 1.0, -1.0, 0.0, 1.0, 1.0,  // v5 Cyan
    84.                 -1.0, 1.0, -1.0, 0.0, 0.0, 1.0,  // v6 Blue
    85.                 -1.0, -1.0, -1.0, 0.0, 0.0, 0.0   // v7 Black
    86.             ]);
    87.  
    88.             var indices = new Uint8Array([
    89.                 0, 1, 2, 0, 2, 3,    // front
    90.                 0, 3, 4, 0, 4, 5,    // right
    91.                 0, 5, 6, 0, 6, 1,    // up
    92.                 1, 6, 7, 1, 7, 2,    // left
    93.                 7, 4, 3, 7, 3, 2,    // down
    94.                 4, 7, 6, 4, 6, 5     // back
    95.             ]);
    96.             const vertexColorbuffer = gl.createBuffer();
    97.             const indexBuffer = gl.createBuffer();
    98.             const size = verticesColors.BYTES_PER_ELEMENT;
    99.             gl.bindBuffer(gl.ARRAY_BUFFER, vertexColorbuffer);
    100.             gl.bufferData(gl.ARRAY_BUFFER, verticesColors, gl.STATIC_DRAW);
    101.             var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
    102.             gl.vertexAttribPointer(a_Position, 3, gl.FLOAT, false, size * 6, 0);
    103.             gl.enableVertexAttribArray(a_Position);
    104.             var a_Color = gl.getAttribLocation(gl.program, 'a_Color');
    105.             gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, size * 6, size * 3);
    106.             gl.enableVertexAttribArray(a_Color);
    107.  
    108.             gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
    109.             gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);
    110.  
    111.             return indices.length;
    112.         }
    113.         const n = initVertexBuffers();
    114.         gl.clearColor(0.0, 0.0, 0.0, 1.0);
    115.         gl.enable(gl.DEPTH_TEST);
    116.         console.log(n, 'nnn')
    117.         var u_MvpMatrix = gl.getUniformLocation(gl.program, 'u_ViewProjMatrix');
    118.         var mvpMatrix = new Matrix4();
    119.         mvpMatrix.setPerspective(30, 1, 1, 100);
    120.         mvpMatrix.lookAt(3, 3, 7, 0, 0, 0, 0, 1, 0);
    121.         gl.uniformMatrix4fv(u_MvpMatrix, false, mvpMatrix.elements);
    122.         gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
    123.         gl.drawElements(gl.TRIANGLES, n, gl.UNSIGNED_BYTE, 0);
    124.  
    125.     script>
    126. body>
    127.  
    128. html>

     2

    1.     var canvasElement=document.getElementById('webgl');
    2.     var gl=canvasElement.getContext('webgl');
    3.     //顶点着色器源码
    4.     var vertexShaderSource = '' +
    5.         //attribute声明vec4类型变量apos
    6.         'attribute vec4 apos;'+
    7.         'void main(){' +
    8.         //设置几何体轴旋转角度为30度，并把角度值转化为浮点值
    9.         'float radian = radians(30.0);'+
    10.         //求解旋转角度余弦值
    11.         'float cos = cos(radian);'+
    12.         //求解旋转角度正弦值
    13.         'float sin = sin(radian);'+
    14.         //引用上面的计算数据，创建绕x轴旋转矩阵
    15.         // 1      0       0    0
    16.         // 0   cosα   sinα   0
    17.         // 0  -sinα   cosα   0
    18.         // 0      0        0   1
    19.         'mat4 mx = mat4(1,0,0,0,  0,cos,-sin,0,  0,sin,cos,0,  0,0,0,1);'+
    20.         //引用上面的计算数据，创建绕y轴旋转矩阵
    21.         // cosβ   0   sinβ    0
    22.         //     0   1   0        0
    23.         //-sinβ   0   cosβ    0
    24.         //     0   0   0        1
    25.         'mat4 my = mat4(cos,0,-sin,0,  0,1,0,0,  sin,0,cos,0,  0,0,0,1);'+
    26.         //两个旋转矩阵、顶点齐次坐标连乘
    27.         '   gl_Position = mx*my*apos;' +
    28.         '}';
    29.     //片元着色器源码
    30.     var fragShaderSource = '' +
    31.         'void main(){' +
    32.         '   gl_FragColor = vec4(1.0,0.0,0.0,1.0);' +
    33.         '}';
    34.     //初始化着色器
    35.     var program = initShader(gl,vertexShaderSource,fragShaderSource);
    36.     //获取顶点着色器的位置变量apos
    37.     var aposLocation = gl.getAttribLocation(program,'apos');
    38.  
    39. //        8个顶点坐标数组
    40.     var data=new Float32Array([
    41.         0.5,  0.5,  0.5,//顶点0
    42.         -0.5,  0.5,  0.5,//顶点1
    43.         -0.5, -0.5,  0.5,//顶点2
    44.         0.5, -0.5,  0.5,//顶点3
    45.         0.5,  0.5, -0.5,//顶点4
    46.         -0.5,  0.5, -0.5,//顶点5
    47.         -0.5, -0.5, -0.5,//顶点6
    48.         0.5, -0.5, -0.5,//顶点7
    49.     ]);
    50. //        顶点索引数组
    51.     var indexes = new Uint8Array([
    52. //        前四个点
    53.         0,1,2,3,
    54. //        后四个顶点
    55.         4,5,6,7,
    56. //        前后对应点
    57.         0,4,
    58.         1,5,
    59.         2,6,
    60.         3,7
    61.     ]);
    62.  
    63.     //创建缓冲区对象
    64.     var indexesBuffer=gl.createBuffer();
    65.     //绑定缓冲区对象
    66.     gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER,indexesBuffer);
    67.     //索引数组indexes数据传入缓冲区
    68.     gl.bufferData(gl.ELEMENT_ARRAY_BUFFER,indexes,gl.STATIC_DRAW);
    69.  
    70.     //创建缓冲区对象
    71.     var buffer=gl.createBuffer();
    72.     //绑定缓冲区对象
    73.     gl.bindBuffer(gl.ARRAY_BUFFER,buffer);
    74.     //顶点数组data数据传入缓冲区
    75.     gl.bufferData(gl.ARRAY_BUFFER,data,gl.STATIC_DRAW);
    76.     //缓冲区中的数据按照一定的规律传递给位置变量apos
    77.     gl.vertexAttribPointer(aposLocation,3,gl.FLOAT,false,0,0);
    78.     //允许数据传递
    79.     gl.enableVertexAttribArray(aposLocation);
    80.  
    81.  
    82.     //LINE_LOOP模式绘制前四个点
    83.     gl.drawElements(gl.LINE_LOOP,4,gl.UNSIGNED_BYTE,0);
    84.     //LINE_LOOP模式从第五个点开始绘制四个点
    85.     gl.drawElements(gl.LINE_LOOP,4,gl.UNSIGNED_BYTE,4);
    86.     //LINES模式绘制后8个点
    87.     gl.drawElements(gl.LINES, 8, gl.UNSIGNED_BYTE, 8);
    88.  
    89.  
    90.     //声明初始化着色器函数
    91.     function initShader(gl,vertexShaderSource,fragmentShaderSource){
    92.         var vertexShader = gl.createShader(gl.VERTEX_SHADER);
    93.         var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
    94.         gl.shaderSource(vertexShader,vertexShaderSource);
    95.         gl.shaderSource(fragmentShader,fragmentShaderSource);
    96.         gl.compileShader(vertexShader);
    97.         gl.compileShader(fragmentShader);
    98.         var program = gl.createProgram();
    99.         gl.attachShader(program,vertexShader);
    100.         gl.attachShader(program,fragmentShader);
    101.         gl.linkProgram(program);
    102.         gl.useProgram(program);
    103.         return program;
    104.     }

    glDrawElements 和glDrawArrays的GL_POINTS, GL_LINE_STRIP, GL_LINE_LOOP, GL_LINES, GL_TRIANGLE_STRIP, GL_TRIANGLE_FAN, GL_TRIANGLES, GL_QUAD_STRIP, GL_QUADS, and GL_POLYGON这个模式mode，不同的模式对indices顶点索引数组有不同的解释，包含步长和步进方式；

    譬如

    Tips：（一般规定逆时针卷绕为正方向）

    GL_TRIANGLES：每三个顶点绘制一个三角形，如果顶点数量不是3的倍数，则忽略最后一个或两个顶点。

    GL_TRIANGLE_STRIP：有两种情况，

    （1）当前顶点序号n是偶数时，三角形三个顶点的顺序是(n - 2, n - 1, n )。

    （2）当前顶点序号n是奇数时，三角形三个顶点的顺序是(n - 1, n - 2, n)。

    这两种情况，保证了采用此种渲染方式的三角形顶点的卷绕顺序。

    例如：对于v2顶点，其序号为2，此时三个顶点的顺序是(v0, v1, v2)；对于v3顶点，其序号为3，此时三个顶点的顺序是(v2, v1, v3)，均是逆时针卷绕。

    GL_TRIANGLE_FAN：一系列顶点中的第一个点为中心点，其他顶点为边缘点，绘制一系列组成扇形的相邻三角形。例如三角形(v0, v1, v2)、(v0, v2, v3)。

  • 相关阅读:
    电脑数据同步到APP
    Python面向对象编程
    【Rust 日报】2022-08-28 Rust与GPU、WASM的应用
    Karmada 多云容器编排引擎支持多调度组，助力成本优化
    如何让“ChatGPT自己写出好的Prompt的“脚本在这里
    用echarts显示本年365天每天的数据
    Java面试八股之Redis哨兵机制
    Element UI 实战：跨页保存表格选中状态与判断状态可选性的高效方案
    jeesite添加多数据源
    基于N32G45的OLED驱动
  • 原文地址：https://blog.csdn.net/whl0071/article/details/126318523