原生webgl学习（二）用WebGL绘制一个三角形

最新推荐文章于 2024-07-11 15:31:14 发布

原创

最新推荐文章于 2024-07-11 15:31:14 发布 · 3.6k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#gl.getAttribLocation #gl.createBuffer # gl.enableVertexAttribArray #gl.vertexAttribPointer #gl.bufferData

这篇博客介绍了如何使用WebGL从头开始绘制一个带有颜色的三角形。文章首先强调了了解着色器的重要性，然后通过创建HTML文档、设置canvas、引入相关脚本以及编写着色器代码来逐步展示绘制过程。主要步骤包括获取canvas元素，检查WebGL支持，编译和链接着色器，定位attribute变量，创建缓冲区并绑定数据，最后调用gl.drawArrays进行绘制。示例代码可在作者的gitee码云上找到，后续章节将深入探讨矩阵运算。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

所有示例代码均可在我的gitee码云上，读者可自行下载：https://gitee.com/babyogl/learnWebGL,本文示例代码在chapter-01里面,引用文件都在libs文件夹下；为了让读者不至于枯燥乏味，这一篇文章我们不讲计算和理论，相关的矩阵运算和理论留在后面，现在只是单纯的介绍WebGL一些接口和用法，从一个简单的示例开始：绘制一个带颜色的三角形。

在开始之前，需要知道着色器的相关知识，可以参考：webgl介绍里面的着色器介绍，本文的demo 用到的着色器为：

    <script id="vertex-shader" type="x-shader/x-vertex">
        attribute vec4 a_position;
        void main() {
            gl_Position = a_position;
        }
    </script>

    <script id="fragment-shader" type="x-shader/x-fragment">
        precision mediump float;//将精度设置为中等精度
        void main() {
            gl_FragColor = vec4(1, 0, 0.5, 1);
        }
    </script>

其中的attribute定义了一个vec4四维变量，用于表示每个顶点的位置信息，gl_Position代表顶点的位置， a_position是着色器用于接收来自JavaScript代码的顶点位置信息的入口。gl_FragColor代表每个片元的颜色，通俗的理解是用于设置顶点