网页高性能图形编程（三）01-WebGL动画-使用着色器绘制平移的三角图形 & 每个顶点加上一个分量，得到一个新的坐标

最新推荐文章于 2022-09-11 00:10:05 发布

viceen

最新推荐文章于 2022-09-11 00:10:05 发布

阅读量222

点赞数

分类专栏：可视化文章标签：字符串 js javascript

本文链接：https://blog.csdn.net/weixin_44867717/article/details/119283886

版权

可视化专栏收录该内容

130 篇文章 78 订阅

订阅专栏

第4章-WebGL动画

01-图形的移动

在这里插入图片描述

平移原理

为了平移一个三角形，只需要对它的每个顶点进行移动，即每个顶点加上一个分量，得到一个新的坐标：

X1=X+TX``Y1=Y+TY``Z1=Z+TZ

只需要着色器中为顶点坐标的每个分量加上一个常量就可以实现，当然这这修改在顶点着色器上。

uniform类型变量

用于保存和传输一致的数据，既可用于顶点，也可用于片断。

实例-使用着色器绘制平移的三角图形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <canvas id="cvs"
            width="200"
            height="200"
            style="border: dashed 1px red">
        你的浏览器不支持画布元素
    </canvas>
    <script type="text/javascript">
        //获取画布元素
        var cvs=document.getElementById("cvs");
        //获取到元素的上下文环境对象
        var gl=cvs.getContext('webgl');
        
        //顶点着色器变量
        var VSHADER_SOURCE =
           //使用存储限定符定义一个接受顶点坐标的变量
           'attribute vec4 a_Position;'+
           //使用存储限定符定义一个接受一致偏移量的变量
           "uniform vec4 u_Translation;" +
           'void main() {' +

           //定义点的坐标并转换成变量保存
           'gl_Position = a_Position + u_Translation; ' +

           '} ';

        //片段着色器变量
        var FSHADER_SOURCE =
           
           'void main() {' +
           //设置图形像素的颜色并保存
           'gl_FragColor = vec4(0.0, 1.0, 0.0, 1.0);' +

           '}';

        //新建一个用于装顶点字符串的着色器对象
        var vertShader = gl.createShader(gl.VERTEX_SHADER);
        //加载保存好的顶点代码字符串变量
        gl.shaderSource(vertShader, VSHADER_SOURCE);
        //编译顶点着色器
        gl.compileShader(vertShader);

        //新建一个用于装片段字符串的着色器对象
        var fragShader = gl.createShader(gl.FRAGMENT_SHADER);
        //加载保存好的片段代码字符串变量
        gl.shaderSource(fragShader, FSHADER_SOURCE);
        //编译片段着色器
        gl.compileShader(fragShader);

        //新建一个程序
        var shaderProgram = gl.createProgram();

        //分别附加两个已编译好的着色器对象
        gl.attachShader(shaderProgram, vertShader);
        gl.attachShader(shaderProgram, fragShader);
        
        //链接两个附件加好的着色器程序
        gl.linkProgram(shaderProgram);
        //开启程序的使用
        gl.useProgram(shaderProgram);
        //定义一个类型数组保存顶点坐标值
        var vertices = new Float32Array([
                0.0, 0.5,
                -0.5, -0.5,
                0.5, -0.5
            ]);
        //先创建一个缓存对象
        var vertexBuffer = gl.createBuffer();
        //说明缓存对象保存的类型
        gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
        //写入坐标数据
        gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
        //获取到顶点着色器中变量
        var a_Position = gl.getAttribLocation(shaderProgram, 'a_Position');
        //将坐标值赋值给变量
        gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
        //开启变量值的使用
        gl.enableVertexAttribArray(a_Position);
        
        //定义各坐标点的统一偏移量
        var Tx = 0.2, Ty = 0.3, Tz = 0.0;
        //获取到顶点着色器中uniform变量
        var u_Translation = gl.getUniformLocation(shaderProgram, 'u_Translation');
        //将多个偏移量赋值值给uniform变量
        gl.uniform4f(u_Translation, Tx, Ty, Tz, 0.0);
        
        //绘制指定位置的图形
        gl.drawArrays(gl.TRIANGLES, 0, 3); 
        
    </script>
</body>
</html>

效果-右上角平移

在这里插入图片描述

viceen

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
网页高性能图形编程（三）01-WebGL动画-使用着色器绘制平移的三角图形 & 每个顶点加上一个分量，得到一个新的坐标

第4章-WebGL动画01-图形的移动平移原理为了平移一个三角形，只需要对它的每个顶点进行移动，即每个顶点加上一个分量，得到一个新的坐标：X1=X+TX``Y1=Y+TY``Z1=Z+TZ 只需要着色器中为顶点坐标的每个分量加上一个常量就可以实现，当然这这修改在顶点着色器上。uniform类型变量用于保存和传输一致的数据，既可用于顶点，也可用于片断。实例-使用着色器绘制平移的三角图形<!DOCTYPE html><html lan
复制链接

扫一扫

专栏目录