搜索
  • webgl入门之给画布换颜色与着色器
  • 发布于 2个月前
  • 197 热度
    0 评论

前言

WebGL（全写Web Graphics Library）是一种3D绘图协议，它允许将JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，为HTML5 Canvas提供硬件3D加速渲染。这样，Web开发人员就可以借助系统显卡在浏览器里更流畅地展示3D场景和模型，并创建复杂的导航和数据视觉化。WebGL技术标准免去了开发网页专用渲染插件的麻烦，可被用于创建具有复杂3D结构的网站页面，甚至可以用来设计3D网页游戏等等。

这篇文章，我将结合代码，在浏览器中先画一个点。

实现代码 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>堆代码 duidaima.com</title>
</head>
<body>
    <canvas id="canvas" width="400" height="400">
        此浏览器不支持canvas <!-- 兼容不支持canvas浏览器的提示信息 -->
    </canvas>
    <script>
        const ctx = document.getElementById("canvas"); // 获取canvas对象
        const gl = ctx.getContext("webgl"); // 获取上下文【和canvas不一样】
        // 顶点着色器
        const VERTEX_SHADER_SOURCE = `
            // 必须要存在main函数
            void main() {
                // 要绘制点的坐标
                gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
                // 点的大小
                gl_PointSize = 20.0;
            }
        `;
       
        // 片着色器
        const FRAGMENT_SHADER_SOURCE = `
            void main() {
                gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
            }
        `;

        // 创建着色器
        const vertexShader = gl.createShader(gl.VERTEX_SHADER);
        const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);

        gl.shaderSource(vertexShader, VERTEX_SHADER_SOURCE); // 指定着色器源码
        gl.shaderSource(fragmentShader, FRAGMENT_SHADER_SOURCE); // 指定着色器源码

        // 编译着色器
        gl.compileShader(vertexShader);
        gl.compileShader(fragmentShader);

        // 创建一个程序对象【作用就是关联JavaScript和gl程序】
        const program = gl.createProgram();
        
        gl.attachShader(program, vertexShader);
        gl.attachShader(program, fragmentShader);

        gl.linkProgram(program);

        gl.useProgram(program);

        // 三个参数分别是绘制的图形是什么， 从哪个开始，使用几个顶点
        gl.drawArrays(gl.POINTS, 0, 1)
</script>
</body>
</html>
使用上面的代码，将在浏览器中得到一个点，

下面小编针对代码，做一些说明
const ctx = document.getElementById("canvas");
const gl = ctx.getContext("webgl");
这两行代码主要是获取上下文，与canvas不同的是，gl上下文里面的参数是webgl，而不是canvas中的2d或者3d。

着色器
着色器就是让开发者自己去编写一段程序，用来代替固定渲染管线，来处理图像的渲染。在canvas中，只能控制最后的结果，而不能介入到图形的绘制过程中，而通过着色器就可以实现。在上面例子中，介绍了顶点着色器和片元着色器。在这里要特别注意，在创建着色器的过程中，有严格的语法，在花括号内，每行语句结尾都需要有分号。否则会报错。

上面介绍了在浏览器上绘制一个点，同样，绘制线段和其他图形，调用不同方法就可以，就像这样：
gl.drawArrays(gl.LINES, 0, 1) // 绘制线段 // 最少需要两个点
gl.drawArrays(gl.TRANGLES, 0, 1) // 绘制三角形 // 最少需要三个点
同样，对于一些固定的流程，我们可以封装函数，这个对于封装，小遍这篇文章先将流程图列举出来，具体操作，将在以后的文章中展示。

用户评论
可能感兴趣的话题