当前位置：首页 > news >正文

Cesium着色器

news 2024/10/28 23:56:20

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);// 清空canvasgl.clear(gl.COLOR_BUFFER_BIT);// 绘制点gl.drawArrays(gl.POINTS, 0, 1);}
</script>