WebGL学习(3) - 向顶点着色器传递参数

通过gl.getAttribLocation获取顶点着色器中attribute变量的地址，通过gl.vertexAttrib3f给变量赋值，函数名getAttribLocation我是怎么记忆下来的，在第一遍练习的时候，我知道这个函数的第一个参数是program类型的，第二个参数是string类型的，转到定义一圈，见下图，发现貌似通过program的类型WebGLProgram和参数类型快速的找到

绊倒帕萨特

272人浏览 · 2021-12-28 06:15:38

绊倒帕萨特 · 2021-12-28 06:15:38 发布

通过gl.getAttribLocation获取顶点着色器中attribute变量的地址，通过gl.vertexAttrib3f给变量赋值，函数名getAttribLocation我是怎么记忆下来的，在第一遍练习的时候，我知道这个函数的第一个参数是program类型的，第二个参数是string类型的，转到定义一圈，见下图，发现貌似通过program的类型WebGLProgram和参数类型快速的找到getAttribLocation，这样就不用记忆了 😃

源码地址：
https://github.com/wuyutaott/learnwebgl/tree/main/exercise/ch02/HelloPoint2/e5

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">    
    <title>Document</title>
</head>
<body onload="main()">
    <script src="e5.js"></script>
</body>
</html>

function main() {
    const canvas = document.createElement('canvas');
    canvas.width = 300;
    canvas.height = 300;
    document.getElementsByTagName('body')[0].appendChild(canvas);

    const gl = canvas.getContext('webgl');

    const VS = `attribute vec4 a_Position;
                attribute float a_PointSize;
                void main() {
                    gl_Position = a_Position;
                    gl_PointSize = a_PointSize;
                }`;
    const FS = `void main() {
                    gl_FragColor = vec4(1, 0, 0, 1);
                }`;

    var vshader = gl.createShader(gl.VERTEX_SHADER);
    gl.shaderSource(vshader, VS);
    gl.compileShader(vshader);
    var fshader = gl.createShader(gl.FRAGMENT_SHADER);
    gl.shaderSource(fshader, FS);
    gl.compileShader(fshader);

    var program = gl.createProgram();
    gl.attachShader(program, vshader);
    gl.attachShader(program, fshader);
    gl.linkProgram(program);
    gl.useProgram(program);

    gl.clearColor(0, 0, 0, 1);
    gl.clear(gl.COLOR_BUFFER_BIT);

    // 修改点的位置
    var a_Position = gl.getAttribLocation(program, 'a_Position');
    gl.vertexAttrib3f(a_Position, 0.5, 0.5, 0);

    // 修改点的大小
    var a_PointSize = gl.getAttribLocation(program, 'a_PointSize');
    gl.vertexAttrib1f(a_PointSize, 20);

    gl.drawArrays(gl.POINTS, 0, 1);
}

在这里插入图片描述

AtomGit 开源协作平台测评赛

瓜分20万奖金获得内推名额丰厚实物奖励易参与易上手

更多推荐

【Spring Boot 】Spring Boot + HikariCP 连接池使用示例

文章目录示例工具版本HikariCP 依赖HikariCP 配置1. connectionTimeout2. minimumIdle3. maximumPoolSize4. idleTimeout5. maxLifetime6. autoCommitSpring Boot Data + HikariCP + MySQL示例测试应用程序1. 使用 Maven 命令2. 使用 Eclipse3. 使用