WebGL实战从零开始手把手教你用GLSL写一个2D着色器附完整代码当我在2019年第一次尝试用WebGL绘制一个简单的彩色三角形时浏览器控制台连续报出17个错误——这让我意识到理解着色器编程需要完全不同的思维方式。与传统的JavaScript开发不同WebGL要求我们同时处理CPU逻辑和GPU渲染管线而GLSL着色器正是连接这两个世界的桥梁。本文将带你从空白HTML文件开始逐步构建一个完整的2D着色器程序。不同于抽象的理论讲解我们会聚焦于可立即运行的代码实践涵盖GLSL语法特性、数据绑定技巧和常见陷阱规避。即使你从未接触过图形编程跟随本文步骤也能在1小时内看到自己的第一个WebGL效果。1. 环境准备与基础架构在开始编写着色器之前我们需要搭建最基本的WebGL渲染环境。创建一个新的HTML文件加入以下骨架代码!DOCTYPE html html head titleWebGL 2D着色器入门/title style body { margin: 0; overflow: hidden; } canvas { display: block; width: 100vw; height: 100vh; } /style /head body canvas idglCanvas/canvas script // 后续JavaScript代码将在这里编写 /script /body /html关键初始化步骤分解获取WebGL上下文const canvas document.getElementById(glCanvas); const gl canvas.getContext(webgl); if (!gl) { alert(您的浏览器不支持WebGL); return; }设置视口尺寸function resizeCanvas() { canvas.width window.innerWidth; canvas.height window.innerHeight; gl.viewport(0, 0, canvas.width, canvas.height); } window.addEventListener(resize, resizeCanvas); resizeCanvas();提示现代浏览器通常默认启用WebGL2但为兼容性考虑我们使用基础的WebGL1上下文。两者在核心着色器语法上完全兼容。2. GLSL着色器基础语法GLSLOpenGL Shading Language是专为图形计算设计的类C语言。与JavaScript不同它原生支持向量和矩阵运算这正是GPU并行计算的优势所在。2.1 顶点着色器结构创建一个简单的顶点着色器将其作为JavaScript字符串存储// 顶点着色器代码 const vertexShaderSource attribute vec2 aPosition; void main() { gl_Position vec4(aPosition, 0.0, 1.0); } ;关键元素解析attribute声明从JavaScript传入的逐顶点数据vec2二维浮点向量类型等价于[x, y]gl_Position内置输出变量决定顶点最终位置2.2 片段着色器结构片段着色器决定每个像素的颜色// 片段着色器代码 const fragmentShaderSource precision mediump float; void main() { gl_FragColor vec4(1.0, 0.5, 0.2, 1.0); // 橙色 } ;注意要点precision必须声明浮点数精度lowp/mediump/highpgl_FragColor输出像素RGBA颜色值颜色分量范围是0.0到1.0而非HTML的0-2553. 着色器编译与链接有了GLSL代码字符串后需要经过编译链接才能使用function createShader(gl, type, source) { const shader gl.createShader(type); gl.shaderSource(shader, source); gl.compileShader(shader); if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) { console.error(着色器编译错误:, gl.getShaderInfoLog(shader)); gl.deleteShader(shader); return null; } return shader; } // 创建着色器程序 const vertexShader createShader(gl, gl.VERTEX_SHADER, vertexShaderSource); const fragmentShader createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource); function createProgram(gl, vertexShader, fragmentShader) { const program gl.createProgram(); gl.attachShader(program, vertexShader); gl.attachShader(program, fragmentShader); gl.linkProgram(program); if (!gl.getProgramParameter(program, gl.LINK_STATUS)) { console.error(程序链接错误:, gl.getProgramInfoLog(program)); return null; } return program; } const shaderProgram createProgram(gl, vertexShader, fragmentShader); gl.useProgram(shaderProgram);常见问题排查表错误类型可能原因解决方案COMPILE_STATUS为falseGLSL语法错误检查控制台输出的具体错误行LINK_STATUS为false着色器输入输出不匹配确认顶点和片段着色器间的varying变量一致运行时无显示未清除画布或未调用draw添加gl.clear()和gl.drawArrays()4. 数据传输与渲染4.1 顶点数据绑定定义三角形顶点坐标并上传到GPU// 定义三角形顶点裁剪空间坐标范围[-1,1] const positions [ 0.0, 0.5, // 顶点A -0.5, -0.5, // 顶点B 0.5, -0.5 // 顶点C ]; // 创建缓冲区 const positionBuffer gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW); // 关联着色器属性 const positionAttributeLocation gl.getAttribLocation(shaderProgram, aPosition); gl.enableVertexAttribArray(positionAttributeLocation); gl.vertexAttribPointer( positionAttributeLocation, 2, // 每顶点分量数 gl.FLOAT, // 数据类型 false, // 不归一化 0, // 步长 0 // 偏移量 );4.2 执行绘制完成所有设置后最终渲染只需两行代码gl.clearColor(0.0, 0.0, 0.0, 1.0); // 黑色背景 gl.clear(gl.COLOR_BUFFER_BIT); gl.drawArrays(gl.TRIANGLES, 0, 3); // 绘制3个顶点此时你应该能看到一个橙色三角形显示在黑色背景中央。如果遇到问题可以按以下步骤检查确认着色器编译没有报错检查gl.getAttribLocation()返回值不为-1验证缓冲区数据是否正确上传确保视口尺寸与canvas匹配5. 进阶技巧动态颜色与交互5.1 使用uniform变量修改片段着色器通过uniform接收动态颜色precision mediump float; uniform vec3 uColor; void main() { gl_FragColor vec4(uColor, 1.0); }JavaScript端设置颜色值const colorUniformLocation gl.getUniformLocation(shaderProgram, uColor); gl.uniform3f(colorUniformLocation, 0.2, 0.8, 0.4); // RGB颜色5.2 添加简单动画通过requestAnimationFrame实现颜色渐变let hue 0; function animate() { hue (hue 0.01) % 1.0; const rgb hslToRgb(hue, 1.0, 0.5); gl.uniform3f(colorUniformLocation, ...rgb); gl.drawArrays(gl.TRIANGLES, 0, 3); requestAnimationFrame(animate); } animate(); // HSL转RGB辅助函数 function hslToRgb(h, s, l) { // ...实现代码省略... }完整项目代码已托管在GitHub虚构链接包含以下增强功能纹理贴图实现多图形绘制鼠标交互处理性能优化建议在第一次成功渲染出三角形后我花了三天时间尝试让纹理正确显示——最终发现问题竟是图片跨域权限配置错误。这种低级错误在WebGL开发中非常典型建议始终在本地服务器环境测试如VS Code的Live Server插件而非直接打开HTML文件。
WebGL实战：从零开始手把手教你用GLSL写一个2D着色器（附完整代码）
WebGL实战从零开始手把手教你用GLSL写一个2D着色器附完整代码当我在2019年第一次尝试用WebGL绘制一个简单的彩色三角形时浏览器控制台连续报出17个错误——这让我意识到理解着色器编程需要完全不同的思维方式。与传统的JavaScript开发不同WebGL要求我们同时处理CPU逻辑和GPU渲染管线而GLSL着色器正是连接这两个世界的桥梁。本文将带你从空白HTML文件开始逐步构建一个完整的2D着色器程序。不同于抽象的理论讲解我们会聚焦于可立即运行的代码实践涵盖GLSL语法特性、数据绑定技巧和常见陷阱规避。即使你从未接触过图形编程跟随本文步骤也能在1小时内看到自己的第一个WebGL效果。1. 环境准备与基础架构在开始编写着色器之前我们需要搭建最基本的WebGL渲染环境。创建一个新的HTML文件加入以下骨架代码!DOCTYPE html html head titleWebGL 2D着色器入门/title style body { margin: 0; overflow: hidden; } canvas { display: block; width: 100vw; height: 100vh; } /style /head body canvas idglCanvas/canvas script // 后续JavaScript代码将在这里编写 /script /body /html关键初始化步骤分解获取WebGL上下文const canvas document.getElementById(glCanvas); const gl canvas.getContext(webgl); if (!gl) { alert(您的浏览器不支持WebGL); return; }设置视口尺寸function resizeCanvas() { canvas.width window.innerWidth; canvas.height window.innerHeight; gl.viewport(0, 0, canvas.width, canvas.height); } window.addEventListener(resize, resizeCanvas); resizeCanvas();提示现代浏览器通常默认启用WebGL2但为兼容性考虑我们使用基础的WebGL1上下文。两者在核心着色器语法上完全兼容。2. GLSL着色器基础语法GLSLOpenGL Shading Language是专为图形计算设计的类C语言。与JavaScript不同它原生支持向量和矩阵运算这正是GPU并行计算的优势所在。2.1 顶点着色器结构创建一个简单的顶点着色器将其作为JavaScript字符串存储// 顶点着色器代码 const vertexShaderSource attribute vec2 aPosition; void main() { gl_Position vec4(aPosition, 0.0, 1.0); } ;关键元素解析attribute声明从JavaScript传入的逐顶点数据vec2二维浮点向量类型等价于[x, y]gl_Position内置输出变量决定顶点最终位置2.2 片段着色器结构片段着色器决定每个像素的颜色// 片段着色器代码 const fragmentShaderSource precision mediump float; void main() { gl_FragColor vec4(1.0, 0.5, 0.2, 1.0); // 橙色 } ;注意要点precision必须声明浮点数精度lowp/mediump/highpgl_FragColor输出像素RGBA颜色值颜色分量范围是0.0到1.0而非HTML的0-2553. 着色器编译与链接有了GLSL代码字符串后需要经过编译链接才能使用function createShader(gl, type, source) { const shader gl.createShader(type); gl.shaderSource(shader, source); gl.compileShader(shader); if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) { console.error(着色器编译错误:, gl.getShaderInfoLog(shader)); gl.deleteShader(shader); return null; } return shader; } // 创建着色器程序 const vertexShader createShader(gl, gl.VERTEX_SHADER, vertexShaderSource); const fragmentShader createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource); function createProgram(gl, vertexShader, fragmentShader) { const program gl.createProgram(); gl.attachShader(program, vertexShader); gl.attachShader(program, fragmentShader); gl.linkProgram(program); if (!gl.getProgramParameter(program, gl.LINK_STATUS)) { console.error(程序链接错误:, gl.getProgramInfoLog(program)); return null; } return program; } const shaderProgram createProgram(gl, vertexShader, fragmentShader); gl.useProgram(shaderProgram);常见问题排查表错误类型可能原因解决方案COMPILE_STATUS为falseGLSL语法错误检查控制台输出的具体错误行LINK_STATUS为false着色器输入输出不匹配确认顶点和片段着色器间的varying变量一致运行时无显示未清除画布或未调用draw添加gl.clear()和gl.drawArrays()4. 数据传输与渲染4.1 顶点数据绑定定义三角形顶点坐标并上传到GPU// 定义三角形顶点裁剪空间坐标范围[-1,1] const positions [ 0.0, 0.5, // 顶点A -0.5, -0.5, // 顶点B 0.5, -0.5 // 顶点C ]; // 创建缓冲区 const positionBuffer gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW); // 关联着色器属性 const positionAttributeLocation gl.getAttribLocation(shaderProgram, aPosition); gl.enableVertexAttribArray(positionAttributeLocation); gl.vertexAttribPointer( positionAttributeLocation, 2, // 每顶点分量数 gl.FLOAT, // 数据类型 false, // 不归一化 0, // 步长 0 // 偏移量 );4.2 执行绘制完成所有设置后最终渲染只需两行代码gl.clearColor(0.0, 0.0, 0.0, 1.0); // 黑色背景 gl.clear(gl.COLOR_BUFFER_BIT); gl.drawArrays(gl.TRIANGLES, 0, 3); // 绘制3个顶点此时你应该能看到一个橙色三角形显示在黑色背景中央。如果遇到问题可以按以下步骤检查确认着色器编译没有报错检查gl.getAttribLocation()返回值不为-1验证缓冲区数据是否正确上传确保视口尺寸与canvas匹配5. 进阶技巧动态颜色与交互5.1 使用uniform变量修改片段着色器通过uniform接收动态颜色precision mediump float; uniform vec3 uColor; void main() { gl_FragColor vec4(uColor, 1.0); }JavaScript端设置颜色值const colorUniformLocation gl.getUniformLocation(shaderProgram, uColor); gl.uniform3f(colorUniformLocation, 0.2, 0.8, 0.4); // RGB颜色5.2 添加简单动画通过requestAnimationFrame实现颜色渐变let hue 0; function animate() { hue (hue 0.01) % 1.0; const rgb hslToRgb(hue, 1.0, 0.5); gl.uniform3f(colorUniformLocation, ...rgb); gl.drawArrays(gl.TRIANGLES, 0, 3); requestAnimationFrame(animate); } animate(); // HSL转RGB辅助函数 function hslToRgb(h, s, l) { // ...实现代码省略... }完整项目代码已托管在GitHub虚构链接包含以下增强功能纹理贴图实现多图形绘制鼠标交互处理性能优化建议在第一次成功渲染出三角形后我花了三天时间尝试让纹理正确显示——最终发现问题竟是图片跨域权限配置错误。这种低级错误在WebGL开发中非常典型建议始终在本地服务器环境测试如VS Code的Live Server插件而非直接打开HTML文件。
