Initial Commit

ChrisSchroeder01 · ChrisSchroeder01 · commit 34f25db23d29 · 2024-12-19T16:58:35.000+01:00
diff --git a/index.html b/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>WebGPU Lenia</title>
+    <style>
+        body, html {
+            margin: 0;
+            padding: 0;
+            overflow: hidden;
+            width: 100%;
+            height: 100%;
+        }
+        canvas {
+            display: block;
+            width: 100%;
+            height: 100%;
+        }
+        
+    </style>
+</head>
+<body>
+    <canvas></canvas>
+    <script type="module" src="index.js"></script>
+</body>
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,105 @@
+import { fetchShader } from './src/ShaderUtils.js';
+import Material from './src/Material.js';
+
+class Main {
+    constructor() {
+        this.canvas = document.querySelector('canvas');
+        this.scaleValue = 250;
+        this.offset = { x: 0, y: 0 };
+        this.moving = false;
+        this.start = { x: 0, y: 0 };
+    }
+
+    async initialize() {
+        if (!navigator.gpu) {
+            console.error("WebGPU not supported on this browser.");
+            return;
+        }
+
+        const adapter = await navigator.gpu.requestAdapter();
+        const device = await adapter.requestDevice();
+        const context = this.canvas.getContext('webgpu');
+        const format = navigator.gpu.getPreferredCanvasFormat();
+
+        context.configure({
+            device,
+            format,
+            alphaMode: 'opaque',
+        });
+
+        this.device = device;
+        this.context = context;
+        this.format = format;
+
+        await this.setupShaders();
+        this.createMaterial();
+        this.setupEventListeners();
+        this.resize();
+    }
+
+    async setupShaders() {
+        this.vertexShaderCode = await fetchShader('./src/shader/vertex.wgsl');
+        this.fragmentShaderCode = await fetchShader('./src/shader/fragment.wgsl');
+    }
+
+    createMaterial() {
+        this.material = new Material(this.device, this.vertexShaderCode, this.fragmentShaderCode, {
+            0: { size: 8, usage: GPUBufferUsage.UNIFORM }, // resolution
+            1: { size: 4, usage: GPUBufferUsage.UNIFORM }, // scale
+            2: { size: 8, usage: GPUBufferUsage.UNIFORM }, // offset
+        });
+
+        this.material.createPipeline(this.format);
+    }
+
+    setupEventListeners() {
+        window.addEventListener('resize', () => this.resize());
+        this.canvas.addEventListener('mousedown', (event) => this.onMouseDown(event));
+        this.canvas.addEventListener('mousemove', (event) => this.onMouseMove(event));
+        this.canvas.addEventListener('mouseup', () => this.onMouseUp());
+        this.canvas.addEventListener('wheel', (event) => this.onWheel(event));
+    }
+
+    resize() {
+        this.canvas.width = window.innerWidth;
+        this.canvas.height = window.innerHeight;
+        this.material.updateUniform('0', new Float32Array([this.canvas.width, this.canvas.height]));
+        this.material.updateUniform('1', new Float32Array([this.scaleValue]));
+        this.render();
+    }
+
+    onMouseDown(event) {
+        this.start.x = event.pageX;
+        this.start.y = event.pageY;
+        this.moving = true;
+    }
+
+    onMouseMove(event) {
+        if (this.moving) {
+            this.offset.x += event.movementX / this.scaleValue;
+            this.offset.y += event.movementY / this.scaleValue;
+            this.material.updateUniform('2', new Float32Array([this.offset.x, this.offset.y]));
+            this.render();
+        }
+    }
+
+    onMouseUp() {
+        this.moving = false;
+    }
+
+    onWheel(event) {
+        this.scaleValue -= (event.deltaY / 100) * (this.scaleValue / 5);
+        this.material.updateUniform('1', new Float32Array([this.scaleValue]));
+        this.resize();
+    }
+
+    render() {
+        const commandEncoder = this.device.createCommandEncoder();
+        const textureView = this.context.getCurrentTexture().createView();
+        this.material.render(commandEncoder, textureView);
+        this.device.queue.submit([commandEncoder.finish()]);
+    }
+}
+
+const app = new Main();
+app.initialize();
diff --git a/src/Material.js b/src/Material.js
@@ -0,0 +1,92 @@
+class Material {
+    constructor(device, vertexShaderCode, fragmentShaderCode, inputs = {}, sharedBuffers = {}) {
+        this.device = device;
+        this.vertexModule = device.createShaderModule({ code: vertexShaderCode });
+        this.fragmentModule = device.createShaderModule({ code: fragmentShaderCode });
+
+        // Create buffers for all defined inputs
+        this.uniformBuffers = {};
+        for (const [name, { size, usage }] of Object.entries(inputs)) {
+            this.uniformBuffers[name] = device.createBuffer({
+                size,
+                usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST,
+            });
+        }
+
+        // Store the shared buffers
+        this.sharedBuffers = sharedBuffers;
+
+        // Predefine the pipeline and bind group layout
+        this.pipeline = null;
+        this.bindGroup = null;
+    }
+
+    createPipeline(format) {
+        this.pipeline = this.device.createRenderPipeline({
+            layout: 'auto',
+            vertex: {
+                module: this.vertexModule,
+                entryPoint: 'main',
+            },
+            fragment: {
+                module: this.fragmentModule,
+                entryPoint: 'main',
+                targets: [{ format }],
+            },
+            primitive: {
+                topology: 'triangle-list',
+            },
+        });
+
+        // Create the bind group including shared buffers
+        const entries = Object.entries(this.uniformBuffers).map(([name, buffer], index) => ({
+            binding: index,
+            resource: { buffer },
+        }));
+
+        // Add the shared buffers to the bind group
+        for (const [binding, buffer] of Object.entries(this.sharedBuffers)) {
+            entries.push({
+                binding: parseInt(binding),
+                resource: { buffer },
+            });
+        }
+
+        this.bindGroup = this.device.createBindGroup({
+            layout: this.pipeline.getBindGroupLayout(0),
+            entries,
+        });
+    }
+
+    updateUniform(name, data) {
+        if (!this.uniformBuffers[name]) {
+            throw new Error(`Uniform '${name}' is not defined.`);
+        }
+        this.device.queue.writeBuffer(this.uniformBuffers[name], 0, data);
+    }
+
+    render(commandEncoder, textureView) {
+        if (!this.pipeline || !this.bindGroup) {
+            throw new Error("Pipeline or bind group not initialized. Call createPipeline().");
+        }
+
+        const renderPassDescriptor = {
+            colorAttachments: [
+                {
+                    view: textureView,
+                    clearValue: { r: 0, g: 0, b: 0, a: 1 },
+                    loadOp: 'clear',
+                    storeOp: 'store',
+                },
+            ],
+        };
+
+        const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
+        passEncoder.setPipeline(this.pipeline);
+        passEncoder.setBindGroup(0, this.bindGroup);
+        passEncoder.draw(6);
+        passEncoder.end();
+    }
+}
+
+export default Material;
diff --git a/src/ShaderUtils.js b/src/ShaderUtils.js
@@ -0,0 +1,30 @@
+async function fetchShader(url) {
+    const response = await fetch(url);
+    if (!response.ok) {
+        throw new Error(`Failed to load shader: ${url}`);
+    }
+    return await response.text();
+}
+
+async function include(shaderPath) {
+    let shaderCode = await fetchShader(shaderPath);
+    const basePath = shaderPath.substring(0, shaderPath.lastIndexOf('/'));
+    const includeRegex = /^#include\s+"(.+?)"/gm;
+    let match;
+
+    while ((match = includeRegex.exec(shaderCode)) !== null) {
+        const includeFile = match[1];
+        const includeUrl = `${basePath}/${includeFile}`;
+
+        try {
+            const includeContent = await fetchShader(includeUrl);
+            shaderCode = shaderCode.replace(match[0], includeContent);
+        } catch (error) {
+            throw new Error(`Failed to include file: ${includeFile} - ${error.message}`);
+        }
+    }
+
+    return shaderCode;
+}
+
+export { fetchShader, include };
diff --git a/src/shader/fragment.wgsl b/src/shader/fragment.wgsl
@@ -0,0 +1,39 @@
+@group(0) @binding(0) var<uniform> resolution : vec2<f32>;
+@group(0) @binding(1) var<uniform> scale : f32;
+@group(0) @binding(2) var<uniform> offset : vec2<f32>;
+
+@fragment
+fn main(@builtin(position) fragCoord: vec4<f32>) -> @location(0) vec4<f32> {
+    // Normalize the coordinates to [0, 1] space
+    let uv = fragCoord.xy / resolution;
+
+    // Adjust the x and y coordinates to account for scale and offset
+    let x = ((fragCoord.x - resolution.x / 2.0) / scale) - offset.x;
+    let y = ((fragCoord.y - resolution.y / 2.0) / scale) - offset.y;
+
+    // Initialize the complex number z0 = 0 and the complex number c = (x, y)
+    var z = vec2<f32>(0, 0);
+    let c = vec2<f32>(x, y);
+
+    // Maximum number of iterations to determine if a point is in the Mandelbrot set
+    let maxIterations =  i32(sqrt(scale));
+    var i: i32 = 0;
+    for (i = 0; i < maxIterations; i = i + 1) {
+        let zSquared = vec2<f32>(z.x * z.x - z.y * z.y, 2.0 * z.x * z.y);
+        z = zSquared + c;
+        if (dot(z, z) > 4.0) {
+            break;
+        }
+    }
+
+    let normalizedIterations = f32(i) / f32(maxIterations);
+
+
+    let color = vec3<f32>(
+        normalizedIterations,        // Red channel: varies from 0 to 1
+        1.0 - normalizedIterations,  // Green channel: varies inversely from 1 to 0
+        0.5 + 0.5 * sin(normalizedIterations * 3.14159) // Blue channel: oscillates based on the sine function
+    );
+
+    return vec4<f32>(color, 1.0);
+}
diff --git a/src/shader/vertex.wgsl b/src/shader/vertex.wgsl
@@ -0,0 +1,12 @@
+@vertex
+fn main(@builtin(vertex_index) vertexIndex : u32) -> @builtin(position) vec4<f32> {
+    var positions = array<vec2<f32>, 6>(
+        vec2<f32>(-1.0, -1.0),
+        vec2<f32>( 1.0, -1.0),
+        vec2<f32>(-1.0,  1.0),
+        vec2<f32>(-1.0,  1.0),
+        vec2<f32>( 1.0, -1.0),
+        vec2<f32>( 1.0,  1.0)
+    );
+    return vec4<f32>(positions[vertexIndex], 0.0, 1.0);
+}
