WebGL绘制点

 

 

<!--
 * @Author: 苹果园dog
 * @Date: 2020-11-16 23:33:54
 * @LastEditTime: 2020-11-17 10:27:58
 * @LastEditors: Please set LastEditors
 * @Description: 以下内容从webgl编程指南抄录
        我们的目标是，将位置信息从JavaScript程序传给顶点着色器，有两种方式可以做到这点：attribute变量和uniform变量。
        使用哪一个变量取决于需传输 的数据本身，attribute变量传输的是那些与顶点相关的数据，
        而uniform变量传输的是那些对于所有顶点都相同（或与顶点无关）的数据。本例将使用attribute变量来传输
        顶点坐标，显然不同的顶点通常具有不同的坐标。
        attribute变量是一种GLSL ES变量，被用来从外部向顶点着色器内传输数据，只有顶点着色器能使用它。
        为了使用attribute变量，示例程序需包含以下步骤：
        1、在顶点着色器中，声明attribute变量；
        2、将attribute变量赋值给gl_Position变量；
        3、向attribute变量传输数据。
        我们在js中指定一个点的坐标，然后在该坐标画了一个点。
 * @FilePath: \web\webgl\study\helloPoint2.html
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body onload="main()">
    <!--
    ​    如果不给 <canvas> 设置 widht、height 属性时，
        则默认 width为300、height 为 150，单位是 px。
    -->
    <canvas id="webgl" width="400" height="400">
        Please use a browser that supports "canvas"
    </canvas>
    <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;
        void main(){
            gl_Position=a_Position;
            gl_PointSize=15.0;
        }
        `;
        //片元着色器
        var FSHADER_SOURCE = `
        void main(){
            gl_FragColor=vec4(1.0, 0.0, 0.0, 1.0);
        }
        `;
        function main() {
            //获取<canvas>元素
            var canvas = document.getElementById('webgl');
            //获取WebGL上下文
            var gl = getWebGLContext(canvas);
            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('获取a_Position变量的存储位置失败！');
                return;
            }
            //将顶点位置传给attribute变量
            gl.vertexAttrib3f(a_Position, 0.0, 0.0, 0.0);
            //设置canvas背景色
            gl.clearColor(0.0, 0.0, 0.0, 1.0);
            //清除canvas
            gl.clear(gl.COLOR_BUFFER_BIT);
            //绘制一个点
            gl.drawArrays(gl.POINTS, 0, 1);

            /*
             * attribute vec4 a_Position;
             * 在这一行中，关键词attribute被称为存储限定符（storage qualifier）,它表示接下来的变量是一个attribute变量，attribute变量必须声明
             * 成全局变量，数据将从着色器外部传给该变量。变量的声明必须按照以下格式：
             * <存储限定符><类型><变量名>
             * attribute变量a_Position的类型是vec4。
             * 我们使用辅助函数initShaders()在WebGL系统中建立了顶点着色器。
             * 然后，WebGL就会对着色器进行解析，辨识出着色器具有的attribute变量，每个变量都具有一个存储地址，以便通过存储地址向变量传输数据。
             * 比如，当你想要向顶点着色器的a_Position变量传输数据时，首先需要向WebGL系统请求该变量的存储地址。
             * 我们使用gl.getAttribLocation()来获取attribute变量的地址。
             * gl.vertexAttrib3f(a_Positon,0.0,0.0,0.0);
             * 一旦将attribute变量的存储地址保存在js变量a_Position中，就需要使用该变量向着色器传入值
             * 该函数的第一个参数是attribute变量的存储地址，第2，3，4个参数是三个浮点型数值，即x，y，z坐标值。函数被调用后，这三个值被一起传给
             * 顶点着色器中的a_Position变量。 
             */

        }
    </script>
</body>

</html>

 

 
 
 
 

 

 

posted on 2020-11-17 10:33  历历往事如在昨日  阅读(219)  评论(0)    收藏  举报

导航