cache background

Author: RobinKa

Diff for: src/em/index.ts

@@ -31,7 +31,7 @@ export function createEM(canvas: HTMLCanvasElement, gridSize: [number, number],
     cellSize: number, reflectiveBoundary: boolean, dt: number): EMState {
     const regl = createReglFromCanvas(canvas)
 
-    const { render, adjustSize } = makeRenderSimulatorCanvas(regl, gridSize)
+    const { render, adjustCanvasSize, adjustGridSize } = makeRenderSimulatorCanvas(regl, [canvas.width, canvas.height], gridSize)
     const sim: Simulator = new FDTDSimulator(regl, gridSize, cellSize, reflectiveBoundary, dt)
 
     const renderToCanvas = (showElectric: boolean, showMagnetic: boolean) => {
@@ -53,15 +53,20 @@ export function createEM(canvas: HTMLCanvasElement, gridSize: [number, number],
         sim.stepElectric(dt)
     }
 
+    const setGridSize = (newGridSize: [number, number]) => {
+        sim.setGridSize(newGridSize)
+        adjustGridSize(newGridSize)
+    }
+
     return {
         renderToCanvas: renderToCanvas,
-        adjustCanvasSize: adjustSize,
+        adjustCanvasSize: adjustCanvasSize,
         stepSim: stepSim,
         injectSignal: sim.injectSignal,
         getSources: () => sources,
         setSources: (newSources: SignalSource[]) => sources = newSources,
-        setGridSize: (newGridSize: [number, number]) => sim.setGridSize(newGridSize),
-        setCellSize: (newCellSize: number) => sim.setCellSize(newCellSize),
+        setGridSize: setGridSize,
+        setCellSize: sim.setCellSize,
         getTime: () => sim.getData().time,
         setReflectiveBoundary: sim.setReflectiveBoundary,
         loadMaterialFromComponents: sim.loadMaterialFromComponents,

Diff for: src/em/kernels/rendering.ts

@@ -57,26 +57,16 @@ export const blurDirectional = `
     }
 `
 
-export const draw = `
+export const renderBackground = `
     precision highp float;
 
-    uniform sampler2D energyTexture;
-    uniform sampler2D bloomTexture;
-    uniform sampler2D materialTexture;
     uniform vec2 gridSize;
 
     varying vec2 uv;
 
     const float sqrtTwoPi = 2.50662827463;
 
     void main() {
-        vec2 energy = texture2D(energyTexture, uv).rg;
-        vec2 bloom = texture2D(bloomTexture, uv).rg;
-        vec3 material = texture2D(materialTexture, uv).rgb;
-
-        vec2 pValues = 2.0 / (1.0 + exp(-0.5 * (material.rg - 1.0))) - 1.0;
-        float cValue = material.b / 10.0;
-
         vec2 tileFactor = gridSize;
 
         // Repeat -0.5..+0.5 sawtooth for as many cells as we have
@@ -94,11 +84,41 @@ export const draw = `
         float bgPermittivity = -smoothstep(0.0, 1.0, pCircleDists.x);
         float bgPermeability = -smoothstep(0.0, 1.0, pCircleDists.y);
 
-        bgPermittivity = pValues.x >= 0.1 ? 1.0 + bgPermittivity : bgPermittivity;
-        bgPermeability = pValues.y >= 0.1 ? 1.0 + bgPermeability : bgPermeability;
+        gl_FragColor = vec4(
+            bgPermittivity,
+            bgPermeability,
+            dConductivity.x,
+            dConductivity.y
+        );
+    }
+`
+
+export const draw = `
+    precision highp float;
+
+    uniform sampler2D energyTexture;
+    uniform sampler2D bloomTexture;
+    uniform sampler2D materialTexture;
+    uniform sampler2D backgroundTexture;
+
+    varying vec2 uv;
+
+    const float sqrtTwoPi = 2.50662827463;
+
+    void main() {
+        vec2 energy = texture2D(energyTexture, uv).rg;
+        vec2 bloom = texture2D(bloomTexture, uv).rg;
+        vec3 material = texture2D(materialTexture, uv).rgb;
+        vec4 background = texture2D(backgroundTexture, uv);
+
+        vec2 pValues = 2.0 / (1.0 + exp(-0.5 * (material.rg - 1.0))) - 1.0;
+        float cValue = material.b / 10.0;
+
+        float bgPermittivity = pValues.x >= 0.1 ? 1.0 + background.r : background.r;
+        float bgPermeability = pValues.y >= 0.1 ? 1.0 + background.g : background.g;
         float backgroundConductivity = 0.5 * (cValue >= 0.0 ?
-            cValue * smoothstep(0.0, 1.0, dConductivity.x) :
-            -cValue * smoothstep(0.0, 1.0, dConductivity.y)
+            cValue * smoothstep(0.0, 1.0, background.b) :
+            -cValue * smoothstep(0.0, 1.0, background.a)
         );
 
         gl_FragColor = vec4(

Diff for: src/em/rendering.ts

@@ -17,7 +17,7 @@ export function createReglFromCanvas(canvas: HTMLCanvasElement) {
     })
 }
 
-export function makeRenderSimulatorCanvas(regl: Regl, canvasSize: [number, number]) {
+export function makeRenderSimulatorCanvas(regl: Regl, canvasSize: [number, number], gridSize: [number, number]) {
     const filter = regl.hasExtension("OES_texture_half_float_linear") ? "linear" : "nearest"
 
     const frameBuffers: Framebuffer2D[] = []
@@ -46,6 +46,32 @@ export function makeRenderSimulatorCanvas(regl: Regl, canvasSize: [number, numbe
 
     const fbos = [makeFrameBuffer(), makeFrameBuffer()]
     const energyFbo = makeFrameBuffer()
+    const backgroundFbo = makeFrameBuffer()
+
+    type RenderBackgroundUniforms = {
+        gridSize: [number, number]
+    }
+
+    const renderBackground = regl<RenderBackgroundUniforms, {}, RenderBackgroundUniforms>({
+        frag: k.renderBackground,
+        framebuffer: backgroundFbo,
+        uniforms: {
+            gridSize: (_, { gridSize }) => gridSize
+        },
+
+        attributes: {
+            position: [
+                [1, -1],
+                [1, 1],
+                [-1, -1],
+                [-1, 1]
+            ]
+        },
+        vert: k.vertDraw,
+        count: 4,
+        primitive: "triangle strip",
+        depth: { enable: false }
+    })
 
     type RenderEnergyUniforms = {
         brightness: number
@@ -161,7 +187,7 @@ export function makeRenderSimulatorCanvas(regl: Regl, canvasSize: [number, numbe
         energyTexture: Framebuffer2D
         bloomTexture: Framebuffer2D
         materialTexture: Framebuffer2D
-        gridSize: [number, number]
+        backgroundTexture: Framebuffer2D
     }
 
     const draw = regl<DrawUniforms, {}, DrawUniforms>({
@@ -170,7 +196,7 @@ export function makeRenderSimulatorCanvas(regl: Regl, canvasSize: [number, numbe
             energyTexture: (_, { energyTexture }) => energyTexture,
             bloomTexture: (_, { bloomTexture }) => bloomTexture,
             materialTexture: (_, { materialTexture }) => materialTexture,
-            gridSize: (_, { gridSize }) => gridSize,
+            backgroundTexture: (_, { backgroundTexture }) => backgroundTexture,
         },
 
         attributes: {
@@ -215,15 +241,24 @@ export function makeRenderSimulatorCanvas(regl: Regl, canvasSize: [number, numbe
             energyTexture: energyFbo,
             bloomTexture: fbos[0],
             materialTexture: material,
-            gridSize: gridSize
+            backgroundTexture: backgroundFbo
         })
     }
 
+    renderBackground({
+        gridSize: gridSize
+    })
+
     return {
         render: render,
-        adjustSize: (size: [number, number]) => {
+        adjustCanvasSize: (size: [number, number]) => {
             frameBuffers.forEach(fbo => fbo.resize(size[0], size[1]))
             regl.poll()
+        },
+        adjustGridSize: (gridSize: [number, number]) => {
+            renderBackground({
+                gridSize: gridSize
+            })
         }
     }
 }