GLSL(OpenGL Shading Language)是用于编写着色器的语言
着色器类型
- 顶点着色器:负责处理每个顶点的属性,如位置、颜色等。
- 片段着色器(或像素着色器):负责计算最终像素的颜色。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>测试</title> <script src="./lib/webgl-utils.js"></script> <script src="./lib/webgl-debug.js"></script> <script src="./lib/cuon-utils.js"></script> </head> <body onload="main()"> <canvas id="canvas" width="400" height="400"></canvas> </body> </html> <!--脚本--> <script> function main () { const canvas = document.getElementById('canvas'); const gl = getWebGLContext(canvas); if (!gl) { console.log('WebGL初始化失败'); return; } //WebGL程序包括运行在浏览器中的JavaScript和 运行在WebGL系统的着色器程序这两个部分。 // 着色器程序是用GLSL(OpenGL Shading Language)编写的程序,运行在WebGL系统上,负责渲染图形。着色器程序包括顶点着色器和片元着色器两个部分。 // 顶点着色器 // gl_Position = vec4():表示顶点位置,必需要赋值,否则无法渲染 vec4类型 // gl_PointSize = 10.0:表示点的尺寸(像素数) float类型 /* float 类型表示单精度浮点数 vec4 类型表示四维向量,即有四个浮点数组成的矢量,又称齐次坐标 vec4(v0,v1,v2,v3)表示四维向量,v0,v1,v2,v3分别表示该向量的四个分量 */ const vertexShaderSource = ` void main() { gl_Position = vec4(0.0, 0.0, 0.0, 1.0); gl_PointSize = 10.0; }`; // 片元着色器:主要是处理片元,让其显示在屏幕上,从main函数开始执行 /** * gl.drawArrays()函数:绘制图形,参数1:绘制方式,参数2:从哪个点开始,参数3:绘制多少个点 * **/ const fragmentShaderSource = ` void main() { gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); } ` // initShaders函数:将字符串形式的着色器代码从JavaScript传给WebGL系统,并建立着色器 if (!initShaders(gl, vertexShaderSource, fragmentShaderSource)) { console.log('着色器初始化失败'); return; } // 设置背景颜色 gl.clearColor(0.0, 0.0, 0.0, 1.0); // 清空canvas gl.clear(gl.COLOR_BUFFER_BIT); // 绘制点 gl.drawArrays(gl.POINTS, 0, 1); } </script>
webGl坐标系
三维坐标系(笛卡尔坐标系)右手坐标系
- X 轴:水平,从左向右延伸(正方向)。
- Y 轴:垂直,从下向上延伸(正方向)。
- Z 轴:从屏幕外向屏幕内(观察者的方向),即从你眼睛到屏幕的方向是 Z 轴的正方向。
Cesium中的着色器:
PostProcessStage:
Cesium使用这一类来应用后处理效果,例如模糊、颜色调整等。你可以编写自定义的片段着色器,展示雨天、雪花、雾等效果。
Uniforms和Varyings:
- Uniforms:全局变量,所有片段共享,通常用于传递常量数据。
- Varyings:从顶点着色器传递到片段着色器的变量,每个片段的值可以不同。