【WebGL初学系列之二】WebGL第一个程序，三角形

最新推荐文章于 2025-05-28 13:05:31 发布

原创

最新推荐文章于 2025-05-28 13:05:31 发布 · 2.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#图形 #javascript #webgl #js #canvas

本文是WebGL初学系列的第二篇，主要介绍如何创建WebGL上下文并绘制一个三角形。首先通过HTML5 Canvas元素获取WebGL渲染环境，接着编写顶点着色器，并使用WebGL API进行绘制工作。示例代码中展示了获取上下文环境和绘制三角形的基本步骤。

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

开始WebGL程序之前，还是得进行一些理论上的知识，不然会让自己的代码写得不明不白。上一篇文章就是写得关于WebGL的一些基础知识http://nbcoders.com/detail/156

第一：首先获取WebGL上下文。

第二：编写顶点着色器

第三：开始一些自己的绘制工作（调用WebGL API）

这里我们就以画一个三角形为例子，开始我们的WegGL程序吧。

首先获取WebGL的上下文环境，也就是渲染环境，我们要利用HTML5的canvas元素。所以我们这里要新建一个Canvas元素，这里canvas可以对应一个WebGL的渲染环境，也可以对应一个canvas-2d的渲染环境。编写如下代码：

    <html>    
        <body>
            <canvas id="webglCanvas" style="border:1px solid blue;" width='600px' height='600px'></canvas>
        </body>
    </html>

可以简单运行试试效果，有个蓝色的细框。接下来我们要获取WebGL的渲染区域，然后操作WebGL渲染区域。这里通过canvas的getContext方法获取WebGL的上下文环境。

var webglContext = document.getElementById().getContex("experimental-webgl");

这里完整代码如下：

 function initCanvas(canvasId) {
            var canvas = document.getElementById(canvasId);
            var context = null;
            try{
                 context = canvas.getContext("experimental-webgl");
            }catch(ex)
            {
                 alert(ex.toString());