WebGL基础：开启Web图形编程之旅

WebGL基础：开启Web图形编程之旅

WebGL是一种强大的Web图形技术，允许我们在浏览器中实现高性能的3D图形渲染。

什么是WebGL

WebGL是基于OpenGL ES的Web标准，允许在HTML5 Canvas上进行硬件加速的3D图形渲染。

核心概念

1. Canvas元素

HTML5 Canvas是WebGL的渲染目标。

2. WebGL上下文

通过Canvas获取WebGL渲染上下文。

3. 着色器程序

包括顶点着色器和片段着色器。

WebGL工作流程

基本步骤

1. 创建Canvas
2. 获取WebGL上下文
3. 编写着色器
4. 创建和绑定缓冲区
5. 绘制图形

代码示例

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应用更加生动有趣。

转载自 CSDN-专业IT技术社区

原文链接：https://blog.csdn.net/weixin_49475940/article/details/161512409