Add force-half-precision parameter

readme.md

@@ -32,6 +32,9 @@ Demo at [jons.website/projects/reaction-diffusion](https://jons.website/projects
         - This is a float value greater than 0. Higher numbers mean the peaks are closer together.
         - If you don't set this value, a circular non-random seed is used instead.
         - A good way to debug this is to set the time scale to 0. That way, the simulation will stay with whatever the initial seed is.
+    * For speed, you can force half-precision float precision by setting `force-half-precision="true"`.
+        - `<div class="reaction-diffusion-container" force-half-precision="true"></div>`
+        - Valid values are "true" or "false". If you don't specify, it'll default to "false".
 
 ## Building
 

src/rd-renderer.js

@@ -43,7 +43,7 @@ export class ReactionDiffusionRenderer {
         this.CheckWebGLSupport();
 
         // Configure renderer based on available texture float precision
-        if (this.DetectTextureFloat()) {
+        if (this.DetectTextureFloat() && !this.forceHalfPrecision) {
             console.log("Using full-precision float textures");
             this.imageType = THREE.FloatType;
 
@@ -110,6 +110,10 @@ export class ReactionDiffusionRenderer {
             this.allowInteraction = optionalParams.allowInteraction;
             console.log(`Using allow-interaction value from HTML attributes = ${optionalParams.allowInteraction}`);
         }
+        if (optionalParams.forceHalfPrecision != null) {
+            this.forceHalfPrecision = optionalParams.forceHalfPrecision
+            console.log(`Using force-half-precision value from HTML attributes = ${optionalParams.forceHalfPrecision}`);
+        }
 
         this.ReformRenderTargets(width, height);
         this.Reset();

src/reaction-diffusion.js

@@ -86,6 +86,9 @@ export class ReactionDiffusion {
         let allowInteraction = container.getAttribute("allow-interaction");
         if (allowInteraction) params["allowInteraction"] = allowInteraction == "true";
 
+        let forceHalfPrecision = container.getAttribute("force-half-precision");
+        if (forceHalfPrecision) params["forceHalfPrecision"] = forceHalfPrecision == "true";
+
         return params;
     }