• webGL编程指南 第三章 绘制四角形.helloQuadjs（加餐）

    我会持续更新关于wegl的编程指南中的代码。

    当前的代码不会使用书中的缩写，每一步都是会展开写。希望能给后来学习的一些帮助

    git代码地址

    接着  上一节 接着做使用缓冲区赋值。

    本节中我们还是使用4个顶点，放在一个数组中。然后去获取缓冲区中的数据，同时绘制矩形

    在绘制的时候我们给它添加上颜色。

    下面是代码 

    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.  
    13.     <canvas id='canvas'>canvas>
    14.     <script>
    15.         let canvas = document.getElementById('canvas');
    16.         let gl = canvas.getContext('webgl');
    17.  
    18.         let vertexShaderSource = `
    19.             attribute vec3 a_Position;
    20.             attribute vec3 a_Color; 
    21.             varying vec3 v_Color;
    22.             void main(){
    23.                 gl_Position = vec4(a_Position,1.0); 
    24.                 v_Color = a_Color;
    25.             }
    26.         `
    27.         let fragmentShaderSouce = `
    28.             precision mediump float; 
    29.             varying vec3 v_Color;
    30.             void main(){
    31.                 gl_FragColor =vec4(v_Color,1.0) ;
    32.             }
    33.         `
    34.         // 创建顶点着色器
    35.         let vertexShader = gl.createShader(gl.VERTEX_SHADER);
    36.         // 绑定着色器源码
    37.         gl.shaderSource(vertexShader, vertexShaderSource)
    38.         // 编译着色器
    39.         gl.compileShader(vertexShader)
    40.  
    41.         // 创建片段着色器
    42.         let fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
    43.         // 绑定着色器源码
    44.         gl.shaderSource(fragmentShader, fragmentShaderSouce);
    45.         // 编译着色器
    46.         gl.compileShader(fragmentShader);
    47.  
    48.         //创建渲染程序
    49.         let program = gl.createProgram();
    50.         // 绑定渲染程序
    51.         gl.attachShader(program, vertexShader);
    52.         // 绑定渲染程序
    53.         gl.attachShader(program, fragmentShader);
    54.         // 链接渲染程序
    55.         gl.linkProgram(program);
    56.         //使用当前渲染程序
    57.         gl.useProgram(program)
    58.         
    59.         //检测赋值是否有报错
    60.         if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
    61.             throw gl.getProgramInfoLog(program);
    62.         }
    63.         // 设置顶点位置
    64.         let positonArray = new Float32Array([ 
    65.             -0.5, 0.5, 0,
    66.             -0.5, -0.5, 0,
    67.             0.5, 0.5, 0,
    68.             0.5, -0.5, 0,
    69.         ])
    70.         //随机颜色数据
    71.         let colorList = new Float32Array(12)
    72.         for (let index = 0; index < 12; index++) {
    73.             colorList[index] = Math.random()
    74.         }
    75.  
    76.         //获取顶点变量
    77.         let a_Position = gl.getAttribLocation(program, 'a_Position'); 
    78.         // 获取颜色变量
    79.         let a_Color = gl.getAttribLocation(program, 'a_Color')
    80.  
    81.         // 绑定颜色数据
    82.         let buffer = gl.createBuffer();
    83.         //绑定缓冲区
    84.         gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
    85.         // 向缓冲区写入数据 
    86.         gl.bufferData(gl.ARRAY_BUFFER, positonArray, gl.STATIC_DRAW)
    87.         // 设置顶点数据
    88.          //buffer中已经存在数据了，现在将数据分配至给指定的变量
    89.         //                      |将buffer中的数据分配给a_Position 
    90.         //                                 |（因为我们设置的vec3并且positonArray中的变量一共12个）
    91.         //                                      |（传入的是float值得类型）
    92.         //                                               |不进行归一化操作
    93.         //                                                       |变量需要的数据是3个字符为一套
    94.         //                                                                                        |每一套数据中数据偏移为0
    95.         //vertexAttribPointer : https://developer.mozilla.org/zh-CN/docs/Web/API/WebGLRenderingContext/vertexAttribPointer
    96.         //赋值给a_Position的变量
    97.         //一组需要3个字符(x,y,z)
    98.         //传入的是float值得类型
    99.         //不需要归一化
    100.         //变量需要的数据是3个字符为一套 一个字符占4个字节
    101.         //每一套数据中数据偏移为0
    102.         gl.vertexAttribPointer(a_Position, 3, gl.FLOAT, false, 3 * positonArray.BYTES_PER_ELEMENT, 0);
    103.         // 启用顶点数据
    104.         gl.enableVertexAttribArray(a_Position);
    105.  
    106.         // 绑定颜色数据
    107.         let colorBuffer = gl.createBuffer()
    108.         //绑定缓冲区
    109.         gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer)
    110.         // 向缓冲区写入数据 
    111.         gl.bufferData(gl.ARRAY_BUFFER, colorList, gl.STATIC_DRAW);
    112.         //同上述的解是
    113.         //赋值给a_Color变量 
    114.         //一个a_Color需要3个 
    115.         //传入的是float值得类型 
    116.         //不需要归一化 
    117.         //变量需要的数据是3个字符为一套 一个字符占4个字节  
    118.         //每一套数据中数据偏移为0
    119.         gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, 3 * colorList.BYTES_PER_ELEMENT, 0);
    120.         // 启用顶点数据
    121.         gl.enableVertexAttribArray(a_Color);
    122.         //绘制
    123.         gl.clearColor(0.0, 0.0, 0.0, 1.0);
    124.         //清空颜色缓冲区
    125.         gl.clear(gl.COLOR_BUFFER_BIT);
    126.          //绘制图形
    127.         gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4)
    128.  
    129.         console.log(positonArray)
    130.  
    131.  
    132.     script>
    133. body>
    134.  
    135. html>

  • 相关阅读:
    burp || Note: Disk-based projects are onlysupported on Burp Suite Professional
    关于Skywalking Agent customize-enhance-trace对应用复杂参数类型取值
    推荐一款功能强大的 GPT 学术优化开源项目GPT Academic：学术研究的智能助手
    CDN工作原理
    【牛客-剑指offer-数据结构篇】JZ52 两个链表的第一个公共节点 两种思路 Java实现
    哪些企业需要数字化转型？
    无线设备天线的选型及其安装注意事项
    深度学习落地实战：基于UNet实现血管瘤超声图像分割
    javabasic
    go-micro集成链路跟踪的方法和中间件原理
  • 原文地址：https://blog.csdn.net/huhudeni/article/details/133774629