Skip to content

Commit bc58466

Browse files
committed
update intro and add tutorial.
1 parent 0d9c0fa commit bc58466

29 files changed

+197
-12
lines changed

docs/documentation/_category_.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"label": "Documentation",
3-
"position": 2,
3+
"position": 3,
44
"collapsed": false,
55
"link": {
66
"type": "generated-index",

docs/intro.md

+37-3
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ Get started by **installing the plugin** and activate the new **Physics Server**
2222
- [Godot](https://godotengine.org/download/) version 4 or above.
2323
- **Rapier** plugin from the Godot Asset Library.
2424

25-
## Install the plugin
25+
## Install the plugin from AssetLib
2626

2727
First create a new **Godot Project**. Next click on the **AssetLib** tab and search for the **Rapier** addon and click on the version you want.
2828

@@ -36,9 +36,9 @@ For every dimension there is:
3636
- a **faster** version with **parallel SIMD** feature
3737
- a **slower** version with **cross platform determinism**.
3838

39-
The **parallel SIMD** one uses **parallel solving** and **Single instruction, multiple data** (batches multiple instructions into one for faster calculations).
39+
The **parallel SIMD** one uses **parallel solving** and **Single instruction, multiple data** (batches multiple instructions into one for faster calculations). This version is locally deterministic.
4040

41-
The **cross platform determinism** version supports determistic simulations across multiple systems, but has **NO parallel and NO SIMD** features.
41+
The **cross platform determinism** version supports determistic simulations across multiple platforms, but has **NO parallel and NO SIMD** features.
4242

4343
:::
4444

@@ -64,6 +64,40 @@ Then go to **Physics/2D** or **Physics/3D**. At the **Physics Engine** dropdown
6464

6565
![activate plugin](/img/intro/activate-plugin.png)
6666

67+
68+
## Optionally, Install the plugin from GitHub Releases
69+
70+
You can also install the latest release from **GitHub**. These versions are usually newer than the **AssetLib** releases.
71+
72+
In order to install the latest release, simply go to the [Godot Rapier Releases](https://github.com/appsinacup/godot-rapier-physics/releases) page and download the zip with the flavour you like (eg. **godot-rapier-2d-single-simd-parallel.zip**
73+
). Make sure to click on the Assets dropdown to see the assets.
74+
75+
![releases github](/img/intro/github-releases.png)
76+
77+
After downloading it, extract the **zip** and you will find an **addons** folder (with a **godot-rapier2d** folder inside it). Copy the addons folder into your godot project (where the **project.godot** file resides).
78+
79+
## Optionally, Install the plugin from GitHub Latest Main
80+
81+
You can also install the latest **main** build from GitHub. These versions are usually newer than the GitHub **releases**, but less stable.
82+
83+
In order to install the latest main build, simply go to the [Godot Rapier Main Actions Tab](https://github.com/appsinacup/godot-rapier-physics/actions?query=branch:main) page, click the first green/passing build:
84+
85+
![main build github](/img/intro/github-main-build.png)
86+
87+
Scroll all the way down to the Artifacts section:
88+
89+
![main build github artifacts](/img/intro/github-main-artifacts.png)
90+
91+
92+
And download the zip with the flavour you like (eg. **godot-rapier-2d-single-simd-parallel**). Note, there are a lot of assets for this build, as there are also intermediate assets. The only assets you should download are:
93+
94+
- **godot-rapier-2d-single-simd-parallel**
95+
- **godot-rapier-3d-single-simd-parallel**
96+
- **godot-rapier-2d-single-enhanced-determinism**
97+
- **godot-rapier-3d-single-enhanced-determinism**
98+
99+
After downloading it, extract the **zip** and you will find an **addons** folder (with a **godot-rapier2d** folder inside it). Copy the addons folder into your godot project (where the **project.godot** file resides).
100+
67101
## Web Settings
68102

69103
When exporting for web, you have to enable a few settings, otherwise the whole build will give an error. Go to **Project** -> **Export...** and enable both **Extension Support** and **Thread Support**:

docs/progress.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
sidebar_position: 3
2+
sidebar_position: 4
33
---
44

55
# Implementation Progress

docs/tutorial/_create-a-fluid_.md

-7
This file was deleted.

docs/tutorial/create-a-fluid.md

+158
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,158 @@
1+
---
2+
sidebar_position: 1
3+
---
4+
5+
# Create a Fluid
6+
7+
A **fluid** is a collection of points that are simulated with effects such **viscosity**, **elasticity** and **tension**. For this demo we will first create a 2D fluid that resembles water.
8+
9+
## Create a new Fluid2D node
10+
11+
Create a new **2D Scene** in Godot. In the newly created scene go to the **Scene** tab create a new **Fluid2D** node by right clicking on the root node and selecting **Add child node**:
12+
13+
![create fluid node](/img/create_fluid/add-child-node.png)
14+
15+
In the resulting window select the **Fluid2D** node and select **Create**:
16+
17+
:::caution
18+
19+
If you don't see the **Fluid2D** node it means you either didn't install the plugin or didn't restart the editor after installing it. See [Getting Started](https://softbody2d.appsinacup.com/docs/intro)
20+
21+
:::
22+
23+
## Create points on the Fluid2D node
24+
25+
Points are what simulate the fluid. For now lets create a single point and see it being simulated.
26+
27+
Click on the node you previously created, and in the inspector enable **Debug Draw** and add a **Point** by clicking **Add Element**:
28+
29+
![add points](/img/create_fluid/add-points.png)
30+
31+
## Simulate the Fluid2D node
32+
33+
Add a **Camera2D** node. Hit **Run Current Scene**. You should now see a Fluid Particle falling down.
34+
35+
![fluid falling](/img/create_fluid/fluid-falling.gif)
36+
37+
:::caution
38+
39+
If you don't see the **Fluid2D** particle falling down, it means you didn't activate the **Rapier Physics Engine**. See [Getting Started](https://softbody2d.appsinacup.com/docs/intro)
40+
41+
:::
42+
43+
## Add more points
44+
45+
If you want to simulate wanter, you need more points. These can be created through code. The addon offers some scripts you can check and modify, however they are meant to be a starting point:
46+
- `addons/godot-rapier2d/fluid_2d_circle.gd`: Creates points inside a circle
47+
- `addons/godot-rapier2d/fluid_2d_rectangle.gd`: Creates points inside a rectangle
48+
49+
Click on the **Fluid2D** node and set the Script to `fluid_2d_circle.gd`. Then, set the **Circle Radius** to 7.
50+
51+
![fluid circle](/img/create_fluid/fluid-circle.png)
52+
53+
:::note
54+
55+
The script works on changes, so if you first add the script it won't do anything. You have to change the **Circle Radius** property to a different value.
56+
57+
:::
58+
59+
Now you should see this in the editor:
60+
61+
![fluid circle editor](/img/create_fluid/fluid-circle-editor.png)
62+
63+
## Create a Static Body
64+
65+
Create a Static Body where the fluid to fall onto. Create a **StaticBody2D** node, then create a child **CollisionShape2D** node to that:
66+
67+
![static body](/img/create_fluid/static-body.png)
68+
69+
Then click the **CollisionShape2D** node and set the **Shape** property to be a **RectangleShape** with size 1000 x 40:
70+
71+
![static body size](/img/create_fluid/static-body-size.png)
72+
73+
Next, enable **Debug -> Visible Collision Shapes** in order to view the outline of the Static Body:
74+
75+
![collision shape](/img/create_fluid/static-body-outline.png)
76+
77+
Next, move the **Fluid2D** node above the **Static Body**, at Transform 0 x -500:
78+
79+
![fluid position](/img/create_fluid/fluid-position.png)
80+
81+
![fluid positon editor](/img/create_fluid/fluid-position-editor.png)
82+
83+
When simulating, it won't look much like water just yet. We need to add Fluid Effects next.
84+
85+
## Adding Fluid Effects
86+
87+
### Fluid Tension
88+
89+
Click on the **Fluid2D** node in the inspector, set the **Density** to 1000, add a new **Effect** of type **FluidEffect2DSurfaceTensionAKINCI** to the **Effects** array. Make the **Fluid Tension Coefficient** to 100.
90+
91+
![fliuid effect](/img/create_fluid/fluid-effect.png)
92+
93+
![fliuid tension](/img/create_fluid/fluid-tension.gif)
94+
95+
:::note
96+
97+
You can experiment with different values and different **Surface Tension** Effects as well as different **densities**. Also, changing density of Fluid to 1000 will make it very heavy, so make sure to increase the mass of Rigid Bodies too accordingly.
98+
99+
:::
100+
101+
### Fluid Elasticity
102+
103+
Elasticity makes the fluid act like a softbody almost. For this, go to the Fluid2D node and set an effect of type **FluidEffect2DElasticity**. Set **density** to 1000 and **Young Modulus** to 10000000000 (a high number depending on density).
104+
105+
![fluid elasticity](/img/create_fluid/fluid-elasticity.png)
106+
107+
![fluid elasticity video](/img/create_fluid/fluid-elasticity.gif)
108+
109+
### Fluid Viscousity
110+
111+
112+
Viscousity makes the fluid act like a goo. For this, go to the Fluid2D node and set an effect of type **FluidEffect2DViscosityArtificial** (there are also other viscosities you can try). Set **density** to 1000 and **Fluid Viscosity Coefficient** to 200 (default value).
113+
114+
![fluid viscosity](/img/create_fluid/fluid-viscosity.png)
115+
116+
![fluid viscosity video](/img/create_fluid/fluid-viscosity.gif)
117+
118+
### Combine different effects
119+
120+
In order to obtain good quality water, you might want to combine Viscosity and Surface Tension. You can also combine other effects and get other liquids (eg. goo, etc.). Be careful as setting values that are too high or too small might result in everything exploding. Try to start from values presented here and slowly change them until you get to the result you want (eg. start from same density and coefficients and slowly change them and watch the results).
121+
122+
## Rendering the Fluid
123+
124+
Up until now we rendered the fluid using the **Debug Draw** option. We will now try other methods that are provided as samples. These are meant as starting point and if there is need for anything extra, the reader is adviced to try and change it for his liking. Usually the different renderers will read the value of **Points** from the fluid every frame and draw them on screen.
125+
126+
### Multi Mesh Fluid Renderer
127+
128+
The most basic renderer is a **MultiMeshInstance2D** renderer. This is highly optimized for drawing high number of objects. Create a node of type **MultiMeshInstance2D** and add the sample script `addons/godot-rapier2d/fluid_2d_renderer.gd`. Then, simply assing your fluid in the Fluid property with the fluid you have in your scene.
129+
130+
![Fluid Renderer](/img/create_fluid/fluid-renderer.png)
131+
132+
By default this uses the mesh `addons/godot-rapier2d/circle_mesh.tres` and the texture `addons/godot-rapier2d/Radial2D.svg`. Lets change some of the properties. Set the **Texture** to be `addons/godot-rapier2d/logo_square_2d.png`, the **Mesh Scale** to be 1,1, and the **Color** to have 255 alpha (no transparency). Now click run, you should see this:
133+
134+
![Fluid Renderer Video](/img/create_fluid/fluid-renderer.gif)
135+
136+
### Shader Fluid Renderer
137+
138+
Now, we will use the previous renderer and apply a shader on top. The idea is similar to how metaballs are drawn. We first draw the circles where the fluid points are, then we apply blur in shader and a cutoff to get a solid color instead of transparency to combine the circles into one object. For this we need to create a Canvas and a separate camera inside it, and inside it a Multi Mesh Instance with a shader attached.
139+
140+
Initially we draw radial circles in a color that we will know in the shader (eg. pink):
141+
142+
143+
![Fluid Shader 1](/img/create_fluid/fluid-shader-before.png)
144+
145+
We then apply blur to it, and then cut off anything that is below a certain value (transparency 0.8 in our case). Then, we color everything in a different color (eg. blue)
146+
147+
For this we offer a script to quickly get things started: `addons/godot-rapier2d/fluid_2d_shader_renderer.gd`. Create a node of type **CanvasLayer** and add to it the script `fluid_2d_shader_renderer.gd`. Then set the properties as following:
148+
149+
![Fluid Shader 2](/img/create_fluid/fluid-shader-properties.png)
150+
151+
Now, finally, disable the **Debug Draw** property from the Fluid and click Run:
152+
153+
154+
![Fluid Shader 3](/img/create_fluid/fluid-shader.gif)
155+
156+
## Changing the Fluid Particle Size
157+
158+
If you want to make the fluid particles smaller, go to `Project -> Project Settings -> Physics -> Rapier -> Fluid -> Fluid Particle Radius 2D`. By default it's set to 20. Note that setting this to a smaller value means you will need more particles to simulate the water, and depending on size of water could result in a bad performance.
67.8 KB
Loading
67.5 KB
Loading
11.8 KB
Loading
126 KB
Loading
140 KB
Loading
2.1 MB
Loading
108 KB
Loading
23.5 KB
Loading
Loading
29.1 KB
Loading
1.92 MB
Loading
94 KB
Loading
Loading
Loading
972 KB
Loading
1.15 MB
Loading
1.19 MB
Loading
99.5 KB
Loading
Loading
54.6 KB
Loading
38.2 KB
Loading
354 KB
Loading
224 KB
Loading

static/img/intro/github-releases.png

199 KB
Loading

0 commit comments

Comments
 (0)