zoukankan      html  css  js  c++  java
  • WebGL编程笔记2:uniform变量使用

    <canvas id="myCanvas" width="600" height="300" style="border: 1px solid red"></canvas>
    
    const vertex = `
        precision lowp float;
        attribute vec3 vertexPosition;
        void main(void) {
            gl_Position = vec4(vertexPosition, 1.0);
        }
    `;
    const fragment = `
        precision lowp float;
        uniform   vec4 color;
        void main(void) {        
            gl_FragColor = color;
        }
    `;
    
    let canvas = document.getElementById('myCanvas');
    let webgl = canvas.getContext('webgl');
    const data_position = new Float32Array([
       // x       y      z        r       g       b       a
        -0.5,    0.5,    0.0,    0.9,    0.0,    0.0,    1.0,
        +0.5,    0.5,    0.0,    0.0,    0.8,    0.0,    1.0,
        +0.5,   -0.5,    0.0,    0.0,    0.0,    1.0,    1.0,
        -0.5,   -0.5,    0.0,    1.0,    1.0,    1.0,    1.0
    ]);
    const data_index = new Uint16Array([
        0, 1, 2,
        0, 2, 3
    ]);
    const FSIZE = data_position.BYTES_PER_ELEMENT;
    
    webgl.clearColor(0, 1, 0, 1);
    webgl.clear(webgl.COLOR_BUFFER_BIT);
    
    // 第一步:编译Shader程序,并创建program
    let program = createProgram(webgl, vertex, fragment);
    
    // 第二步:创建数据缓冲区和索引缓冲区
    let buffer_position = bindBufferWidthData(webgl, webgl.ARRAY_BUFFER, data_position);    // 将顶点数据写入数据缓冲区并启用
    let buffer_index = bindBufferWidthData(webgl, webgl.ELEMENT_ARRAY_BUFFER, data_index);  // 将索引数据写入冲区并启用
    
    // 第三步: 未Shader中的输入变量定义指针的,并分配取数位置
    let vertexPosition = bindVertexAttributePointer(webgl, program, "vertexPosition", 3, webgl.FLOAT, false, FSIZE * 7, 0); // 每次从buffer中取28个字节,从这一段字节中的offset=0字节开始取3个浮点数
    
    // 设置全局变量color
    let color = webgl.getUniformLocation(program, 'color');
    webgl.uniform4f(color, 1, 0, 0, 1);     // r g b a
    
    // 开始绘制
    webgl.drawElements(webgl.TRIANGLES, 6, webgl.UNSIGNED_SHORT, 0);
    

      

  • 相关阅读:
    TypeScript教程
    Xcode使用介绍之一:Xcode简介+创建App应用
    VSCode
    vscode 配置import @ 路径提示及代码智提
    踩坑:VScode 集成 eslint 插件
    VSCode配置ESLint
    如何安装Vscode软件及设置成中文界面?
    vscode 插件推荐
    1-VScode格式化ESlint-方法(最全最好用方法!)
    HTML5实践之歌词同步播放器
  • 原文地址:https://www.cnblogs.com/rainman/p/12582133.html
Copyright © 2011-2022 走看看