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

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

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

    git代码地址

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

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

    下面是代码

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8. head>
    9. <body>
    10.     
    11.     <canvas id='canvas'>canvas>
    12.     <script>
    13.         let canvas = document.getElementById('canvas');
    14.         let gl = canvas.getContext('webgl');
    15.  
    16.         let vertexShaderSource = `
    17.             attribute vec2 a_Position;//顶点的位置变量
    18.             void main(){
    19.                 gl_Position = vec4(a_Position,0.0,1.0) ; 
    20.             }
    21.         `
    22.         let fragmentShaderSouce = `
    23.             precision mediump float; 
    24.             void main(){
    25.                 //设置片元的颜色
    26.                 gl_FragColor = vec4(0.223,0.378,0.790,1.0);
    27.             }
    28.         `
    29.         //创建顶点着色器
    30.         let vertexShader = gl.createShader(gl.VERTEX_SHADER);
    31.         //绑定顶点着色器
    32.         gl.shaderSource(vertexShader, vertexShaderSource);
    33.         //编译顶点着色器
    34.         gl.compileShader(vertexShader)
    35.         //创建片元着色器
    36.         let fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
    37.         //绑定片元着色器
    38.         gl.shaderSource(fragmentShader, fragmentShaderSouce)
    39.         //编译片元着色器
    40.         gl.compileShader(fragmentShader)
    41.         //创建渲染程序
    42.         let program = gl.createProgram();
    43.         //绑定渲染程序
    44.         gl.attachShader(program, vertexShader);
    45.         gl.attachShader(program, fragmentShader);
    46.         //链接渲染程序
    47.         gl.linkProgram(program);
    48.         //使用当前渲染程序
    49.         gl.useProgram(program);
    50.  
    51.         //检测赋值是否有报错
    52.         if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
    53.             throw gl.getProgramInfoLog(program);
    54.         }
    55.         //设置顶点位置
    56.         let positonArray = new Float32Array([
    57.             -0.5,0.5,
    58.             -0.5,-0.5,
    59.             0.5,0.5,
    60.             0.5,-0.5,
    61.         ]) 
    62.         //获取顶点位置的a_Position变量
    63.         let a_Position = gl.getAttribLocation(program, 'a_Position'); 
    64.         //开始往a_Position中传递数据
    65.         //创建缓冲区
    66.         let buffer = gl.createBuffer();
    67.         //绑定缓冲区
    68.         gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
    69.         //将数据存入缓冲区
    70.         gl.bufferData(gl.ARRAY_BUFFER, positonArray, gl.STATIC_DRAW);
    71.         //将缓冲区中的数据存入a_Position中
    72.         //buffer中已经存在数据了，现在将数据分配至给指定的变量
    73.         //                      |将buffer中的数据分配给a_Position 
    74.         //                                 |（因为我们设置的vec2并且positonArray中的变量一共6个）
    75.         //                                      |（传入的是float值得类型）
    76.         //                                               |不进行归一化操作
    77.         //                                                       |变量需要的数据是2个字符为一套
    78.         //                                                                                        |每一套数据中数据偏移为0
    79.         //vertexAttribPointer : https://developer.mozilla.org/zh-CN/docs/Web/API/WebGLRenderingContext/vertexAttribPointer
    80.         gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 2*4, 0);
    81.         //开启a_Position
    82.         gl.enableVertexAttribArray(a_Position); 
    83.         //绘制
    84.         //设置清屏时候的颜色
    85.         gl.clearColor(0.0, 0.0, 0.0, 1.0);
    86.         //清空颜色缓冲区
    87.         gl.clear(gl.COLOR_BUFFER_BIT);
    88.         //绘制图形
    89.         gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
    90.   
    91.     script>
    92. body>
    93. html>

  • 相关阅读:
    简单解决网页的验证码
    【最佳实践】京东小程序-LBS业务场景的性能提升
    Audio Hijack for Mac 激活版：音频录制与处理软件
    IDEA
    面试：单例模式
    SpringMVC
    【计算机网络】https协议
    并发——中断机制
    JSON Web Token
    MySQL数据类型的选择（详解版）
  • 原文地址：https://blog.csdn.net/huhudeni/article/details/133774550