Finishing up (#43)

* Separated physics logic Co-authored-by: Spencer C. Imbleau <spencer@imbleau.com> * Code cleanup Co-authored-by: Sebastian Hamel <sebastian.hamel@rockets.utoledo.edu> * Fixed astro burping Co-authored-by: Sebastian Hamel <sebastian.hamel@rockets.utoledo.edu> * Finished web document styling Co-authored-by: Sebastian Hamel <sebastian.hamel@rockets.utoledo.edu> * Decreased font size Co-authored-by: Sebastian Hamel <sebastian.hamel@rockets.utoledo.edu> * Final constant tweaks Co-authored-by: Spencer C. Imbleau <spencer@imbleau.com> * Added dynamic color scaling Co-authored-by: Sebastian Hamel <sebastian.hamel@rockets.utoledo.edu> * Fixed x sampling for texture UVs Co-authored-by: Spencer C. Imbleau <spencer@imbleau.com> * Rave mode in state Co-authored-by: Sebastian Hamel <sebastian.hamel@rockets.utoledo.edu> * Rave mode complete Co-authored-by: Spencer C. Imbleau <spencer@imbleau.com> * Added instructions Co-authored-by: Sebastian Hamel <sebastian.hamel@rockets.utoledo.edu> * Rave shader finished Co-authored-by: Spencer C. Imbleau <spencer@imbleau.com> * clean up * Modified README * Necessary emoji * Added renovate, actions * Updated README * Fixed build GitHub Action * Changed Action name * Finished GitHub Actions workflows * Updated dependencies, workflows Co-authored-by: Sebastian Hamel <sebjfk@gmail.com> Co-authored-by: Sebastian Hamel <sebastian.hamel@rockets.utoledo.edu>
simbleau · Aug 7, 2022 · c63a6d5 · c63a6d5
1 parent 63d1c46
commit c63a6d5
Show file tree

Hide file tree

Showing 27 changed files with 490 additions and 259 deletions.
diff --git a/.cargo/config.toml b/.cargo/config.toml
diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml
@@ -0,0 +1,4 @@
+# These are supported funding model platforms
+
+github: [simbleau]
+custom: ["buymeacoffee.com/simbleau"]
diff --git a/.github/renovate.json b/.github/renovate.json
@@ -0,0 +1,14 @@
+{
+  "extends": [
+    "config:base"
+  ],
+  "packageRules": [
+    {
+      "matchUpdateTypes": [
+        "minor",
+        "patch"
+      ],
+      "automerge": true
+    }
+  ]
+}
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -0,0 +1,47 @@
+name: build
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+env:
+  TOOLCHAIN: nightly
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+
+      # Cargo cache
+      - name: Cargo cache
+        id: cache-cargo
+        uses: actions/cache@v3
+        with:
+          path: ~/.cargo/bin
+          key: cargo
+
+      # Install cargo deps
+      - name: Pull Cargo dependencies
+        if: steps.cache-cargo.outputs.cache-hit != 'true'
+        run: |
+          rustup update $TOOLCHAIN
+          rustup default $TOOLCHAIN
+          cargo install trunk
+
+      # Pull website
+      - name: Build cache
+        id: cache-build
+        uses: actions/cache@v3
+        with:
+          path: ./dist
+          key: dist-${{ hashFiles('./src') }}-${{ hashFiles('./assets') }}
+
+      # Install cargo deps
+      - name: Trunk build
+        if: steps.cache-build.outputs.cache-hit != 'true'
+        run: |
+          trunk build
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -0,0 +1,39 @@
+name: release
+
+on:
+  push:
+    branches: [main]
+
+env:
+  TOOLCHAIN: nightly
+
+jobs:
+  release:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+
+      # Pull website
+      - name: Build cache
+        id: cache-build
+        uses: actions/cache@v3
+        with:
+          path: ./dist
+          key: dist-${{ hashFiles('./src') }}-${{ hashFiles('./assets') }}
+
+      # Install cargo deps
+      - name: Trunk build
+        if: steps.cache-build.outputs.cache-hit != 'true'
+        run: |
+          rustup update $TOOLCHAIN
+          rustup default $TOOLCHAIN
+          cargo install trunk
+          trunk build --release
+
+      # Deploy, GitHub Pages
+      - name: Deploy
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./dist
diff --git a/Cargo.toml b/Cargo.toml
@@ -35,7 +35,6 @@ nalgebra = "0.31.1"
 
 [dependencies.rapier2d]
 version = "0.14.0"
-opt-level = 3
 features = [ "wasm-bindgen" ]
 
 [dependencies.web-sys]

diff --git a/README.md b/README.md
@@ -1,10 +1,46 @@
-# GPU-Accelerated 2D N-Body Simulation, in WASM
-An N-body WebAssembly simulation using WebGPU.
+<div align="center">
 
-# Run
-- `trunk serve`
+<h1>GPU N-body WASM Simulation
+</br>
+<a href="https://www.rust-lang.org/"><img src="https://simpleicons.org/icons/rust.svg" width="50px" height="50px"/></a>
++
+<a href="https://www.rust-lang.org/what/wasm"><img src="https://simpleicons.org/icons/webassembly.svg" width="50px" height="50px"/></a>
++
+<a href=""><img src="https://wgpu.rs/logo.min.svg" width="50px" height="50px"/></a>
+</h1>
 
-# Progress
-In progress. Currently a research project of [@seabass247](https://github.com/seabass247) and [@simbleau](https://github.com/simbleau).
+<h2>Click here to demo the simulation.</h2>
 
-![image](https://user-images.githubusercontent.com/48108917/181005443-a6c96151-b7b9-4dee-8ba3-0aaf814ac2c9.png)
+</div>
+
+---
+
+## 📖 Overview
+This repository is a 2D N-body simulation of a dynamical system of bodies, under the influence of physical forces such as gravity. The simulation is written completely in Rust with WebGPU and WGSL shading, exported to WebAssembly. We deploy the demo with GitHub Actions.
+
+🔸 Simulations like these are common in astrophysics and are used to understand the evolution of large-scale universal structures.
+
+---
+
+# 🚀 Serve Locally
+## Dependencies
+- [Rust](https://www.rust-lang.org/)
+- [trunk](https://trunkrs.dev/) (`cargo install trunk`)
+- [wasm32-unkown-unknown](https://yew.rs/docs/getting-started/introduction#install-webassembly-target) (`rustup target add wasm32-unknown-unknown`)
+## Serve
+- Run: `trunk serve`
+- Preview: [`http://localhost:8080/`](http://localhost:8080/)
+
+![Screenshot](https://user-images.githubusercontent.com/48108917/183275653-a2ee4f9c-a982-482e-8405-bd124d4bbcf5.png)
+
+---
+
+## 📁 Directories
+
+- [__`assets`__](./assets/): directory contains textures and shaders.
+- [__`src`__](./src/): directory contains the rust source code.
+
+---
+
+## 🔏 License
+This project is dual-licensed under both [Apache 2.0](LICENSE-APACHE) and [MIT](LICENSE-MIT) licenses.
diff --git a/assets/shaders/frag.wgsl b/assets/shaders/frag.wgsl
@@ -1,6 +1,7 @@
 struct Input {
     @builtin(position) clip_position: vec4<f32>,
     @location(0) uv: vec2<f32>,
+    @location(1) color: vec3<f32>,
 };
 
 struct Output {
@@ -16,9 +17,11 @@ var texture_sampler: sampler;
 @fragment
 fn fs_main(in: Input) -> Output {
     var out: Output;
-    out.color = textureSample(texture, texture_sampler, vec2<f32>(in.uv.x, 1.0 - in.uv.y));
+    out.color = textureSample(texture, texture_sampler, vec2<f32>(1.0 - in.uv.x, 1.0 - in.uv.y));
     if ((pow(in.uv.x - 0.5, 2.0) + pow(in.uv.y - 0.5, 2.0)) > pow(0.5, 2.0)) {
         out.color = vec4<f32>(0.0);
     }
+
+    out.color *= vec4<f32>(in.color, 1.0);
     return out;
 }
diff --git a/assets/shaders/vert.wgsl b/assets/shaders/vert.wgsl
@@ -12,15 +12,27 @@ struct Input {
 struct Output {
     @builtin(position) clip_position: vec4<f32>,
     @location(0) uv: vec2<f32>,
+    @location(1) color: vec3<f32>,
 };
 
 struct InstanceInput {
     @location(2) model_matrix_0: vec4<f32>,
     @location(3) model_matrix_1: vec4<f32>,
     @location(4) model_matrix_2: vec4<f32>,
     @location(5) model_matrix_3: vec4<f32>,
+    @location(6) radius: f32,
 };
 
+struct WorldUniform {
+    radius: f32,
+    boundary_segments: u32,
+    rave: u32,
+    padding: u32,
+};
+
+@group(2) @binding(0)
+var<uniform> world: WorldUniform;
+
 // Vertex shader
 @vertex
 fn vs_main(
@@ -42,5 +54,32 @@ fn vs_main(
 
     // World coords -> Device Coordinates
     out.clip_position = camera.view_proj * world_vert;
+
+    var brightest: vec3<f32> = vec3<f32>(0.97, 0.97, 1.0);
+    var blue: vec3<f32> = vec3<f32>(0.33, 0.4, 1.0);
+    var yellow: vec3<f32> = vec3<f32>(0.97, 0.98, 0.8);
+    var orange: vec3<f32> = vec3<f32>(0.96, 0.6, 0.25);
+    var red: vec3<f32> = vec3<f32>(0.99, 0.25, 0.25);
+
+    var star_color: vec3<f32> = vec3<f32>(0.0);
+    if (instance.radius >= 0.75) {
+        star_color += mix(orange, red, (instance.radius - 0.75) * 4.0);
+    } else if (instance.radius >= 0.5) {
+        star_color += mix(yellow, orange, (instance.radius - 0.5) * 4.0);
+    } else if (instance.radius >= 0.25) {
+        star_color += mix(blue, yellow, (instance.radius - 0.25) * 4.0);
+    } else {
+        star_color += mix(brightest, blue, instance.radius * 4.0);
+    }
+
+    var tint: vec3<f32> = vec3<f32>(1.0);
+    var twinkle: vec3<f32> = vec3<f32>(1.0);
+    if (world.rave > 0u) {
+        tint = vec3<f32>(abs(world_vert.xyz) % 2.0);
+        twinkle = vec3<f32>(instance.model_matrix_0.x);
+    }
+
+    // Calculate color
+    out.color = star_color * tint * twinkle;
     return out;
 }
diff --git a/assets/shaders/world.vert.wgsl b/assets/shaders/world.vert.wgsl
@@ -7,7 +7,8 @@ var<uniform> camera: CameraUniform;
 struct WorldUniform {
     radius: f32,
     boundary_segments: u32,
-    padding: vec2<f32>,
+    rave: u32,
+    padding: u32,
 };
 
 @group(1) @binding(0)

diff --git a/assets/textures/cookie.png b/assets/textures/cookie.png
diff --git a/assets/textures/disco.jpg b/assets/textures/disco.jpg
diff --git a/assets/textures/moon.jpg b/assets/textures/moon.jpg
diff --git a/assets/textures/rust.png b/assets/textures/rust.png
diff --git a/index.html b/index.html
@@ -4,15 +4,95 @@
 <head>
     <meta charset="utf-8">
     <title>N-Body WASM Simulation</title>
+    <style>
+        html,
+        body {
+            font-size: .8rem;
+        }
+
+        html {
+            min-height: 100%;
+            position: relative;
+        }
+
+        body {
+            height: 100%;
+            color: white;
+            background-color: blue;
+            padding: 0;
+            margin: 0;
+        }
+
+        #i {
+            position: absolute;
+            top: 0;
+            right: 0;
+            margin: 10px;
+            text-align: right;
+        }
+
+        #f {
+            position: absolute;
+            top: 0;
+            left: 0;
+            margin: 10px;
+        }
+
+        #container {
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            overflow: hidden;
+        }
+
+        #c {
+            width: 100% !important;
+            height: 100% !important;
+        }
+
+        #e {
+            position: absolute;
+            margin-left: 10px;
+            bottom: 0;
+            left: 0;
+        }
+
+        #l {
+            overflow: hidden;
+            line-height: 1rem;
+            height: 5rem;
+        }
+    </style>
 </head>
 
 <body>
-    <h2 id="f">FPS: 0</h2>
-    <canvas id="c" style="background-color: blue;" width="600" height="400"></canvas>
-    <h2>Event Log</h2>
-    <ul id="l">
-        ...
-    </ul>
+    <div id="container">
+        <h2 id="f">FPS: --</h2>
+        <div id="i">
+            <b>Instructions</b>
+            </br>
+            <small>
+                WASD: Move Camera
+                </br>
+                ↕: Scale Camera
+                </br>
+                ↔: Rotate Camera
+                </br>
+                Q: Wireframe
+                </br>
+                E: Rave
+            </small>
+        </div>
+        <canvas id="c"></canvas>
+        <div id="e">
+            <h2>Event Log</h2>
+            <ul id="l">
+                ...
+            </ul>
+        </div>
+    </div>
 </body>
 
 </html>