From 762d6499604da45290bdb70120e766a2bb9af16d Mon Sep 17 00:00:00 2001 From: Raymond Feng <113264095+sgmq0@users.noreply.github.com> Date: Sun, 7 Dec 2025 23:27:05 -0500 Subject: [PATCH 1/5] Revise README with project overview and features Updated project details, added features, and improved formatting. --- README.md | 63 ++++++++++++++++++++++++++++++++++++++++++++++++------- 1 file changed, 55 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index a635413..f5755b7 100644 --- a/README.md +++ b/README.md @@ -1,14 +1,18 @@ # TerrainGen -_Final project for CIS5650_ +_Final project for University of Pennsylvania, CIS5650 GPU Programming and Architecture, Fall 2025_ -![Milestone 1 Demo](./docs/images/milestone_01_demo.webp) +Raymond Feng, Neha Thumu, Thomas Shaw + +Screenshot 2025-12-07 231302 [Link to website! ](https://thumun.github.io/TerrainGen/) -## Motivation +## Overview + +TerrainGen is a single-page web application using WebGPU to create a real-time node-based procedural terrain generation and rendering tool. Our motivation for the project was to create an accessible modelling tool on the web to showcase the power of WebGPU. -This is a single-page web application using WebGPU to create a real-time node-based procedural terrain generation tool. +image ### Milestones @@ -17,9 +21,7 @@ This is a single-page web application using WebGPU to create a real-time node-ba 3. [Milestone 3 Progress Slides](https://docs.google.com/presentation/d/1SY8XgbtOQOwFCNqlIhqCft3_o6H0uVIyBBi3s_v93jw/edit?usp=sharing) 4. [Final Presentation](https://docs.google.com/presentation/d/1d1kF9o0qythf8vgfsJAXlKPUyjCBU8piUQctd_OLzT8/edit?usp=sharing) -## Project Details - -TerrainGen is a easy-to-use procedural, node-based tool that users can utilize to create terrain! Our project is entirely on WebGPU so the user does not have to worry about any setup/download issues. +## How to Use ### Window Layout @@ -29,7 +31,7 @@ Nodes can be added to the canvas element on the left-hand side of the screen and ### Import/Export -image +Screenshot 2025-12-07 232242 A user can import/export their node graph. @@ -38,6 +40,51 @@ If this is imported, then the following node graph will be loaded in. image +The skybox can also be changed by uploading an HDR file. + +## Project Features +- [x] πŸ”Œ Node-based description system for procedural terrain +- [x] 🏭 Just-in-time WebGPU shader code generation +- [x] πŸ”οΈ Real-time terrain rendering + - [x] Adjustable tesselation and terrain size + - [x] Varied terrain type rendering (grass, rock, snow, etc) + - [x] Shadow mapping + - [x] Distance fog +- [x] 🌲 Mesh instancing across terrain + - [x] GLTF/OBJ import for instancing + +### Terrain Rendering +The terrain is a tesselated plane with an adjustable size and resolution. Whenever the size and resolution sliders are changed, a compute shader populates a vertex buffer and an index buffer. A second compute pass gives each vertex on the terrain a normal value, which is calculated based on the position of neighboring vertices. + +Once the terrain is created with the compute shaders, it is rendered every frame with lambertian shading, shadow mapping, and distance fog. + +The terrain's color can be changed with a dropdown in the Terrain (Output) node. + +### Mesh Instancing +asdf + +## Node Types +- General-purpose + - [x] Basic math (add, sub, mult, div) + - [x] Trig math (sin, cos, tan) +- Terrain source + - [x] Worley noise +- Terrain input + - [x] Vertex XYZ position +- Terrain output + - [x] Height + - [x] Terrain type + - [x] Water level +- Scattering source + - [x] Terrain height + - [x] Instancing node +- Scattering geometry + - [x] Built-in objects: trees, rocks, bushes + - [x] Primitive geometry: sphere, cube, plane + - Custom models + - [x] OBJ import + - [x] glTF import + ### Input Nodes #### Vertex Data From 94ff20eecfef3e600391b87e5f7813633a504425 Mon Sep 17 00:00:00 2001 From: Raymond Feng <113264095+sgmq0@users.noreply.github.com> Date: Sun, 7 Dec 2025 23:28:35 -0500 Subject: [PATCH 2/5] Update README.md --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index f5755b7..f83b569 100644 --- a/README.md +++ b/README.md @@ -233,3 +233,4 @@ npm run format:check # don't write to any files, just report issues - [TanStack Router](https://tanstack.com/router). The initial setup is a code based router. Which means that the routes are defined in code (in the `./src/main.tsx` file). If you like you can also use a file based routing setup by following the [File Based Routing](https://tanstack.com/router/latest/docs/framework/react/guide/file-based-routing) guide. - [React Flow](https://reactflow.dev/) for node editor functionality - [loaders.gl](https://loaders.gl/) for reading/writing of external files +- [io-rgbe](https://github.com/DerSchmale/io-rgbe) for HDR loading From bf9faaa3410c9439975edf51db6bc07ba3f057d1 Mon Sep 17 00:00:00 2001 From: Raymond Feng <113264095+sgmq0@users.noreply.github.com> Date: Sun, 7 Dec 2025 23:42:08 -0500 Subject: [PATCH 3/5] Revise README with new images and feature details Updated images and improved descriptions for terrain generation features. --- README.md | 52 +++++++++++----------------------------------------- 1 file changed, 11 insertions(+), 41 deletions(-) diff --git a/README.md b/README.md index f83b569..324d3f1 100644 --- a/README.md +++ b/README.md @@ -12,7 +12,8 @@ Raymond Feng, Neha Thumu, Thomas Shaw TerrainGen is a single-page web application using WebGPU to create a real-time node-based procedural terrain generation and rendering tool. Our motivation for the project was to create an accessible modelling tool on the web to showcase the power of WebGPU. -image +image +Screenshot 2025-12-07 233712 ### Milestones @@ -51,8 +52,12 @@ The skybox can also be changed by uploading an HDR file. - [x] Shadow mapping - [x] Distance fog - [x] 🌲 Mesh instancing across terrain - - [x] GLTF/OBJ import for instancing - + - [x] glTF/OBJ import for instancing + +### Node-based Description System + +### JIT Shader Code Generation + ### Terrain Rendering The terrain is a tesselated plane with an adjustable size and resolution. Whenever the size and resolution sliders are changed, a compute shader populates a vertex buffer and an index buffer. A second compute pass gives each vertex on the terrain a normal value, which is calculated based on the position of neighboring vertices. @@ -61,7 +66,9 @@ Once the terrain is created with the compute shaders, it is rendered every frame The terrain's color can be changed with a dropdown in the Terrain (Output) node. ### Mesh Instancing -asdf +TerrainGen also supports OBJ and glTF import, which can be used as part of the instancing pipeline. Users can create multiple instancing pipelines, each of which creates a separate buffer of instancing points on which the desired mesh will be placed. These instancing points are randomly generated on top of the terrain using the Scatter node. + +With glTFs, base color textures can be displayed. ## Node Types - General-purpose @@ -148,43 +155,6 @@ This node allows for an input unsigned int variable. | image | image | | This node triggers the terrain pipeline if the height float input is connected to a valid node. | This node triggers the instancing pipeline. The pipeline is only run/rerun if both the scatter and geometry inputs are connected to valid nodes. | -### Feature checklist - -- [x] πŸ”Œ Node-based description system for procedural terrain -- [x] 🏭 Just-in-time WebGPU shader code generation -- [x] πŸ”οΈ Real-time terrain rendering - - [x] Adjustable tesselation and terrain size - - [ ] Varied terrain type rendering (grass, rock, snow, etc) -- [ ] πŸ”Ž Real-time in-editor node previews -- [x] 🌲 Mesh instancing across terrain - - [x] Mesh import for instancing -- [ ] πŸ’Ύ Export to glTF or similar format - -#### Node types: - -- General-purpose - - [x] Basic math (add, sub, mult, div) - - [x] Trig math (sin, cos, tan) - - [ ] Masking/graphics util (mix, lt, gt, min, max) -- Terrain source - - [ ] Perlin noise - - [ ] Custom image texture -- Terrain input - - [x] Vertex XYZ position -- Terrain output - - [x] Height - - [ ] Terrain type -- Scattering source - - [x] Terrain height - - [ ] Voronoi scattering -- Scattering geometry - - [x] Built-in objects: trees, rocks, bushes - - [x] Primitive geometry: sphere, cube, plane, line - - Custom models - - [x] OBJ import - - [ ] glTF import - - [ ] Vegetation β†’ like Unreal’s PCG - ## Development To run this application: From 083ba5ffe7bb47daf818f648de7242455578058f Mon Sep 17 00:00:00 2001 From: Thomas Shaw Date: Sun, 7 Dec 2025 23:51:43 -0500 Subject: [PATCH 4/5] Add wiki link, remove node reference from README --- README.md | 69 ++----------------------------------------------------- 1 file changed, 2 insertions(+), 67 deletions(-) diff --git a/README.md b/README.md index 324d3f1..2863192 100644 --- a/README.md +++ b/README.md @@ -24,6 +24,8 @@ TerrainGen is a single-page web application using WebGPU to create a real-time n ## How to Use +For a more in-depth look at how to use each node/feature, check out the **[project wiki](https://github.com/thumun/TerrainGen/wiki)**. + ### Window Layout image @@ -92,73 +94,6 @@ With glTFs, base color textures can be displayed. - [x] OBJ import - [x] glTF import -### Input Nodes - -#### Vertex Data - -This node outputs the position of the verticies. Nodes connected to this one can be used to offset these positions. -image - -#### Geometry - -These nodes all work the same functionally. In that, they load a chosen model based on user input after connected to the **instancing (output)** node. -|image | image | Screenshot 2025-12-01 135707 | --------------------------- | -------------------------- | -------------------------- | -A user can add primitive geometry with this node (cube, sphere, plane) | A user can load their personal models with this node (only OBJ is supported for the time being) | A user can choose between our custom built-in geometry (ex. trees, rocks) to add to the terrain rather than upload their own | - -#### Float - -This node allows for an input float variable. - -image - -#### Vector - -This node allows for an input vec3f variable. - -image - -#### Unsigned Int - -This node allows for an input unsigned int variable. - -image - -### Utility Nodes - -| Separate XYZ | Combine XYZ | -| ---------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | -| image | image | -| This node separates an input of type vec3f to three floats (x, y, z) | This node combines three float inputs into one vec3f | - -### Geometry Nodes - --- Will be added -- - -### Operator Nodes - -### Math - -| Math | Trig Math | Mix | -| -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | -| image | image | image | -| This node can be used to apply one of the following operations (add, subtract, multiply, divide) to two inputs (float or vec3f) and returns a value of the same type | This node applies a trig function to an input value and returns a float output | This node linearly interporaltes between the two input values based on the mix value | - -### Noise - --- Will be added -- - -### Output Nodes - -| Terrain | Instancing | -| ---------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | -| image | image | -| This node triggers the terrain pipeline if the height float input is connected to a valid node. | This node triggers the instancing pipeline. The pipeline is only run/rerun if both the scatter and geometry inputs are connected to valid nodes. | - -## Development - -To run this application: - ```bash npm install npm run dev From 8e8b7edbf3c469df037dcacd2bbe3cc6f538cdba Mon Sep 17 00:00:00 2001 From: Neha Thumu Date: Sun, 7 Dec 2025 23:58:00 -0500 Subject: [PATCH 5/5] jit shader code --- README.md | 20 +++++++++++++------- 1 file changed, 13 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index 2863192..b11d9f2 100644 --- a/README.md +++ b/README.md @@ -10,7 +10,7 @@ Raymond Feng, Neha Thumu, Thomas Shaw ## Overview -TerrainGen is a single-page web application using WebGPU to create a real-time node-based procedural terrain generation and rendering tool. Our motivation for the project was to create an accessible modelling tool on the web to showcase the power of WebGPU. +TerrainGen is a single-page web application using WebGPU to create a real-time node-based procedural terrain generation and rendering tool. Our motivation for the project was to create an accessible modelling tool on the web to showcase the power of WebGPU. image Screenshot 2025-12-07 233712 @@ -46,13 +46,14 @@ If this is imported, then the following node graph will be loaded in. The skybox can also be changed by uploading an HDR file. ## Project Features + - [x] πŸ”Œ Node-based description system for procedural terrain - [x] 🏭 Just-in-time WebGPU shader code generation - [x] πŸ”οΈ Real-time terrain rendering - [x] Adjustable tesselation and terrain size - [x] Varied terrain type rendering (grass, rock, snow, etc) - - [x] Shadow mapping - - [x] Distance fog + - [x] Shadow mapping + - [x] Distance fog - [x] 🌲 Mesh instancing across terrain - [x] glTF/OBJ import for instancing @@ -60,19 +61,24 @@ The skybox can also be changed by uploading an HDR file. ### JIT Shader Code Generation +Once there is a valid node graph connected to one of our output pipelines (Terrain, Instancing, and Water) our pipeline gets computed and the shader code is generated. Our nodes of type input create uniform keys and each subsequent output handle generates a key on the fly. Each node has specific code that is generated and added to our vertex shader along with references to the aforementioned uniform keys. + ### Terrain Rendering -The terrain is a tesselated plane with an adjustable size and resolution. Whenever the size and resolution sliders are changed, a compute shader populates a vertex buffer and an index buffer. A second compute pass gives each vertex on the terrain a normal value, which is calculated based on the position of neighboring vertices. + +The terrain is a tesselated plane with an adjustable size and resolution. Whenever the size and resolution sliders are changed, a compute shader populates a vertex buffer and an index buffer. A second compute pass gives each vertex on the terrain a normal value, which is calculated based on the position of neighboring vertices. Once the terrain is created with the compute shaders, it is rendered every frame with lambertian shading, shadow mapping, and distance fog. The terrain's color can be changed with a dropdown in the Terrain (Output) node. ### Mesh Instancing -TerrainGen also supports OBJ and glTF import, which can be used as part of the instancing pipeline. Users can create multiple instancing pipelines, each of which creates a separate buffer of instancing points on which the desired mesh will be placed. These instancing points are randomly generated on top of the terrain using the Scatter node. -With glTFs, base color textures can be displayed. +TerrainGen also supports OBJ and glTF import, which can be used as part of the instancing pipeline. Users can create multiple instancing pipelines, each of which creates a separate buffer of instancing points on which the desired mesh will be placed. These instancing points are randomly generated on top of the terrain using the Scatter node. + +With glTFs, base color textures can be displayed. ## Node Types + - General-purpose - [x] Basic math (add, sub, mult, div) - [x] Trig math (sin, cos, tan) @@ -86,7 +92,7 @@ With glTFs, base color textures can be displayed. - [x] Water level - Scattering source - [x] Terrain height - - [x] Instancing node + - [x] Instancing node - Scattering geometry - [x] Built-in objects: trees, rocks, bushes - [x] Primitive geometry: sphere, cube, plane