WebGL基础开启Web图形编程之旅WebGL是一种强大的Web图形技术允许我们在浏览器中实现高性能的3D图形渲染。什么是WebGLWebGL是基于OpenGL ES的Web标准允许在HTML5 Canvas上进行硬件加速的3D图形渲染。核心概念1. Canvas元素HTML5 Canvas是WebGL的渲染目标。2. WebGL上下文通过Canvas获取WebGL渲染上下文。3. 着色器程序包括顶点着色器和片段着色器。WebGL工作流程基本步骤创建Canvas获取WebGL上下文编写着色器创建和绑定缓冲区绘制图形代码示例const canvas document.getElementById(glCanvas) const gl canvas.getContext(webgl) if (!gl) { console.error(WebGL not supported) } const vertexShaderSource attribute vec2 aPosition; void main() { gl_Position vec4(aPosition, 0.0, 1.0); } const fragmentShaderSource void main() { gl_FragColor vec4(1.0, 0.0, 0.0, 1.0); } 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 } 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 vertexShader createShader(gl, gl.VERTEX_SHADER, vertexShaderSource) const fragmentShader createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource) const program createProgram(gl, vertexShader, fragmentShader) const vertices new Float32Array([ -0.5, -0.5, 0.5, -0.5, 0.0, 0.5 ]) const buffer gl.createBuffer() gl.bindBuffer(gl.ARRAY_BUFFER, buffer) gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW) const positionLocation gl.getAttribLocation(program, aPosition) gl.enableVertexAttribArray(positionLocation) gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0) gl.clearColor(0.0, 0.0, 0.0, 1.0) gl.clear(gl.COLOR_BUFFER_BIT) gl.useProgram(program) gl.drawArrays(gl.TRIANGLES, 0, 3)着色器编程顶点着色器处理顶点位置和属性attribute vec3 aPosition; attribute vec3 aColor; varying vec3 vColor; uniform mat4 uModelViewMatrix; uniform mat4 uProjectionMatrix; void main() { gl_Position uProjectionMatrix * uModelViewMatrix * vec4(aPosition, 1.0); vColor aColor; }片段着色器处理像素颜色varying vec3 vColor; void main() { gl_FragColor vec4(vColor, 1.0); }3D变换模型矩阵function createModelMatrix(translation, rotation, scale) { // 实现模型变换矩阵 }视图矩阵function createViewMatrix(cameraPosition, target, up) { // 实现视图变换矩阵 }投影矩阵function createPerspectiveMatrix(fov, aspect, near, far) { // 实现透视投影矩阵 }纹理映射加载纹理function loadTexture(gl, url) { const texture gl.createTexture() gl.bindTexture(gl.TEXTURE_2D, texture) const image new Image() image.onload () { gl.bindTexture(gl.TEXTURE_2D, texture) gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image) gl.generateMipmap(gl.TEXTURE_2D) } image.src url return texture }光照效果基本光照模型struct Light { vec3 position; vec3 color; float intensity; }; uniform Light uLight; uniform vec3 uCameraPosition; void main() { vec3 normal normalize(vNormal); vec3 lightDir normalize(uLight.position - vPosition); float diff max(dot(normal, lightDir), 0.0); vec3 diffuse diff * uLight.color * uLight.intensity; gl_FragColor vec4(diffuse, 1.0); }性能优化批处理渲染合并相似的几何体使用顶点数组对象纹理压缩使用压缩纹理格式合理设置纹理大小剔除和遮挡启用背面剔除使用遮挡查询总结WebGL是Web图形编程的强大工具掌握它可以实现令人惊叹的视觉效果。技术有温度WebGL让Web应用更加生动有趣。
WebGL基础：开启Web图形编程之旅
WebGL基础开启Web图形编程之旅WebGL是一种强大的Web图形技术允许我们在浏览器中实现高性能的3D图形渲染。什么是WebGLWebGL是基于OpenGL ES的Web标准允许在HTML5 Canvas上进行硬件加速的3D图形渲染。核心概念1. Canvas元素HTML5 Canvas是WebGL的渲染目标。2. WebGL上下文通过Canvas获取WebGL渲染上下文。3. 着色器程序包括顶点着色器和片段着色器。WebGL工作流程基本步骤创建Canvas获取WebGL上下文编写着色器创建和绑定缓冲区绘制图形代码示例const canvas document.getElementById(glCanvas) const gl canvas.getContext(webgl) if (!gl) { console.error(WebGL not supported) } const vertexShaderSource attribute vec2 aPosition; void main() { gl_Position vec4(aPosition, 0.0, 1.0); } const fragmentShaderSource void main() { gl_FragColor vec4(1.0, 0.0, 0.0, 1.0); } 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 } 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 vertexShader createShader(gl, gl.VERTEX_SHADER, vertexShaderSource) const fragmentShader createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource) const program createProgram(gl, vertexShader, fragmentShader) const vertices new Float32Array([ -0.5, -0.5, 0.5, -0.5, 0.0, 0.5 ]) const buffer gl.createBuffer() gl.bindBuffer(gl.ARRAY_BUFFER, buffer) gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW) const positionLocation gl.getAttribLocation(program, aPosition) gl.enableVertexAttribArray(positionLocation) gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0) gl.clearColor(0.0, 0.0, 0.0, 1.0) gl.clear(gl.COLOR_BUFFER_BIT) gl.useProgram(program) gl.drawArrays(gl.TRIANGLES, 0, 3)着色器编程顶点着色器处理顶点位置和属性attribute vec3 aPosition; attribute vec3 aColor; varying vec3 vColor; uniform mat4 uModelViewMatrix; uniform mat4 uProjectionMatrix; void main() { gl_Position uProjectionMatrix * uModelViewMatrix * vec4(aPosition, 1.0); vColor aColor; }片段着色器处理像素颜色varying vec3 vColor; void main() { gl_FragColor vec4(vColor, 1.0); }3D变换模型矩阵function createModelMatrix(translation, rotation, scale) { // 实现模型变换矩阵 }视图矩阵function createViewMatrix(cameraPosition, target, up) { // 实现视图变换矩阵 }投影矩阵function createPerspectiveMatrix(fov, aspect, near, far) { // 实现透视投影矩阵 }纹理映射加载纹理function loadTexture(gl, url) { const texture gl.createTexture() gl.bindTexture(gl.TEXTURE_2D, texture) const image new Image() image.onload () { gl.bindTexture(gl.TEXTURE_2D, texture) gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image) gl.generateMipmap(gl.TEXTURE_2D) } image.src url return texture }光照效果基本光照模型struct Light { vec3 position; vec3 color; float intensity; }; uniform Light uLight; uniform vec3 uCameraPosition; void main() { vec3 normal normalize(vNormal); vec3 lightDir normalize(uLight.position - vPosition); float diff max(dot(normal, lightDir), 0.0); vec3 diffuse diff * uLight.color * uLight.intensity; gl_FragColor vec4(diffuse, 1.0); }性能优化批处理渲染合并相似的几何体使用顶点数组对象纹理压缩使用压缩纹理格式合理设置纹理大小剔除和遮挡启用背面剔除使用遮挡查询总结WebGL是Web图形编程的强大工具掌握它可以实现令人惊叹的视觉效果。技术有温度WebGL让Web应用更加生动有趣。
