如何用WebGL实现GPU粒子系统？

Number of views 42
webgl webfrontend

想在浏览器利用WebGL中高效渲染大规模的粒子系统如何做，最好给出具体代码跟步骤

HuWei5
1 Answers

要使用WebGL实现一个高效的GPU粒子系统，你需要了解一些基本概念，例如着色器、缓冲区对象、纹理和帧缓冲对象。以下是一个简化的示例，说明如何实现一个简单的GPU粒子系统。

  1. 准备环境

首先，创建一个HTML文件，并引入WebGL库：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GPU Particle System</title>
</head>
<body>
    <canvas id="glCanvas"></canvas>
    <script src="particles.js"></script>
</body>
</html>
  1. 初始化WebGL

接下来，在 particles.js文件中初始化WebGL上下文，并设置必要的参数：

const canvas = document.getElementById('glCanvas');
const gl = canvas.getContext('webgl');

if (!gl) {
    console.error('无法获取WebGL上下文');
}

// 设置视口大小
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// 创建顶点着色器和片段着色器
const vertexShaderSource = `...`;
const fragmentShaderSource = `...`;

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);

// 创建程序
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)}`);
}

gl.useProgram(program);
  1. 准备数据

创建粒子的位置、速度、颜色等属性的数据，并将其存储在缓冲区对象中：

const particleCount = 10000;
const positions = new Float32Array(particleCount * 3);
const velocities = new Float32Array(particleCount * 3);
const colors = new Float32Array(particleCount * 4);

// 初始化位置、速度和颜色数据
for (let i = 0; i < particleCount; i++) {
    // 随机生成位置、速度和颜色数据
}

const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW);

const velocityBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, velocityBuffer);
gl.bufferData(gl.ARRAY_BUFFER, velocities, gl.STATIC_DRAW);

const colorBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
gl.bufferData(gl.ARRAY_BUFFER, colors, gl.STATIC_DRAW);
  1. 编写着色器

编写顶点着色器和片段着色器，分别处理顶点的位置、速度和颜色信息：

// vertex shader
attribute vec3 position;
attribute vec3 velocity;
attribute vec4 color;

uniform float time;
uniform mat4 projectionMatrix;

varying vec4 vColor;

void main() {
    vColor = color;
    gl_Position = projectionMatrix * vec4(position + velocity * time, 1.0);
}

// fragment shader
precision mediump float;

varying vec4 vColor;

void main() {
    gl_FragColor = vColor;
}
  1. 更新粒子位置

在每一帧中更新粒子的位置，并将新的位置数据上传到缓冲区对象中：

function updateParticles() {
    for (let i = 0; i < particleCount; i++) {
        // 根据速度更新粒子位置
    }

    gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
    gl.bufferSubData(gl.ARRAY_BUFFER, 0, positions);
}
  1. 渲染粒子系统

最后，在每一帧中调用 updateParticles()函数并渲染粒子系统：

function render() {
    updateParticles();

    gl.clearColor(0.0, 0.0, 0.0, 1.0);
    gl.clear(gl.COLOR_BUFFER_BIT);

    gl.useProgram(program);

    const timeUniformLocation = gl.getUniformLocation(program, 'time');
    gl.uniform1f(timeUniformLocation, performance.now() / 1000);

    const projectionMatrixUniformLocation = gl.getUniformLocation(program, 'projectionMatrix');
    gl.uniformMatrix4fv(projectionMatrixUniformLocation, false, projectionMatrix);

    const positionAttributeLocation = gl.getAttribLocation(program, 'position');
    gl.enableVertexAttribArray(positionAttributeLocation);
    gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
    gl.vertexAttribPointer(positionAttributeLocation, 3, gl.FLOAT, false, 0, 0);

    const velocityAttributeLocation = gl.getAttribLocation(program, 'velocity');
    gl.enableVertexAttribArray(velocityAttributeLocation);
    gl.bindBuffer(gl.ARRAY_BUFFER, velocityBuffer);
    gl.vertexAttribPointer(velocityAttributeLocation, 3, gl.FLOAT, false, 0, 0);

    const colorAttributeLocation = gl.getAttribLocation(program, 'color');
    gl.enableVertexAttribArray(colorAttributeLocation);
    gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
    gl.vertexAttribPointer(colorAttributeLocation, 4, gl.FLOAT, false, 0, 0);

    gl.drawArrays(gl.POINTS, 0, particleCount);

    requestAnimationFrame(render);
}

render();

这个示例演示了一个非常简单的GPU粒子系统。你可以根据需要修改粒子的数量、位置、速度和颜色，以及着色器中的计算逻辑。

HuWei5