掌握webgl渲染需理解五个核心概念：1.webgl上下文是js与显卡通信的桥梁，通过canvas元素获取；2.着色器用glsl编写，包括顶点着色器处理位置和片元着色器处理颜色；3.缓冲区存储顶点、颜色等数据，需上传至显卡内存；4.顶点属性是着色器输入变量，需配置读取方式；5.绘制调用指令启动渲染过程，指定图元类型及顶点数量。
掌握这五个核心概念，你就能用JS玩转WebGL渲染啦！别怕，上手其实没那么难。
渲染，本质上就是用JS告诉显卡，你想画什么，怎么画。
解决方案
-
WebGL上下文 (WebGL Context):
- 想象一下，WebGL上下文就像一个画布，但这个画布是显卡上的。JS通过这个上下文，才能和显卡“对话”。
- 获取WebGL上下文的代码很简单：
const canvas = document.getElementById('myCanvas'); // 获取canvas元素 const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl'); // 尝试获取WebGL上下文 if (!gl) { alert('你的浏览器不支持WebGL！'); }-
canvas.getContext('webgl')是标准的获取方式，canvas.getContext('experimental-webgl')是为了兼容一些老旧浏览器。 - 如果获取失败，说明浏览器不支持WebGL，那就没法玩了。
-
着色器 (Shaders):
- 着色器是运行在显卡上的小程序，用GLSL (OpenGL Shading Language) 编写。它们负责处理顶点和像素，决定最终在屏幕上显示什么颜色。
- 有两种主要类型的着色器：
- 顶点着色器 (Vertex Shader): 负责处理顶点的位置，比如把3D坐标转换成屏幕坐标。
- 片元着色器 (Fragment Shader): 负责处理像素的颜色，比如根据光照计算像素的颜色。
- 一个简单的顶点着色器：
attribute vec4 a_position; // 顶点位置 void main() { gl_Position = a_position; // 将顶点位置赋值给gl_Position，这是WebGL的内置变量，表示顶点在屏幕上的位置 }- 一个简单的片元着色器：
void main() { gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // 将像素颜色设置为红色 (RGBA: 1.0, 0.0, 0.0, 1.0) }- 你需要把这些着色器代码编译并链接成一个着色器程序 (Shader Program)，才能在WebGL中使用。
-
缓冲区 (Buffers):
- 缓冲区是显卡上的内存区域，用于存储顶点数据、颜色数据、纹理坐标等。
- 你需要把数据上传到缓冲区，然后告诉WebGL如何读取这些数据。
- 创建缓冲区的代码：
const positionBuffer = gl.createBuffer(); // 创建缓冲区 gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer); // 绑定缓冲区到gl.ARRAY_BUFFER，表示这是一个顶点缓冲区 const positions = [ 0, 0, 0, 0.5, 0.7, 0, ]; // 顶点坐标 gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW); // 将顶点数据上传到缓冲区
-
gl.STATIC_DRAW表示数据不会经常改变，WebGL会做一些优化。
-
顶点属性 (Vertex Attributes):
- 顶点属性是顶点着色器的输入变量，比如顶点位置、颜色、法线等。
- 你需要告诉WebGL如何从缓冲区中读取顶点属性的数据。
- 设置顶点属性的代码：
const positionAttributeLocation = gl.getAttribLocation(program, 'a_position'); // 获取顶点着色器中a_position变量的位置 gl.enableVertexAttribArray(positionAttributeLocation); // 启用顶点属性 gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer); // 绑定缓冲区 gl.vertexAttribPointer( positionAttributeLocation, // 属性位置 2, // 每次读取2个值 (x, y) gl.FLOAT, // 数据类型是浮点数 false, // 是否需要归一化 0, // 步长，0表示紧密排列 0 // 偏移量 );-
gl.vertexAttribPointer告诉WebGL如何从缓冲区中读取数据，包括每次读取多少个值、数据类型、步长和偏移量。
-
绘制调用 (Draw Call):
- 绘制调用是告诉WebGL开始渲染的指令。
- 你需要指定要绘制的图元类型 (比如三角形、线段、点) 和顶点数量。
- 绘制三角形的代码：
gl.drawArrays(gl.TRIANGLES, 0, 3); // 绘制三角形，从第0个顶点开始，绘制3个顶点
-
gl.TRIANGLES表示绘制三角形，gl.POINTS表示绘制点，gl.LINES表示绘制线段。
WebGL性能优化有哪些技巧？
- 减少Draw Call: 每次Draw Call都会有CPU和GPU之间的切换开销，尽量把多个物体合并成一个Draw Call。可以使用Instancing技术，或者把多个物体的顶点数据合并到一个缓冲区中。
- 使用纹理图集 (Texture Atlas): 把多个小纹理合并成一个大纹理，可以减少纹理切换的开销。
- LOD (Level of Detail): 根据物体距离相机的远近，使用不同精度的模型。距离远的物体可以使用低精度的模型，减少顶点数量。
- 剔除 (Culling): 只渲染相机能看到的物体，把相机看不到的物体剔除掉。可以使用视锥剔除 (Frustum Culling) 和背面剔除 (Backface Culling)。
- 优化着色器代码: 避免在着色器中使用复杂的计算，尽量把计算放到CPU上。可以使用低精度的浮点数 (mediump, lowp) 来提高性能。
如何调试WebGL程序？
- 使用WebGL Inspector: WebGL Inspector是一个浏览器插件，可以让你查看WebGL的状态，包括缓冲区、纹理、着色器等。你可以用它来调试渲染错误，比如顶点数据错误、纹理错误、着色器错误等。
-
使用console.log: 在着色器中使用
console.log可以输出变量的值，方便你调试着色器代码。但是要注意，console.log会影响性能，所以只在调试的时候使用。 - 使用断点调试: 可以在JS代码中使用断点调试，查看变量的值，跟踪代码的执行流程。
- 逐步渲染: 可以把渲染过程分解成多个步骤，逐步渲染，方便你找到错误所在。
WebGL和Three.js有什么区别？
- WebGL是一个底层的图形API，你需要自己编写着色器代码，管理缓冲区，处理顶点属性等。
- Three.js是一个基于WebGL的3D库，它封装了很多常用的3D功能，比如模型加载、材质、光照、阴影等。使用Three.js可以让你更方便地创建3D场景，而不需要关心底层的WebGL细节。
- 如果你想深入了解3D图形学，建议学习WebGL。如果你只是想快速创建3D场景，可以使用Three.js。
