From 499c127b93d05fc7195f803e44111edb01be3607 Mon Sep 17 00:00:00 2001 From: wilzet <129424713+wilzet@users.noreply.github.com> Date: Mon, 26 Feb 2024 20:19:47 +0100 Subject: [PATCH] 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 3789565ac7b4c6f6041ccb685233208f9d0c7c18. 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 b9e6fb950bd60f46fc4f9ea106164b51e416eef5. 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 | 7 +++++++ .github/workflows/bump.yml | 7 +++++++ Cargo.toml | 1 + src/app/index.ts | 8 ++++---- src/app/style.css | 3 +-- src/renderer.rs | 7 +++---- src/textures.rs | 11 ++++++----- 7 files changed, 29 insertions(+), 15 deletions(-) diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml index 12fde68..a1a38a0 100644 --- a/.github/workflows/build.yml +++ b/.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 diff --git a/.github/workflows/bump.yml b/.github/workflows/bump.yml index 2ba9de9..de904c6 100644 --- a/.github/workflows/bump.yml +++ b/.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: diff --git a/Cargo.toml b/Cargo.toml index acf74d9..f5d3bbf 100644 --- a/Cargo.toml +++ b/Cargo.toml @@ -21,6 +21,7 @@ features = [ "Document", "Window", "HtmlCanvasElement", + "OesTextureHalfFloat", "WebGlRenderingContext", "WebGl2RenderingContext", "WebGlProgram", diff --git a/src/app/index.ts b/src/app/index.ts index 490f997..71bdc09 100644 --- a/src/app/index.ts +++ b/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(); diff --git a/src/app/style.css b/src/app/style.css index 80226ac..2ed062c 100644 --- a/src/app/style.css +++ b/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; diff --git a/src/renderer.rs b/src/renderer.rs index 8f8cb16..f3b43a0 100644 --- a/src/renderer.rs +++ b/src/renderer.rs @@ -32,9 +32,9 @@ impl Renderer { ) -> Result { let gl = gl.dyn_into::().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 { let gl = gl.dyn_into::().unwrap(); - gl.get_extension("OES_texture_float_linear")?; gl.get_extension("EXT_color_buffer_float")?; gl.disable(WebGl2RenderingContext::BLEND); diff --git a/src/textures.rs b/src/textures.rs index ebbbdb4..13e9fbc 100644 --- a/src/textures.rs +++ b/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), )?;