Feat : Enhance Renderer

packages/utils/regl-renderer/demo-cli.js

@@ -50,9 +50,10 @@ const options = {
   camera,
   drawCommands: {
     // draw commands bootstrap themselves the first time they are run
-    drawGrid: drawCommands.drawGrid, // require('./src/rendering/drawGrid/index.js'),
-    drawAxis: drawCommands.drawAxis, // require('./src/rendering/drawAxis'),
-    drawMesh: drawCommands.drawMesh // require('./src/rendering/drawMesh/index.js')
+    drawAxis: drawCommands.drawAxis,
+    drawGrid: drawCommands.drawGrid,
+    drawLines: drawCommands.drawLines,
+    drawMesh: drawCommands.drawMesh
   },
   rendering: {
     background: [1, 1, 1, 1],

packages/utils/regl-renderer/demo-web.js

@@ -1,4 +1,4 @@
-const { prepareRender, drawCommands, cameras, entitiesFromSolids } = require('./src') // replace this with the correct import
+const { prepareRender, drawCommands, cameras, entitiesFromSolids } = require('./src')
 
 // setup demo solids data
 const demoSolids = (parameters) => {
@@ -41,9 +41,10 @@ const options = {
   camera,
   drawCommands: {
     // draw commands bootstrap themselves the first time they are run
-    drawGrid: drawCommands.drawGrid, // require('./src/rendering/drawGrid/index.js'),
-    drawAxis: drawCommands.drawAxis, // require('./src/rendering/drawAxis'),
-    drawMesh: drawCommands.drawMesh // require('./src/rendering/drawMesh/index.js')
+    drawAxis: drawCommands.drawAxis,
+    drawGrid: drawCommands.drawGrid,
+    drawLines: drawCommands.drawLines,
+    drawMesh: drawCommands.drawMesh
   },
   // data
   entities: [

packages/utils/regl-renderer/demo.html

@@ -56,8 +56,6 @@
 const perspectiveCamera = cameras.perspective
 const orbitControls = controls.orbit
 
-const renderRate = 10 // number of renders per second
-
 const containerElement = document.getElementById("jscad")
 
 const width = containerElement.clientWidth
@@ -108,8 +106,9 @@
 const renderOptions = {
   camera: state.camera,
   drawCommands: {
-    drawGrid: drawCommands.drawGrid,
     drawAxis: drawCommands.drawAxis,
+    drawGrid: drawCommands.drawGrid,
+    drawLines: drawCommands.drawLines,
     drawMesh: drawCommands.drawMesh
   },
   // define the visual content
@@ -121,14 +120,25 @@
 }
 
 // the heart of rendering, as themes, controls, etc change
-prevTimestamp = 0
+let updateView = true
+
+const doRotatePanZoom = () => {
+  if (rotateDelta[0] || rotateDelta[1]) {
+    const updated = orbitControls.rotate({ controls: state.controls, camera: state.camera, speed: rotateSpeed }, rotateDelta)
+    state.controls = { ...state.controls, ...updated.controls }
+    updateView = true
+    rotateDelta = [0, 0]
+  }
+}
+
 const updateAndRender = (timestamp) => {
-  const elaspe = timestamp - prevTimestamp
-  if (elaspe > (1000 / renderRate)) {
-    prevTimestamp = timestamp
+  doRotatePanZoom()
 
+  if (updateView) {
     const updates = orbitControls.update({ controls: state.controls, camera: state.camera })
     state.controls = { ...state.controls, ...updates.controls }
+    updateView = state.controls.changed // for elasticity in rotate / zoom
+
     state.camera.position = updates.camera.position
     perspectiveCamera.update(state.camera)
 
@@ -137,6 +147,34 @@
   window.requestAnimationFrame(updateAndRender)
 }
 window.requestAnimationFrame(updateAndRender)
+
+// convert HTML events (mouse movement) to viewer changes
+let lastX = 0
+let lastY = 0
+
+const rotateSpeed = 0.002
+let rotateDelta = [0, 0]
+
+const enterHandler = (ev) => {
+  lastX = ev.pageX
+  lastY = ev.pageY
+
+  ev.preventDefault()
+}
+
+const moveHandler = (ev) => {
+  rotateDelta[0] = ev.pageX - lastX
+  rotateDelta[1] = lastY - ev.pageY
+
+  lastX = ev.pageX
+  lastY = ev.pageY
+
+  ev.preventDefault()
+}
+
+containerElement.onpointerenter = enterHandler
+containerElement.onpointermove = moveHandler
+
   </script>
 </body>
 </html>

packages/utils/regl-renderer/src/geometry-utils-V2/entitiesFromSolids.js

@@ -12,7 +12,7 @@ const path2ToGeometries = require('./path2ToGeometries')
 const assembleEntities = (geometries) => {
   const entities = geometries.map((geometry) => {
     const visuals = {
-      drawCmd: 'drawMesh',
+      drawCmd: geometry.type === '2d' ? 'drawLines' : 'drawMesh',
       show: true,
       transparent: geometry.isTransparent,
       useVertexColors: true

packages/utils/regl-renderer/src/geometry-utils-V2/entitiesFromSolids.test.js

@@ -29,25 +29,25 @@ test('entitiesFromSolids (various solids)', (t) => {
 
   // geom2
   t.deepEqual(entities[0].visuals, {
-    drawCmd: 'drawMesh',
+    drawCmd: 'drawLines',
     show: true,
     transparent: true,
     useVertexColors: true
   })
 
   // path2
   t.deepEqual(entities[1].visuals, {
-    drawCmd: 'drawMesh',
+    drawCmd: 'drawLines',
     show: true,
     transparent: false,
     useVertexColors: true
   })
 
   // geom3
-  t.deepEqual(entities[1].visuals, {
+  t.deepEqual(entities[2].visuals, {
     drawCmd: 'drawMesh',
     show: true,
-    transparent: false,
+    transparent: true,
     useVertexColors: true
   })
 })

packages/utils/regl-renderer/src/geometry-utils-V2/path2ToGeometries.js

@@ -44,7 +44,7 @@ const path2ToGeometries = (options, solid) => {
     }
     // assemble the geometry
     const normals = positions.map((x) => [0, 0, -1])
-    const indices = positions.map((x, i) => i) // FIXME: temporary, not really needed, need to change drawMesh
+    const indices = positions.map((x, i) => i) // FIXME: temporary, not really needed, need to change drawLines
     const transforms = solid.transforms ? mat4.clone(solid.transforms) : mat4.create()
 
     // FIXME positions should be Float32Array buffers to eliminate another conversion

packages/utils/regl-renderer/src/index.js

@@ -4,7 +4,8 @@ module.exports = {
     // draw commands should bootstrap themselves the first time they are run
     drawGrid: require('./rendering/commands/drawGrid/multi.js'),
     drawAxis: require('./rendering/commands/drawAxis'),
-    drawMesh: require('./rendering/commands/drawMesh/index.js')
+    drawMesh: require('./rendering/commands/drawMesh'),
+    drawLines: require('./rendering/commands/drawLines')
   },
   cameras: {
     camera: require('./cameras/camera'),

packages/utils/regl-renderer/src/rendering/commands/drawLines/colorOnlyShaders.js

@@ -0,0 +1,9 @@
+const vColorFrag = `
+precision mediump float;
+uniform vec4 ucolor;
+
+void main () {
+  gl_FragColor = ucolor;
+}
+`
+module.exports = { frag: vColorFrag }

packages/utils/regl-renderer/src/rendering/commands/drawLines/index.js

@@ -0,0 +1,44 @@
+const mat4 = require('gl-mat4')
+
+const { meshColor } = require('../../renderDefaults')
+
+const drawLines = (regl, params = {}) => {
+  const defaults = {
+    color: meshColor,
+    geometry: undefined
+  }
+  let { geometry, color } = Object.assign({}, defaults, params)
+
+  if ('color' in geometry) color = geometry.color
+
+  const hasIndices = !!(geometry.indices && geometry.indices.length > 0)
+  const hasNormals = !!(geometry.normals && geometry.normals.length > 0)
+
+  // console.log('type', geometry.type, 'color', color, hasIndices, hasNormals)
+
+  let commandParams = {
+    primitive: 'lines',
+    vert: require('./meshShaders').vert,
+    frag: require('./colorOnlyShaders').frag,
+
+    uniforms: {
+      model: (context, props) => props.model || geometry.transforms || mat4.create(),
+      ucolor: (context, props) => (props && props.color) ? props.color : color
+    },
+    attributes: {
+      position: regl.buffer({ usage: 'static', type: 'float', data: geometry.positions })
+    }
+  }
+
+  if (hasIndices) {
+    commandParams.elements = regl.elements({ usage: 'static', type: 'uint16', data: geometry.indices })
+  }
+
+  if (hasNormals) {
+    commandParams.attributes.normal = regl.buffer({ usage: 'static', type: 'float', data: geometry.normals })
+  }
+
+  return regl(commandParams)
+}
+
+module.exports = drawLines

packages/utils/regl-renderer/src/rendering/commands/drawLines/meshShaders.js

@@ -0,0 +1,54 @@
+const meshFrag = `
+precision mediump float;
+varying vec3 surfaceNormal;
+uniform float ambientLightAmount;
+uniform float diffuseLightAmount;
+uniform vec4 ucolor;
+uniform vec3 lightDirection;
+uniform vec3 opacity;
+
+varying vec4 _worldSpacePosition;
+
+uniform vec2 printableArea;
+
+vec4 errorColor = vec4(0.15, 0.15, 0.15, 0.3);
+
+void main () {
+  vec4 depth = gl_FragCoord;
+
+  float v = 0.8; // shadow value
+  vec4 endColor = ucolor;
+
+  vec3 ambient = ambientLightAmount * endColor.rgb;
+  float cosTheta = dot(surfaceNormal, lightDirection);
+  vec3 diffuse = diffuseLightAmount * endColor.rgb * clamp(cosTheta , 0.0, 1.0 );
+
+  float cosTheta2 = dot(surfaceNormal, vec3(-lightDirection.x, -lightDirection.y, lightDirection.z));
+  vec3 diffuse2 = diffuseLightAmount * endColor.rgb * clamp(cosTheta2 , 0.0, 1.0 );
+
+  gl_FragColor = vec4((ambient + diffuse + diffuse2 * v), endColor.a);
+}`
+
+const meshVert = `
+precision mediump float;
+
+uniform float camNear, camFar;
+uniform mat4 model, view, projection;
+
+attribute vec3 position, normal;
+
+varying vec3 surfaceNormal, surfacePosition;
+varying vec4 _worldSpacePosition;
+
+void main() {
+  surfacePosition = position;
+  surfaceNormal = normal;
+  vec4 worldSpacePosition = model * vec4(position, 1);
+  _worldSpacePosition = worldSpacePosition;
+
+  vec4 glPosition = projection * view * model * vec4(position, 1);
+  gl_Position = glPosition;
+}
+`
+
+module.exports = { vert: meshVert, frag: meshFrag }

packages/utils/regl-renderer/src/rendering/commands/drawMesh/index.js

@@ -3,15 +3,13 @@ const mat4 = require('gl-mat4')
 const { meshColor } = require('../../renderDefaults')
 
 const drawMesh = (regl, params = { extras: {} }) => {
-  const { buffer } = regl
   const defaults = {
     useVertexColors: true,
     dynamicCulling: false,
     geometry: undefined,
-    primitive: 'triangles',
     color: meshColor
   }
-  let { geometry, dynamicCulling, useVertexColors, primitive, color } = Object.assign({}, defaults, params)
+  let { geometry, dynamicCulling, useVertexColors, color } = Object.assign({}, defaults, params)
 
   // let ambientOcclusion = vao(geometry.indices, geometry.positions, 64, 64)
   const ambientOcclusion = regl.buffer([])
@@ -30,14 +28,10 @@ const drawMesh = (regl, params = { extras: {} }) => {
   const vert = hasVertexColors ? require('./vColorShaders').vert : require('./meshShaders').vert
   let frag = hasVertexColors ? require('./vColorShaders').frag : require('./meshShaders').frag
 
-  if (geometry.type === '2d') {
-    primitive = 'lines'
-    if ('color' in geometry) color = geometry.color
-    frag = require('./colorOnlyShaders').frag
-  }
-  // console.log('type', geometry.type, 'primitive', primitive, 'color', color, hasVertexColors)
+  // console.log('type', geometry.type, 'color', color, hasVertexColors)
 
   let commandParams = {
+    primitive: 'triangles',
     vert,
     frag,
 
@@ -57,7 +51,7 @@ const drawMesh = (regl, params = { extras: {} }) => {
       }
     },
     attributes: {
-      position: buffer({ usage: 'static', type: 'float', data: geometry.positions }),
+      position: regl.buffer({ usage: 'static', type: 'float', data: geometry.positions }),
       ao: ambientOcclusion
     },
     cull: {
@@ -71,8 +65,7 @@ const drawMesh = (regl, params = { extras: {} }) => {
       enable: true,
 
       func: { src: 'src alpha', dst: 'one minus src alpha' }
-    },
-    primitive: (context, props) => props && props.primitive ? props.primitive : primitive
+    }
   }
 
   if (geometry.cells) {
@@ -86,10 +79,10 @@ const drawMesh = (regl, params = { extras: {} }) => {
   }
 
   if (hasNormals) {
-    commandParams.attributes.normal = buffer({ usage: 'static', type: 'float', data: geometry.normals })
+    commandParams.attributes.normal = regl.buffer({ usage: 'static', type: 'float', data: geometry.normals })
   }
   if (hasVertexColors) {
-    commandParams.attributes.color = buffer({ usage: 'static', type: 'float', data: geometry.colors })
+    commandParams.attributes.color = regl.buffer({ usage: 'static', type: 'float', data: geometry.colors })
   }
 
   // Splice in any extra params

packages/web/src/ui/views/viewer.js

@@ -201,8 +201,9 @@ const setup = (element) => {
     camera,
     drawCommands: {
       // draw commands bootstrap themselves the first time they are run
-      drawGrid: drawCommands.drawGrid,
       drawAxis: drawCommands.drawAxis,
+      drawGrid: drawCommands.drawGrid,
+      drawLines: drawCommands.drawLines,
       drawMesh: drawCommands.drawMesh
     },
     // data