WebGL编程指南--入门

最新推荐文章于 2026-05-16 16:51:25 发布

原创最新推荐文章于 2026-05-16 16:51:25 发布 · 1.6k 阅读

24 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

收录于

WebGL

一、前言

自从入坑了CesiumJS，一直对一些特效感兴趣。奈何三维方面基础太薄弱，每次看别人写的glsl特效都有点力不从心。更不要说实现自己想要的特效。终于最近抽空入手了一本《WebGL编程指南》，强烈推荐像我一样的小白去看。这本书的原版是日文，后来被翻译为中文和英文。非常感谢本书的翻译者，用平实的语言让我读懂了WebGL的特性，并让我非常自然的接受了后面比较难以理解的矩阵变换。

我写WebGL编程指南系列，也是跟着这本书的脉络，整理一下我的学习心得，并分享出来。

二、WebGL概述

WebGL是一项用来在网页上绘制和渲染复杂三维图形，并允许用户与之进行交互的技术。传统的三维渲染，需要C或C++语言开发，并利用OpenGL(开源)或Direct3D(微软提供)这些三维图形库开开发独立应用程序。WebGL的出现，改变了桌面端应用程序垄断三维技术的情况。WebGL内嵌在浏览器中，不需要安装软件和3D环境，直接打开网页即可浏览。

WebGL技术规范继承自免费和开源的OpenGL标准，因此WebGL就是Web版的OpenGL(实际上，WebGL继承自OpenGL的一个特殊版本---OpenGL ES 2.0)。OpenGL 2.0版本开始，支持了可编程着色器方法（programmable shader functions）,这个特性被OpenGL ES 2.0继承，并成为了WebGL 1.0标准的核心部分。

因此也可以说，OpenGL ES 着色器语言（GLSL ES），是WebGL的核心。WebGL需要两种着色器：

顶点着色器（Vertex shader）:顶点着色器用来描述顶点特性(位置、大小、颜色等)。顶点是指二维或三维空间中的一个点，比如二维或三维图形的端点或交点。

片源着色器（Fragment shader）：进行逐片源处理过程，如颜色、光照、阴影。片源也可以理解为像素。

这两个概念第一次结束会比较抽象，这里先有一个印象即可。后面随着案例的深入，会慢慢变得很形象。

三、WebGL入门

1、绘制一个点

熟悉web编程的朋友们应该都知道，在html中绘制二维元素，需要在<canvas>元素中实现。同理，利用WebGL绘制三维元素，也需要在<canvas>中绘制。

我写案例使用的是Vue3+typeScript。

<template>
  <canvas id='webgl' width='400' height='400'></canvas>
</template>

<script lang='ts'>
import { defineComponent, onMounted } from 'vue'

export default defineComponent({
  name: 'webgl1',
  setup() {
    // 着色器程序是以字符串形式嵌入进js代码中的
    // WebGL因为继承自OpenGL，而OpenGL支持C、C++语言
    // 所以着色器程序的编程风格与C相同，是强类型编程语言
    // 关于C、C++的编程规范，这里不展开说，需自行了解。
    // 顶点着色器程序
    const v_shader_source = `
       void main()
       {
          // 顶点着色器的内置变量
          // gl_Position 表示顶点位置
          // gl_pointSize 表示点的尺寸
          gl_Position = vec4(0.0,0.0,0.0,1.0);
          // gl_PointSize若不赋值，默认为1.0
          gl_PointSize = 10.0;
       }
    `;
    // 片元着色器程序
    const f_shader_source = `
       void main()
       {
          // gl_FragColor是片元着色器的唯一内置变量，
          // 这里用来为这个点赋值颜色
          // vec4()是一个四维向量，在颜色方面，分别代表 r g b a
          gl_FragColor = vec4(1.0,0.0,0.0,1.0);
       }
    `;

    /**
     * 初始化着色器，将提前写好的glsl代码赋值给着色器
     * */
    const initShaders=(gl:WebGLRenderingContext,v_shader_source:string,f_shader_source:string)=>{
      const vertexShader = gl.createShader(gl.VERTEX_SHADER)
      gl.shaderSource(vertexShader!, v_shader_source)
      gl.compileShader(vertexShader!)

      const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER)
      gl.shaderSource(fragmentShader!, f_shader_source)
      gl.compileShader(fragmentShader!)

      const shaderProgram = gl.createProgram()
      gl.attachShader(shaderProgram!, vertexShader!)
      gl.attachShader(shaderProgram!, fragmentShader!)
      gl.linkProgram(shaderProgram!)
      gl.useProgram(shaderProgram!)
    }

    onMounted(()=>{
      // 从<canvas>标签中获取webgl绘图上下文
      const canvas = document.getElementById('webgl') as HTMLCanvasElement;
      const gl = canvas.getContext('webgl') as WebGLRenderingContext;

      //初始化着色器
      initShaders(gl, v_shader_source, f_shader_source)

      gl.clearColor(1.0, 1.0, 0.0, 1.0)
      gl.clear(gl.COLOR_BUFFER_BIT)

      gl.drawArrays(gl.POINTS, 0, 1)
    })
  }
})
</script>

<style scoped>

</style>

程序执行后的效果：