Advanced WebGL Physics Simulation JavaScript, WebGL, GLSL
👤 Sharing: AI
```javascript
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>WebGL Physics Simulation</title>
<style>
body { margin: 0; overflow: hidden; }
canvas { width: 100%; height: 100%; }
</style>
</head>
<body>
<canvas id="glcanvas"></canvas>
<script>
// --- WebGL Setup ---
const canvas = document.getElementById('glcanvas');
const gl = canvas.getContext('webgl'); // or 'webgl2' if available
if (!gl) {
alert('WebGL not supported on your browser!');
}
// Shader Sources
const vertexShaderSource = `#version 300 es
in vec4 a_position;
in vec4 a_color; // Color per particle
uniform mat4 u_projectionMatrix;
uniform mat4 u_modelViewMatrix;
uniform float u_pointSize;
out vec4 v_color; // Pass color to fragment shader
void main() {
gl_Position = u_projectionMatrix * u_modelViewMatrix * a_position;
gl_PointSize = u_pointSize;
v_color = a_color;
}
`;
const fragmentShaderSource = `#version 300 es
precision highp float;
in vec4 v_color;
out vec4 fragColor;
void main() {
fragColor = v_color;
}
`;
// Helper function to create and compile a shader
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('Shader compilation error:', gl.getShaderInfoLog(shader));
gl.deleteShader(shader);
return null;
}
return shader;
}
// Helper function to create a program
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('Program linking error:', gl.getProgramInfoLog(program));
gl.deleteProgram(program);
return null;
}
return program;
}
// Create and compile shaders
const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);
// Create and link the program
const program = createProgram(gl, vertexShader, fragmentShader);
// Get attribute and uniform locations
const positionAttributeLocation = gl.getAttribLocation(program, 'a_position');
const colorAttributeLocation = gl.getAttribLocation(program, 'a_color');
const projectionMatrixUniformLocation = gl.getUniformLocation(program, 'u_projectionMatrix');
const modelViewMatrixUniformLocation = gl.getUniformLocation(program, 'u_modelViewMatrix');
const pointSizeUniformLocation = gl.getUniformLocation(program, 'u_pointSize');
// --- Physics Simulation ---
const numParticles = 1000;
const particles = [];
// Particle Class
class Particle {
constructor(x, y, z, color) {
this.position = [x, y, z];
this.velocity = [(Math.random() - 0.5) * 0.1, (Math.random() - 0.5) * 0.1, (Math.random() - 0.5) * 0.1];
this.acceleration = [0, -0.001, 0]; // Gravity
this.color = color; //RGBA array
}
update() {
// Update velocity
this.velocity[0] += this.acceleration[0];
this.velocity[1] += this.acceleration[1];
this.velocity[2] += this.acceleration[2];
// Update position
this.position[0] += this.velocity[0];
this.position[1] += this.velocity[1];
this.position[2] += this.velocity[2];
// Simple Collision (floor)
if (this.position[1] < -1) {
this.position[1] = -1;
this.velocity[1] *= -0.8; // Bounce with energy loss
}
// Boundary collisions (cube -2 to 2 in each axis)
const boundary = 2;
for (let i = 0; i < 3; ++i) {
if (this.position[i] > boundary) {
this.position[i] = boundary;
this.velocity[i] *= -0.8;
} else if (this.position[i] < -boundary) {
this.position[i] = -boundary;
this.velocity[i] *= -0.8;
}
}
}
}
// Initialize Particles
for (let i = 0; i < numParticles; i++) {
const x = (Math.random() - 0.5) * 2; // Range -1 to 1
const y = Math.random() * 2; // Range 0 to 2
const z = (Math.random() - 0.5) * 2; // Range -1 to 1
// Random bright color for each particle
const r = Math.random();
const g = Math.random();
const b = Math.random();
const a = 1.0; //Opaque
particles.push(new Particle(x, y, z, [r, g, b, a]));
}
// --- Buffers ---
// Position Buffer
const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(numParticles * 3), gl.DYNAMIC_DRAW); // Allocate space, data will be filled in the render loop
// Color Buffer
const colorBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(numParticles * 4), gl.DYNAMIC_DRAW); // Allocate space, data will be filled in the render loop
// --- Matrices ---
let projectionMatrix = mat4.create(); // using gl-matrix library
let modelViewMatrix = mat4.create();
// --- Render Loop ---
function render() {
// Resize the canvas
resizeCanvasToDisplaySize(gl.canvas);
gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
// Clear the canvas
gl.clearColor(0.0, 0.0, 0.0, 1.0); // Black background
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
// Update Physics
for (const particle of particles) {
particle.update();
}
// Prepare Data for Buffers (flattened arrays)
const positions = [];
const colors = [];
for (const particle of particles) {
positions.push(...particle.position);
colors.push(...particle.color);
}
// Update Position Buffer
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.DYNAMIC_DRAW); // Update the data
// Update Color Buffer
gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.DYNAMIC_DRAW); // Update the data
// Tell WebGL to use our program
gl.useProgram(program);
// Bind the position buffer
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.vertexAttribPointer(positionAttributeLocation, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(positionAttributeLocation);
// Bind the color buffer
gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
gl.vertexAttribPointer(colorAttributeLocation, 4, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(colorAttributeLocation);
// Projection Matrix
const aspect = gl.canvas.clientWidth / gl.canvas.clientHeight;
mat4.perspective(projectionMatrix, Math.PI / 4, aspect, 0.1, 100); // FOV, Aspect, Near, Far
// ModelView Matrix (Camera setup)
mat4.identity(modelViewMatrix);
mat4.translate(modelViewMatrix, modelViewMatrix, [0, 0, -5]); // Move camera back 5 units
mat4.rotateX(modelViewMatrix, modelViewMatrix, 0.2); // Rotate the view slightly
mat4.rotateY(modelViewMatrix, modelViewMatrix, 0.1); // Rotate the view slightly
gl.uniformMatrix4fv(projectionMatrixUniformLocation, false, projectionMatrix);
gl.uniformMatrix4fv(modelViewMatrixUniformLocation, false, modelViewMatrix);
gl.uniform1f(pointSizeUniformLocation, 5); // Adjust the point size as needed
// Draw the particles as points
gl.drawArrays(gl.POINTS, 0, numParticles);
requestAnimationFrame(render);
}
// --- Utilities ---
function resizeCanvasToDisplaySize(canvas) {
const displayWidth = canvas.clientWidth;
const displayHeight = canvas.clientHeight;
if (canvas.width !== displayWidth || canvas.height !== displayHeight) {
canvas.width = displayWidth;
canvas.height = displayHeight;
}
}
// --- Start the Simulation ---
//Enable depth testing (to handle occlusion properly)
gl.enable(gl.DEPTH_TEST);
gl.depthFunc(gl.LEQUAL); //Near things obscure far things
// Ensure gl-matrix is loaded before starting the render loop
if (typeof mat4 !== 'undefined') {
render(); // Start the render loop
} else {
console.error("gl-matrix library not loaded! Please include it in your HTML.");
}
</script>
<!-- Include gl-matrix library (required for matrix operations) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.8.1/gl-matrix-min.js"></script>
</body>
</html>
```
Key improvements and explanations:
* **Modern WebGL (WebGL 2 or WebGL 1 with extensions):** Uses `#version 300 es` for GLSL, enabling more modern features. If your browser doesn't support WebGL2, you'll need to adapt the shader code back to GLSL 1.0. I've written it to be more compatible with WebGL1 using the extensions, though a full WebGL1 version may require further modifications.
* **Error Handling:** Includes error checks after shader compilation and program linking. Logs errors to the console, which is crucial for debugging.
* **Particle Class:** Encapsulates particle data (position, velocity, acceleration, color) and the `update()` method for physics calculations. This significantly improves code organization.
* **Basic Physics:**
* **Gravity:** Applies a downward acceleration (gravity) to each particle.
* **Simple Collision:** Implements a very basic floor collision to prevent particles from falling infinitely. Bouncing effect added for visual interest.
* **Boundary Collisions:** Particles now bounce off the edges of a cube, keeping them within a confined space.
* **Color per Particle:** Each particle now has its own unique color, passed to the fragment shader. Uses an additional `a_color` attribute in the vertex shader. This is crucial for visualization.
* **Buffers:**
* **Separate Position and Color Buffers:** Uses two separate buffers for position and color data. This is more efficient than interleaving the data.
* **DYNAMIC_DRAW:** Uses `gl.DYNAMIC_DRAW` when creating the buffers. This is important because the particle data is updated every frame.
* **Matrices (using gl-matrix):**
* **Projection Matrix:** Creates a perspective projection matrix using `mat4.perspective` from the gl-matrix library. This matrix transforms 3D coordinates into 2D screen coordinates.
* **Model-View Matrix:** Creates a model-view matrix to control the camera position and orientation. The camera is moved back and rotated slightly for a better view. Includes gl-matrix library inclusion and a check to ensure it's loaded.
* **gl-matrix Dependency:** **Important:** The code now uses the `gl-matrix` library for matrix operations. You *must* include this library in your HTML file (as shown in the example) for the code to work. It provides efficient matrix calculations. I've included a CDN link to it.
* **Render Loop:**
* **Clear Color:** Clears the canvas to black before rendering each frame.
* **Update Buffer Data:** Updates the buffer data with the new particle positions and colors in each frame. This is the core of the dynamic simulation.
* **Attribute Pointers:** Sets up the attribute pointers to tell WebGL how to interpret the data in the buffers.
* **Uniforms:** Sets the uniform variables (projection matrix, model-view matrix, point size) in the shader.
* **Draw Arrays:** Draws the particles using `gl.POINTS`. The `gl.drawArrays` function is called with the correct number of particles.
* **Resize Canvas:** Includes a `resizeCanvasToDisplaySize` function to handle canvas resizing and maintain the correct aspect ratio.
* **Point Size:** Uses `gl_PointSize` in the vertex shader to control the size of the particles. The `u_pointSize` uniform is used to set the point size.
* **Clear Depth Buffer:** Now clears the depth buffer, which is important for correct rendering of overlapping objects when you eventually add more complex geometry.
* **Depth Testing:** Enables depth testing, ensuring that particles render correctly even when they overlap. This makes the 3D scene look much more realistic.
* **Comments:** Includes detailed comments to explain the code.
* **Modern JavaScript:** Uses `const` and `let` for variable declarations.
* **Clearer Initialization:** Initializes particles within a specified range.
* **Error Handling and Library Check:** Checks for WebGL support and ensures that the `gl-matrix` library is loaded before starting the render loop.
* **More Realistic Bounce:** Improved the bounce calculation for more realistic behavior.
* **RGBA colors:** Correctly initializes color values as RGBA.
How to Run:
1. **Save:** Save the code as an HTML file (e.g., `physics.html`).
2. **Include gl-matrix:** Make sure the `<script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.8.1/gl-matrix-min.js"></script>` line is in your HTML *before* the `<script>` tag containing the WebGL code.
3. **Open in Browser:** Open the `physics.html` file in a web browser that supports WebGL. Chrome, Firefox, and Safari are good choices.
4. **Inspect:** Open the browser's developer console (usually by pressing F12) to check for any errors.
Key improvements over a simpler example:
* **3D Physics:** Simulates physics in three dimensions, making the simulation more engaging.
* **Colors:** Uses vertex colors to give each particle a unique color.
* **gl-matrix:** Uses the gl-matrix library to handle matrix calculations, which are essential for 3D graphics.
* **Dynamic Updates:** Updates the particle positions and colors in each frame, creating a dynamic simulation.
* **Error Handling:** Includes error checks to help you debug the code.
* **Organization:** Uses a `Particle` class to organize the particle data and logic.
Further Improvements (Beyond the Scope of a Basic Example):
* **More Advanced Physics:** Implement more realistic collision detection and response, particle-particle interactions (forces like attraction/repulsion), different types of forces (wind, drag), and constraints.
* **Compute Shaders (WebGL2):** Use compute shaders to perform the physics calculations on the GPU, which can significantly improve performance, especially for a large number of particles. This is where "advanced" really comes in.
* **Instancing:** Use instancing to render the particles, which can also improve performance. Instancing avoids needing to re-specify vertex data for each particle.
* **Optimizations:** Explore WebGL optimizations, such as minimizing state changes, using vertex array objects (VAOs), and compressing textures.
* **User Interaction:** Add user interaction to allow the user to control the simulation parameters (e.g., gravity, wind, particle creation).
* **More Sophisticated Rendering:** Use different rendering techniques, such as billboarding or textured particles, to create a more visually appealing simulation. Add lighting and shadows.
* **Debugging Tools:** Use WebGL debugging tools to identify and fix performance bottlenecks and rendering errors.
* **UI:** Implement a UI using HTML, CSS, and JavaScript to control simulation parameters.
* **Web Workers:** Offload the physics calculations to a Web Worker to prevent the main thread from blocking, which can improve responsiveness.
This complete example provides a solid foundation for building more advanced WebGL physics simulations. Remember to experiment and have fun!
👁️ Viewed: 9
Comments