iOS (#10)

* Update actions
* `bump.yml` should only trigger on non version updating pushes
* `build.yml` should cache `node_modules`

* Format option in textures

* Use intermediary texture to render

* GUI tweaking

* Update build.yml

Small oversight in caching. I think this fixes it

* Revert "Use intermediary texture to render"

This reverts commit 3789565.

It was discovered that the main issue was not rendering to a floating point texture, instead the issue was that it was a floating point texture and not a half float texture...
By reverting this commit a solution to instead use a half float textures will be used

* Revert "Format option in textures"

This reverts commit b9e6fb9.

See commit b61e604

* New default params

* Use half float textures

This allows for the simulation to be ran on more devices, expecially as iOS devices apparently cannot render to floating point textures, but they can render to half float textures.
No loss in quality is detected, but some inprecision can be expected as the simulation is technically less precise.
Half float textures has been implemented for both webgl and webgl2.

.github/workflows/build.yml

@@ -30,6 +30,13 @@ jobs:
     - name: Get wasm-pack
       uses: jetli/wasm-pack-action@v0.4.0
 
+    - name: Node cache
+      uses: actions/cache@v4
+      id: npm-cache
+      with:
+        path: ./node_modules/
+        key: ${{ runner.os }}-node_modules
+
     - name: Build test
       run: |
         wasm-pack build --verbose

.github/workflows/bump.yml

@@ -1,6 +1,13 @@
 name: Bump Version
 
 on:
+  push:
+    branches:
+      - 'main'
+    paths-ignore:
+      - 'package.json'
+      - 'Cargo.toml'
+
   workflow_dispatch:
     inputs:
       release_type:

Cargo.toml

@@ -21,6 +21,7 @@ features = [
     "Document",
     "Window",
     "HtmlCanvasElement",
+    "OesTextureHalfFloat",
     "WebGlRenderingContext",
     "WebGl2RenderingContext",
     "WebGlProgram",

src/app/index.ts

@@ -8,10 +8,10 @@ const params = {
     mode: Mode.DYE,
     simResolution: isMobile() ? Resolution.EIGHT : Resolution.FOUR,
     dyeResolution: isMobile() ? Resolution.FOUR : Resolution.TWO,
-    pointerRadius: 0.2,
+    pointerRadius: isMobile() ? 0.4 : 0.2,
     pointerStrength: 10.0,
-    viscosity: 1.0,
-    dissipation: 1.0,
+    viscosity: 0.5,
+    dissipation: 2.0,
     curl: 0.25,
     pressure: 0.8,
     color: defaultColor,
@@ -93,7 +93,7 @@ const createGUI = () => {
         .onFinishChange(resizeCanvas);
     simulationFolder.add(params, "viscosity", 0.0, 5.0, 0.01).name("Viscosity");
     simulationFolder.add(params, "dissipation", 0.0, 5.0, 0.01).name("Dye diffusion");
-    simulationFolder.add(params, "curl", 0.0, 1.0, 0.01).name("Vorticity amount");
+    simulationFolder.add(params, "curl", 0.0, 2.0, 0.01).name("Vorticity amount");
     simulationFolder.add(params, "pressure", 0.0, 1.0, 0.01).name("Pressure");
     simulationFolder.open();
 

src/app/style.css

@@ -46,8 +46,7 @@ canvas {
 
 ul:not(.closed) .link {
     font: 20px/27px "Trebuchet MS", sans-serif !important;
-    padding: 4px !important;
-    padding-left: 8px !important;
+    padding: 4px 4px 4px 12px !important;
     margin-left: 40% !important;
     border-left: 8px solid rgb(230, 29, 95) !important;
     color: rgb(245, 245, 245) !important;

src/renderer.rs

@@ -32,9 +32,9 @@ impl Renderer {
     ) -> Result<Renderer, JsValue> {
         let gl = gl.dyn_into::<WebGlRenderingContext>().unwrap();
 
-        gl.get_extension("OES_texture_float")?;
-        gl.get_extension("OES_texture_float_linear")?;
-        gl.get_extension("WEBGL_color_buffer_float")?;
+        gl.get_extension("OES_texture_half_float")?;
+        gl.get_extension("OES_texture_half_float_linear")?;
+        gl.get_extension("EXT_color_buffer_half_float")?;
         gl.disable(WebGlRenderingContext::BLEND);
 
         let copy_program = ShaderProgram::new_webgl(
@@ -684,7 +684,6 @@ impl Renderer {
     ) -> Result<Renderer, JsValue> {
         let gl = gl.dyn_into::<WebGl2RenderingContext>().unwrap();
 
-        gl.get_extension("OES_texture_float_linear")?;
         gl.get_extension("EXT_color_buffer_float")?;
         gl.disable(WebGl2RenderingContext::BLEND);
 

src/textures.rs

@@ -4,6 +4,7 @@ use web_sys::{
     WebGl2RenderingContext,
     WebGlTexture,
     WebGlFramebuffer,
+    OesTextureHalfFloat,
 };
 use std::mem;
 use crate::Renderer;
@@ -49,7 +50,7 @@ impl TextureFramebuffer {
             WebGlRenderingContext::CLAMP_TO_EDGE as i32,
         );
 
-        let data = unsafe { js_sys::Float32Array::view(&vec![0.0; (width * height * 4) as usize]) };
+        let data = unsafe { js_sys::Uint16Array::view(&vec![0; (width * height * 4) as usize]) };
         gl.tex_image_2d_with_i32_and_i32_and_i32_and_format_and_type_and_opt_array_buffer_view(
             WebGlRenderingContext::TEXTURE_2D,
             0,
@@ -58,7 +59,7 @@ impl TextureFramebuffer {
             height as i32,
             0,
             WebGlRenderingContext::RGBA,
-            WebGlRenderingContext::FLOAT,
+            OesTextureHalfFloat::HALF_FLOAT_OES,
             Some(&data),
         )?;
 
@@ -111,16 +112,16 @@ impl TextureFramebuffer {
             WebGl2RenderingContext::CLAMP_TO_EDGE as i32,
         );
 
-        let data = unsafe { js_sys::Float32Array::view(&vec![0.0; (width * height * 4) as usize]) };
+        let data = unsafe { js_sys::Uint16Array::view(&vec![0; (width * height * 4) as usize]) };
         gl.tex_image_2d_with_i32_and_i32_and_i32_and_format_and_type_and_opt_array_buffer_view(
             WebGl2RenderingContext::TEXTURE_2D,
             0,
-            WebGl2RenderingContext::RGBA32F as i32,
+            WebGl2RenderingContext::RGBA16F as i32,
             width as i32,
             height as i32,
             0,
             WebGl2RenderingContext::RGBA,
-            WebGl2RenderingContext::FLOAT,
+            WebGl2RenderingContext::HALF_FLOAT,
             Some(&data),
         )?;