feat(renderer): add ability to render a height map & add camera contr…

…ols (#159)

src/components/ParametersBar.tsx

@@ -141,6 +141,20 @@ export default function ParametersBar(props: {
     ControlDifficulty.Expert,
   );
 
+  const setParams = props.setParams;
+  const [renderHeightMap, setRenderHeightMap] = useState(false);
+  const [isCameraControlMode, setIsCameraControlMode] = useState(false);
+
+  useEffect(() => {
+    setParams((prev) => {
+      return {
+        ...prev,
+        renderHeightMap,
+        isCameraControlMode,
+      };
+    });
+  }, [renderHeightMap, isCameraControlMode, setParams]);
+
   if (isPaneVisible) {
     return (
       <Container direction="vertical" size={space}>
@@ -186,6 +200,49 @@ export default function ParametersBar(props: {
         {/* add controls to be shown to both here */}
         <SimulationColour setParams={props.setParams} />
 
+        <Row gutter={16}>
+          <ParameterLabel title="Rendering mode"></ParameterLabel>
+        </Row>
+        <Row gutter={16}>
+          <Col className="gutter-row" span={12}>
+            <ParameterButton
+              label="Flat surface"
+              onClick={() => {
+                setIsCameraControlMode(false);
+                setRenderHeightMap(false);
+              }}
+            />
+          </Col>
+          <Col className="gutter-row" span={12}>
+            <ParameterButton
+              label="Height map"
+              onClick={() => {
+                setRenderHeightMap(true);
+              }}
+            />
+          </Col>
+        </Row>
+        <Row gutter={16} style={renderHeightMap ? {} : { display: 'none' }}>
+          <ParameterLabel title="Current Control"></ParameterLabel>
+        </Row>
+        <Row gutter={16} style={renderHeightMap ? {} : { display: 'none' }}>
+          <Col className="gutter-row" span={12}>
+            <ParameterButton
+              label="Apply force"
+              onClick={() => {
+                setIsCameraControlMode(false);
+              }}
+            />
+          </Col>
+          <Col className="gutter-row" span={12}>
+            <ParameterButton
+              label="Spin camera"
+              onClick={() => {
+                setIsCameraControlMode(true);
+              }}
+            />
+          </Col>
+        </Row>
         {/* choose initial model */}
         <Dropdown menu={{ items, onClick }}>
           <DropdownMenu

src/components/Simulation.tsx

@@ -7,6 +7,7 @@ import {
 import type React from 'react';
 import { useEffect, useMemo, useRef } from 'react';
 import vertexShader from '../shaders/vert.glsl';
+import vertexShaderForHeightMap from '../shaders/vert_height.glsl';
 import fragmentShader from '../shaders/frag.glsl';
 
 // WebGPU imports
@@ -17,6 +18,9 @@ class SimulationParams {
   // render options
   densityLowColour: t.Color = new t.Color('blue');
   densityHighColour: t.Color = new t.Color('red');
+
+  renderHeightMap: boolean = false;
+  isCameraControlMode: boolean = false;
 }
 
 // we will store the parameters in an interface explicitly so
@@ -79,8 +83,15 @@ function DiffusionPlane(
   // create the shader
   const shaderMat = useMemo(() => {
     const shaderMat = new t.ShaderMaterial();
-    shaderMat.vertexShader = applyConfigToShader(vertexShader as string);
+    if (props.params.renderHeightMap) {
+      shaderMat.vertexShader = applyConfigToShader(
+        vertexShaderForHeightMap as string,
+      );
+    } else {
+      shaderMat.vertexShader = applyConfigToShader(vertexShader as string);
+    }
     shaderMat.fragmentShader = applyConfigToShader(fragmentShader as string);
+    shaderMat.side = t.DoubleSide;
 
     // provide a dummy density field first
 
@@ -103,13 +114,19 @@ function DiffusionPlane(
     };
 
     return shaderMat;
-  }, [props.params.densityHighColour, props.params.densityLowColour]);
+  }, [
+    props.params.densityHighColour,
+    props.params.densityLowColour,
+    props.params.renderHeightMap,
+  ]);
 
   // HOOKS
 
   useFrame((state) => {
+    if (disableInteraction) return;
     // potential performance issue?
     state.camera.setRotationFromAxisAngle(new t.Vector3(1, 0, 0), -Math.PI / 2);
+    state.camera.position.set(0, 10, 0);
     ref.current.lookAt(0, 99, 0);
   });
 
@@ -125,6 +142,8 @@ function DiffusionPlane(
     // update the density uniforms every time
     // output is received
     function output(data: Float32Array): void {
+      // create a copy to prevent modifying original data
+      data = data.slice(0);
       const param: Record<string, number> = {
         densityRangeHigh: parseFloat(renderConfig.densityRangeHigh),
         densityRangeLow: parseFloat(renderConfig.densityRangeLow),

src/pages/index.tsx

@@ -12,6 +12,7 @@ import {
   type OutgoingMessage,
 } from '../workers/modelWorkerMessage';
 import { type ModelSave } from '../services/model/modelService';
+import { OrbitControls } from '@react-three/drei';
 import RestorePopup from '../components/RestoreComponents/restorePopUp';
 
 const SimulatorContainer = styled.div`
@@ -113,8 +114,12 @@ export default function Home(props: IndexProp): React.ReactElement {
           }}
         >
           <ambientLight />
+          <OrbitControls
+            target={[0, 0, 0]}
+            enabled={simulationParams.isCameraControlMode}
+          ></OrbitControls>
           <DiffusionPlane
-            disableInteraction={false}
+            disableInteraction={simulationParams.isCameraControlMode}
             position={[0, 0, 0]}
             params={simulationParams}
             worker={worker}

src/shaders/vert_height.glsl

@@ -0,0 +1,29 @@
+// VERTEX SHADER
+varying lowp vec4 vColor;
+
+uniform sampler2D density;
+uniform vec3 hiCol;
+uniform vec3 lowCol;
+
+vec4 getColourFromDensity(float density)
+{
+  return vec4(mix(lowCol, hiCol, density), 1.0);
+}
+
+vec2 getCoordFromPoint(vec3 pos)
+{
+  float x = ((pos.x + (${width} / 2.0)) / ${width});
+  float y = ((-pos.y + (${height} / 2.0)) / ${height});
+  return vec2(x, y);
+}
+
+void main(void)
+{
+  highp vec2 vTextureCoord = getCoordFromPoint(position);
+  vColor = getColourFromDensity(texture2D(density, vTextureCoord).r);
+
+	vec3 changedPosition = position;
+  changedPosition.z = texture2D(density, vTextureCoord).r;
+
+  gl_Position = projectionMatrix * modelViewMatrix * vec4( changedPosition, 1.0 );
+}