@jscad/regl-renderer 2.1.2 → 2.4.0

package/CHANGELOG.md

@@ -3,6 +3,47 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.4.0](https://github.com/jscad/OpenJSCAD.org/compare/@jscad/regl-renderer@2.3.0...@jscad/regl-renderer@2.4.0) (2021-09-27)
+
+
+### Features
+
+* **regl-renderer:** enhanced rendering to use the matrix as provided with the geometry ([#871](https://github.com/jscad/OpenJSCAD.org/issues/871)) ([40802af](https://github.com/jscad/OpenJSCAD.org/commit/40802afeb9a2a45cf3eb4f1b9dc774b8670d8259))
+
+
+
+
+
+# [2.3.0](https://github.com/jscad/OpenJSCAD.org/compare/@jscad/regl-renderer@2.2.0...@jscad/regl-renderer@2.3.0) (2021-09-09)
+
+
+### Features
+
+* **regl-renderer:** typescript definitions and generator. ([#801](https://github.com/jscad/OpenJSCAD.org/issues/801)) ([1616876](https://github.com/jscad/OpenJSCAD.org/commit/16168761c53bbb6ffb604aa69c9c80dcc13eaad3))
+
+
+
+
+
+# [2.2.0](https://github.com/jscad/OpenJSCAD.org/compare/@jscad/regl-renderer@2.1.3...@jscad/regl-renderer@2.2.0) (2021-06-20)
+
+
+### Features
+
+* **regl-renderer:** added new command drawLines, and adjusted demos ([#863](https://github.com/jscad/OpenJSCAD.org/issues/863)) ([02b5247](https://github.com/jscad/OpenJSCAD.org/commit/02b524775165f743b1f0bcecce92a0f7784bb89b))
+
+
+
+
+
+## [2.1.3](https://github.com/jscad/OpenJSCAD.org/compare/@jscad/regl-renderer@2.1.2...@jscad/regl-renderer@2.1.3) (2021-06-11)
+
+**Note:** Version bump only for package @jscad/regl-renderer
+
+
+
+
+
 ## [2.1.2](https://github.com/jscad/OpenJSCAD.org/compare/@jscad/regl-renderer@2.1.1...@jscad/regl-renderer@2.1.2) (2021-06-01)
 
 **Note:** Version bump only for package @jscad/regl-renderer

package/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],

package/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: [

package/demo.html

@@ -56,8 +56,6 @@ const { prepareRender, drawCommands, cameras, controls, entitiesFromSolids } = j
 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 entities = entitiesFromSolids({}, demo({ scale: 1 }))
 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,42 @@ const renderOptions = {
 }
 
 // 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]
+  }
+
+  if (panDelta[0] || panDelta[1]) {
+    const updated = orbitControls.pan({ controls:state.controls, camera:state.camera, speed: panSpeed }, panDelta)
+    state.controls = { ...state.controls, ...updated.controls }
+    panDelta = [0, 0]
+    state.camera.position = updated.camera.position
+    state.camera.target = updated.camera.target
+    updateView = true
+  }
+
+  if (zoomDelta) {
+    const updated = orbitControls.zoom({ controls:state.controls, camera:state.camera, speed: zoomSpeed }, zoomDelta)
+    state.controls = { ...state.controls, ...updated.controls }
+    zoomDelta = 0
+    updateView = true
+  }
+}
+
 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 +164,62 @@ const updateAndRender = (timestamp) => {
   window.requestAnimationFrame(updateAndRender)
 }
 window.requestAnimationFrame(updateAndRender)
+
+// convert HTML events (mouse movement) to viewer changes
+let lastX = 0
+let lastY = 0
+
+const rotateSpeed = 0.002
+const panSpeed = 1
+const zoomSpeed = 0.08
+let rotateDelta = [0, 0]
+let panDelta = [0, 0]
+let zoomDelta = 0
+let pointerDown = false
+
+const moveHandler = (ev) => {
+  if(!pointerDown) return
+  const dx = lastX - ev.pageX 
+  const dy = ev.pageY - lastY 
+
+  const shiftKey = (ev.shiftKey === true) || (ev.touches && ev.touches.length > 2)
+  if (shiftKey) {
+    panDelta[0] += dx
+    panDelta[1] += dy
+  } else {
+    rotateDelta[0] -= dx
+    rotateDelta[1] -= dy
+  }
+
+  lastX = ev.pageX
+  lastY = ev.pageY
+
+  ev.preventDefault()
+}
+const downHandler = (ev) => {
+  pointerDown = true
+  lastX = ev.pageX
+  lastY = ev.pageY
+  containerElement.setPointerCapture(ev.pointerId)
+  ev.preventDefault()
+}
+
+const upHandler = (ev) => {
+  pointerDown = false
+  containerElement.releasePointerCapture(ev.pointerId)
+  ev.preventDefault()
+}
+
+const wheelHandler = (ev) => {
+  zoomDelta += ev.deltaY
+  ev.preventDefault()
+}
+
+containerElement.onpointermove = moveHandler
+containerElement.onpointerdown = downHandler
+containerElement.onpointerup = upHandler
+containerElement.onwheel = wheelHandler
+
   </script>
 </body>
 </html>