using half floats (modified gpu.js) and bloom shader

RobinKa · May 5, 2020 · 4057bd8 · 4057bd8
1 parent 3dd0b7e
commit 4057bd8
Show file tree

Hide file tree

Showing 7 changed files with 362 additions and 159 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -4,18 +4,18 @@
   "private": true,
   "homepage": "https://cemsim.com",
   "dependencies": {
-    "@types/jest": "24.0.19",
-    "@types/node": "12.11.1",
+    "@types/jest": "^24.9.1",
+    "@types/node": "^12.12.37",
     "@types/pako": "^1.0.1",
-    "@types/react": "16.9.9",
-    "@types/react-dom": "16.9.2",
-    "gpu.js": "git+https://github.com/gpujs/gpu.js.git#ab7510303260067568d395fcb398420a3986bd76",
-    "pako": "^1.0.10",
-    "react": "^16.10.2",
-    "react-dom": "^16.10.2",
+    "@types/react": "^16.9.34",
+    "@types/react-dom": "^16.9.7",
+    "gpu.js": "git+https://github.com/gpujs/gpu.js.git#5397186a7ae1e901f504f7682be684cc5572d2c5",
+    "pako": "^1.0.11",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
     "react-scripts": "^3.4.1",
     "react-spinners": "^0.6.1",
-    "typescript": "3.6.4"
+    "typescript": "^3.8.3"
   },
   "scripts": {
     "start": "react-scripts start",

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,5 +1,5 @@
 import React, { useRef, useCallback, useEffect, useState, useMemo } from 'react'
-import { GPU, GPUMode, GPUInternalMode, KernelFunction } from "gpu.js"
+import { GPU, GPUMode, GPUInternalMode, KernelFunction, Texture } from "gpu.js"
 import { FDTDSimulator, makeDrawSquareInfo, makeDrawCircleInfo, DrawShapeType } from "./simulator"
 import { CollapsibleContainer, SettingsComponent, ExamplesComponent, ImageButton, ShareComponent, MaterialBrushMenu, SignalBrushMenu } from './components'
 import { toggleFullScreen, clamp, QualityPreset } from './util'
@@ -21,12 +21,18 @@ import { MaterialMap, signalSourceToDescriptor, descriptorToSignalSource } from
 import { BounceLoader } from "react-spinners"
 
 function getGpuMode(): GPUMode | GPUInternalMode {
-    if (GPU.isSinglePrecisionSupported) {
+    return "webgl"
+
+    try {
         if (GPU.isWebGL2Supported) {
             return "webgl2"
         } else if (GPU.isWebGLSupported) {
             return "webgl"
         }
+    } catch {
+        // Checking for support seems to fail completely
+        // on some browsers like Brave which try to prevent
+        // giving out bits of tracking information aggressively.
     }
 
     return "cpu"
@@ -103,13 +109,85 @@ function calculateGridSize(gridSizeLongest: number, canvasSize: [number, number]
 }
 
 const makeRenderSimulatorCanvas = (gpu: GPU, canvasSize: [number, number]) => {
-    const funcs: KernelFunction[] = [k.getAt]
+    const funcs: KernelFunction<any>[] = [k.isOutOfBounds]
     if (gpuMode === "cpu") {
         funcs.push(k.nativeSmoothStep)
     }
 
-    const kernel = gpuMode !== "cpu" ? gpu.createKernel(k.drawGpu) : gpu.createKernel(k.drawCpu)
-    return kernel.setOutput(canvasSize).setGraphical(true).setFunctions(funcs).setWarnVarUsage(false).setPrecision("unsigned").setDynamicOutput(true).setDynamicArguments(true)
+    const renderElectric = gpu.createKernel(k.renderElectricEnergy)
+        .setOutput(canvasSize).setFunctions(funcs)
+        .setDynamicOutput(true).setDynamicArguments(true)
+        .setTactic("precision").setPrecision("single").setPipeline(true)
+
+    const renderMagnetic = gpu.createKernel(k.renderElectricEnergy)
+        .setOutput(canvasSize).setFunctions(funcs)
+        .setDynamicOutput(true).setDynamicArguments(true)
+        .setTactic("precision").setPrecision("single").setPipeline(true)
+
+    const renderBloomExtractEl = gpu.createKernel(k.bloomExtract)
+        .setOutput(canvasSize)
+        .setDynamicOutput(true).setDynamicArguments(true)
+        .setTactic("precision").setPrecision("single").setPipeline(true)
+
+    const renderBloomExtractMag = gpu.createKernel(k.bloomExtract)
+        .setOutput(canvasSize)
+        .setDynamicOutput(true).setDynamicArguments(true)
+        .setTactic("precision").setPrecision("single").setPipeline(true)
+
+    const vertBlur = gpu.createKernel(k.blurVertical)
+        .setOutput(canvasSize).setPipeline(true)
+        .setDynamicOutput(true).setDynamicArguments(true)
+        .setTactic("precision").setPrecision("single")
+
+    const horBlurEl = gpu.createKernel(k.blurHorizontal)
+        .setOutput(canvasSize).setPipeline(true)
+        .setDynamicOutput(true).setDynamicArguments(true)
+        .setTactic("precision").setPrecision("single")
+
+    const horBlurMag = gpu.createKernel(k.blurHorizontal)
+        .setOutput(canvasSize).setPipeline(true)
+        .setDynamicOutput(true).setDynamicArguments(true)
+        .setTactic("precision").setPrecision("single")
+
+    const draw = gpu.createKernel(k.drawGpu)
+        .setOutput(canvasSize).setGraphical(true)
+        .setFunctions(funcs).setDynamicOutput(true)
+        .setDynamicArguments(true).setTactic("precision")
+        .setPrecision("unsigned")
+
+    const kernels = [
+        renderElectric, renderMagnetic,
+        renderBloomExtractEl, renderBloomExtractMag,
+        draw, vertBlur, horBlurEl, horBlurMag
+    ]
+
+    const blurCount = 5
+
+    function render(eX: Texture, eY: Texture, eZ: Texture, mX: Texture, mY: Texture, mZ: Texture,
+        permittivity: Texture, permeability: Texture, conductivity: Texture,
+        gx: number, gy: number, cellSize: number) {
+        const electricEnergy = renderElectric(eX, eY, eZ, gx, gy, cellSize)
+        const magneticEnergy = renderMagnetic(mX, mY, mZ, gx, gy, cellSize)
+        let electricExBlurred: Texture = renderBloomExtractEl(electricEnergy) as Texture
+        let magneticExBlurred: Texture = renderBloomExtractMag(magneticEnergy) as Texture
+        for (let i = 0; i < blurCount; i++) {
+            electricExBlurred = vertBlur(electricExBlurred) as Texture
+            electricExBlurred = horBlurEl(electricExBlurred) as Texture
+            magneticExBlurred = vertBlur(magneticExBlurred) as Texture
+            magneticExBlurred = horBlurMag(magneticExBlurred) as Texture
+        }
+
+        draw(electricEnergy, magneticEnergy, electricExBlurred, magneticExBlurred, permittivity, permeability, conductivity, gx, gy);
+    }
+
+    return {
+        render: render,
+        adjustSize: (size: [number, number]) => {
+            for (let kernel of kernels) {
+                kernel.setOutput(size)
+            }
+        }
+    }
 }
 
 export default function () {
@@ -189,7 +267,7 @@ export default function () {
     // Update render sim output size
     useEffect(() => {
         if (renderSim) {
-            renderSim.setOutput(canvasSize)
+            renderSim.adjustSize(canvasSize)
         }
     }, [renderSim, canvasSize])
 
@@ -287,6 +365,14 @@ export default function () {
         return undefined
     }, [simStep, dt, simulationSpeed])
 
+    useEffect(() => {
+        // TODO: Repaint existing material onto new canvas instead of resetting.
+        if (simulator !== null) {
+            simulator.resetFields()
+            simulator.resetMaterials()
+        }
+    }, [canvasSize, simulator])
+
     const drawStep = useCallback(() => {
         if (simulator && renderSim) {
             if (drawCanvasRef.current) {
@@ -297,9 +383,9 @@ export default function () {
 
             const simData = simulator.getData()
 
-            renderSim(simData.electricField[0].values, simData.electricField[1].values, simData.electricField[2].values,
+            renderSim.render(simData.electricField[0].values, simData.electricField[1].values, simData.electricField[2].values,
                 simData.magneticField[0].values, simData.magneticField[1].values, simData.magneticField[2].values,
-                simData.permittivity.values, simData.permeability.values, simData.conductivity.values, gridSize, cellSize)
+                simData.permittivity.values, simData.permeability.values, simData.conductivity.values, gridSize[0], gridSize[1], cellSize)
         }
     }, [simulator, renderSim, gridSize, cellSize, resolutionScale, drawCanvasRef])