网页高性能图形编程（一）02——着色器介绍-记录像素点的位置和颜色，由顶点着色器和片段着色器组成 & 使用着色器绘制WebGL图形.md

最新推荐文章于 2024-07-24 00:00:00 发布

viceen

最新推荐文章于 2024-07-24 00:00:00 发布

阅读量328

点赞数

分类专栏：可视化文章标签： javascript js canvas

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

版权

可视化专栏收录该内容

130 篇文章 79 订阅

订阅专栏

第2章-初识WebGL

02-使用着色器绘制一个 WebGL图形

在这里插入图片描述

WebGL 中的坐标系统：

在这里插入图片描述

着色器的介绍：

着色器是使用 OpenGL ES Shading Language 语言编写的程序，负责记录像素点的位置和颜色，并由顶点着色器和片段着色器组成，通过用GLSL 编写这些着色器，并将代码文本传递给WebGL执行时编译，另外，顶点着色器和片段着色器的集合我们通常称之为着色器程序。

顶点着色器的功能是将输入顶点从原始坐标系转换到WebGL使用的缩放空间坐标系，每个轴的坐标范围从-1.0到1.0，顶点着色器对顶点坐标进行必要的转换后，保存在名称为gl_Position的特殊变量中备用。

片段着色器在顶点着色器处理完图形的顶点后，会被要绘制的每个图形的每个像素点调用一次，它的功能是确定像素的颜色值，并保存在名称为gl_FragColor的特殊变量中，该颜色值将最终绘制到图形像素的对应位置中。

实例-使用着色器绘制图形

<!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 =

           'void main() {' +

           //定义点的坐标并转换成变量保存
           'gl_Position = vec4(0.0, 0.0, 0.0, 1.0); ' +
           //设置缩放距离的直径
           'gl_PointSize = 10.0; '+

           '} ';

        //片段着色器变量
        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);
        
        //绘制指定位置的图形
        gl.drawArrays(gl.POINTS, 0, 1);   
        
    </script>
</body>
</html>