07 WebGL使用attribute变量

最新推荐文章于 2024-05-06 02:36:01 发布

暮志未晚NAN

最新推荐文章于 2024-05-06 02:36:01 发布

阅读量2.5k

点赞数 4

分类专栏： WebGL 文章标签：数据 webgl attribute

本文链接：https://blog.csdn.net/qq_30100043/article/details/70880611

版权

WebGL 专栏收录该内容

58 篇文章 74 订阅

订阅专栏

我们将位置信息从javascript程序中传给顶点着色器。有两种方式可以做到这点：

attribute变量和uniform变量

attribute变量传输的是与顶点相关的数据

uniform变量传输的是对于所有顶点都相同（或与顶点无法）的数据。

思路：

1.在顶点着色器中，声明attribute变量。

2.将attribute变量赋值给gl_Position变量。

3.向attribute变量传输数据。

示例：

案例查看地址：点击这里

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body οnlοad="main()">
<canvas id="canvas" height="400" width="400">
    你的浏览器不支持WebGL，请更换新的浏览器
</canvas>
</body>
<script src="lib/webgl-utils.js" ></script>
<script src="lib/webgl-debug.js" ></script>
<script src="lib/cuon-utils.js" ></script>
<script>
    //顶点着色器程序
    var VSHADER_SOURCE="" +
        "attribute vec4 a_Position;\n" +
        "void main(){\n" +
        "   gl_Position = a_Position;\n" +//设置坐标
        "   gl_PointSize = 10.0;\n" +//设置尺寸
        "}\n";

    //片元着色器程序
    var FSHADER_SOURCE = "" +
        "void main(){\n" +
        "   gl_FragColor = vec4(1.0,0.0,0.0,1.0);\n" +//设置颜色
        "}\n";

    function main() {
        //首先获取到canvas的dom对象
        var canvas = document.getElementById("canvas");

        //获取到WebGL的上下文
        var gl = getWebGLContext(canvas);

        //不支持WebGL的浏览器将打印一个错误，并结束代码运行
        if (!gl) {
            console.log("浏览器不支持WebGL");
            return;
        }

        //初始化着色器
        if(!initShaders(gl,VSHADER_SOURCE,FSHADER_SOURCE)){
            console.log("初始化着色器失败");
            return;
        }

        //获取attribute变量的存储位置
        var a_Position = gl.getAttribLocation(gl.program, "a_Position");

        if(a_Position < 0){
            console.log("无法获取变量的存储位置");
            return;
        }

        //将顶点位置传输给attribute变量
        gl.vertexAttrib3f(a_Position,0.0,0.5,0.0);

        //指定一个覆盖（清空）canvas的颜色
        gl.clearColor(0.0, 0.0, 0.0, 1.0);

        //执行清空
        gl.clear(gl.COLOR_BUFFER_BIT);

        //绘制一个点
        gl.drawArrays(gl.POINTS,0,1);
    }
</script>
</html>

WebGL的变量声明必须以下格式：

<存储限定符（attribute/uniform）><类型><变量名> 限定符就和war很类似

本课程遵循了一个约定就是：attribute变量都以a_开头，uniform变量都以u_开头。

然后将声明的变量赋值给了位置

"   gl_Position = a_Position;\n" +//设置坐标

下一步就需要考虑通过javascript给变量赋值，那么就需要通过api获取到attribute存储位置

        //获取attribute变量的存储位置
        var a_Position = gl.getAttribLocation(gl.program, "a_Position");

gl.getAttribLocation函数的规范如下：

第一个值是什么意思，暂时先放着，这个方法就是获取存储位置的方法。

向attribute变量赋值

        //将顶点位置传输给attribute变量
        gl.vertexAttrib3f(a_Position,0.0,0.5,0.0);

gl.vertexAttrib3f（）规范如下

通过此方法，将位置信息传给WebGL，WebGL将变量赋值，在通过原来的以下方法清空背景，进行绘制，显示出了点。

gl.vertexAttrib3f还有同族函数，如图

暮志未晚NAN

关注

4
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
07 WebGL使用attribute变量

我们将位置信息从javascript程序中传给顶点着色器。有两种方式可以做到这点：attribute变量和uniform变量attribute变量传输的是与顶点相关的数据uniform变量传输的是对于所有顶点都相同（或与顶点无法）的数据。思路：1.在顶点着色器中，声明attribute变量。2.将attribute变量赋值给gl_Position变量。3.向attribute变量传输数据。示例：案...
复制链接

扫一扫