@jscad/regl-renderer 2.6.7 → 3.0.0-alpha.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (55) hide show
  1. package/CHANGELOG.md +5 -189
  2. package/README.md +21 -11
  3. package/demo-cli.js +20 -16
  4. package/demo-web.js +6 -4
  5. package/demo.es.html +236 -0
  6. package/demo.html +21 -15
  7. package/dist/jscad-regl-renderer.es.js +13 -0
  8. package/dist/jscad-regl-renderer.min.js +13 -335
  9. package/package.json +41 -16
  10. package/rollup.config.js +27 -0
  11. package/src/bound-utils/boundingBox.js +1 -2
  12. package/src/bound-utils/boundingSphere.js +4 -5
  13. package/src/bound-utils/computeBounds.js +4 -6
  14. package/src/bound-utils/computeBounds.test.js +2 -2
  15. package/src/cameras/camera.js +15 -19
  16. package/src/cameras/index.js +8 -4
  17. package/src/cameras/orthographicCamera.js +4 -6
  18. package/src/cameras/perspectiveCamera.js +7 -9
  19. package/src/controls/index.js +6 -0
  20. package/src/controls/orbitControls.js +18 -27
  21. package/src/{geometry-utils-V2 → geometry-utils-V3}/entitiesFromSolids.js +7 -9
  22. package/src/{geometry-utils-V2 → geometry-utils-V3}/entitiesFromSolids.test.js +4 -4
  23. package/src/geometry-utils-V3/geom2ToGeometries.js +57 -0
  24. package/src/{geometry-utils-V2 → geometry-utils-V3}/geom2ToGeometries.test.js +16 -12
  25. package/src/{geometry-utils-V2 → geometry-utils-V3}/geom3ToGeometries.js +3 -5
  26. package/src/{geometry-utils-V2 → geometry-utils-V3}/geom3ToGeometries.test.js +2 -2
  27. package/src/{geometry-utils-V2 → geometry-utils-V3}/path2ToGeometries.js +4 -5
  28. package/src/{geometry-utils-V2 → geometry-utils-V3}/path2ToGeometries.test.js +2 -2
  29. package/src/index.js +5 -20
  30. package/src/rendering/commands/drawAxis/index.js +2 -4
  31. package/src/rendering/commands/drawExps/drawConnector/arcGeo.js +1 -3
  32. package/src/rendering/commands/drawExps/drawConnector/index.js +5 -7
  33. package/src/rendering/commands/drawExps/drawMesh.js +2 -4
  34. package/src/rendering/commands/drawExps/drawMeshNoNormals.js +2 -4
  35. package/src/rendering/commands/drawExps/drawNormals.js +2 -4
  36. package/src/rendering/commands/drawExps/drawNormals2.js +2 -4
  37. package/src/rendering/commands/drawGrid/{index.js → makeDrawGrid.js} +2 -4
  38. package/src/rendering/commands/drawGrid/{multi.js → makeDrawMultiGrid.js} +5 -5
  39. package/src/rendering/commands/drawLines/colorOnlyShaders.js +2 -2
  40. package/src/rendering/commands/drawLines/index.js +9 -7
  41. package/src/rendering/commands/drawLines/meshShaders.js +3 -3
  42. package/src/rendering/commands/drawLines/vColorShaders.js +3 -3
  43. package/src/rendering/commands/drawMesh/colorOnlyShaders.js +2 -2
  44. package/src/rendering/commands/drawMesh/index.js +8 -7
  45. package/src/rendering/commands/drawMesh/meshShaders.js +3 -3
  46. package/src/rendering/commands/drawMesh/vColorShaders.js +3 -3
  47. package/src/rendering/commands/index.js +11 -0
  48. package/src/rendering/render.js +10 -10
  49. package/src/rendering/renderContext.js +2 -4
  50. package/src/rendering/renderDefaults.js +9 -11
  51. package/src/utils.js +3 -6
  52. package/src/geometry-utils-V1/cagToGeometries.js +0 -52
  53. package/src/geometry-utils-V1/csgToGeometries.js +0 -220
  54. package/src/geometry-utils-V1/entitiesFromSolids.js +0 -75
  55. package/src/geometry-utils-V2/geom2ToGeometries.js +0 -66
package/demo.es.html ADDED
@@ -0,0 +1,236 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <title>Demo Application</title>
5
+ <style>
6
+ #jscad{
7
+ width: 15cm;
8
+ height: 15cm;
9
+ margin: 0;
10
+ outline: 1px solid black;
11
+ }
12
+ </style>
13
+ </head>
14
+ <body>
15
+ <div id="jscad"></div>
16
+
17
+ <script type="module" id="MODELING">
18
+ // ********************
19
+ // The design to render.
20
+ // ********************
21
+ import { booleans, colors, primitives } from "./jscad-modeling.es.js"
22
+
23
+ const { intersect, subtract } = booleans
24
+ const { colorize } = colors
25
+ const { cube, cuboid, line, sphere, star } = primitives
26
+
27
+ const main = (parameters) => {
28
+ parameters = {scale: 1}
29
+ const logo = [
30
+ colorize([1.0, 0.4, 1.0], subtract(
31
+ cube({ size: 300 }),
32
+ sphere({ radius: 200 })
33
+ )),
34
+ colorize([1.0, 1.0, 0], intersect(
35
+ sphere({ radius: 130 }),
36
+ cube({ size: 210 })
37
+ ))
38
+ ]
39
+
40
+ const transpCube = colorize([1, 0, 0, 0.25], cuboid({ size: [100 * parameters.scale, 100, 210 + (200 * parameters.scale)] }))
41
+ const star2D = star({ vertices: 8, innerRadius: 300, outerRadius: 400 })
42
+ const line2D = colorize([1.0, 0, 0], line([[260, 260], [-260, 260], [-260, -260], [260, -260], [260, 260]]))
43
+ // some colors are intentionally without alpfa channel to test geom2ToGeometries will add alpha channel
44
+ const colorChange = [
45
+ [1, 0, 0, 1],
46
+ [1, 0.5, 0],
47
+ [1, 0, 1],
48
+ [0, 1, 0],
49
+ [0, 0, 0.7]
50
+ ]
51
+ star2D.outlines.forEach((outline, i) => {
52
+ outline.color = colorChange[i % colorChange.length]
53
+ })
54
+
55
+ return [star2D, line2D, ...logo]
56
+ }
57
+ // HACK... export the results of the design to global space
58
+ window.shapes = main()
59
+ </script>
60
+
61
+ <script type="module">
62
+ import { cameras, commands, controls, entitiesFromSolids, prepareRender } from "./dist/jscad-regl-renderer.es.js"
63
+
64
+ // HACK... import the results of the design from global space
65
+ const shapes = window.shapes
66
+
67
+ const perspectiveCamera = cameras.perspective
68
+ const orbitControls = controls.orbit
69
+
70
+ const containerElement = document.getElementById("jscad")
71
+
72
+ const width = containerElement.clientWidth
73
+ const height = containerElement.clientHeight
74
+
75
+ const state = {}
76
+
77
+ // prepare the camera
78
+ state.camera = Object.assign({}, perspectiveCamera.defaults)
79
+ perspectiveCamera.setProjection(state.camera, state.camera, { width, height })
80
+ perspectiveCamera.update(state.camera, state.camera)
81
+
82
+ // prepare the controls
83
+ state.controls = orbitControls.defaults
84
+
85
+ // prepare the renderer
86
+ const setupOptions = {
87
+ glOptions: { container: containerElement },
88
+ }
89
+ const renderer = prepareRender(setupOptions)
90
+
91
+ const gridOptions = {
92
+ visuals: {
93
+ drawCmd: 'drawGrid',
94
+ show: true
95
+ },
96
+ size: [500, 500],
97
+ ticks: [25, 5],
98
+ // color: [0, 0, 1, 1],
99
+ // subColor: [0, 0, 1, 0.5]
100
+ }
101
+
102
+ const axisOptions = {
103
+ visuals: {
104
+ drawCmd: 'drawAxis',
105
+ show: true
106
+ },
107
+ size: 300,
108
+ // alwaysVisible: false,
109
+ // xColor: [0, 0, 1, 1],
110
+ // yColor: [1, 0, 1, 1],
111
+ // zColor: [0, 0, 0, 1]
112
+ }
113
+
114
+ const entities = entitiesFromSolids({}, shapes)
115
+
116
+ // assemble the options for rendering
117
+ const renderOptions = {
118
+ camera: state.camera,
119
+ drawCommands: {
120
+ drawAxis: commands.drawAxis,
121
+ drawGrid: commands.drawGrid,
122
+ drawLines: commands.drawLines,
123
+ drawMesh: commands.drawMesh
124
+ },
125
+ // define the visual content
126
+ entities: [
127
+ gridOptions,
128
+ axisOptions,
129
+ ...entities
130
+ ]
131
+ }
132
+
133
+ // the heart of rendering, as themes, controls, etc change
134
+ let updateView = true
135
+
136
+ const doRotatePanZoom = () => {
137
+
138
+ if (rotateDelta[0] || rotateDelta[1]) {
139
+ const updated = orbitControls.rotate({ controls: state.controls, camera: state.camera, speed: rotateSpeed }, rotateDelta)
140
+ state.controls = { ...state.controls, ...updated.controls }
141
+ updateView = true
142
+ rotateDelta = [0, 0]
143
+ }
144
+
145
+ if (panDelta[0] || panDelta[1]) {
146
+ const updated = orbitControls.pan({ controls:state.controls, camera:state.camera, speed: panSpeed }, panDelta)
147
+ state.controls = { ...state.controls, ...updated.controls }
148
+ panDelta = [0, 0]
149
+ state.camera.position = updated.camera.position
150
+ state.camera.target = updated.camera.target
151
+ updateView = true
152
+ }
153
+
154
+ if (zoomDelta) {
155
+ const updated = orbitControls.zoom({ controls:state.controls, camera:state.camera, speed: zoomSpeed }, zoomDelta)
156
+ state.controls = { ...state.controls, ...updated.controls }
157
+ zoomDelta = 0
158
+ updateView = true
159
+ }
160
+ }
161
+
162
+ const updateAndRender = (timestamp) => {
163
+ doRotatePanZoom()
164
+
165
+ if (updateView) {
166
+ const updates = orbitControls.update({ controls: state.controls, camera: state.camera })
167
+ state.controls = { ...state.controls, ...updates.controls }
168
+ updateView = state.controls.changed // for elasticity in rotate / zoom
169
+
170
+ state.camera.position = updates.camera.position
171
+ perspectiveCamera.update(state.camera)
172
+
173
+ renderer(renderOptions)
174
+ }
175
+ window.requestAnimationFrame(updateAndRender)
176
+ }
177
+ window.requestAnimationFrame(updateAndRender)
178
+
179
+ // convert HTML events (mouse movement) to viewer changes
180
+ let lastX = 0
181
+ let lastY = 0
182
+
183
+ const rotateSpeed = 0.002
184
+ const panSpeed = 1
185
+ const zoomSpeed = 0.08
186
+ let rotateDelta = [0, 0]
187
+ let panDelta = [0, 0]
188
+ let zoomDelta = 0
189
+ let pointerDown = false
190
+
191
+ const moveHandler = (ev) => {
192
+ if(!pointerDown) return
193
+ const dx = lastX - ev.pageX
194
+ const dy = ev.pageY - lastY
195
+
196
+ const shiftKey = (ev.shiftKey === true) || (ev.touches && ev.touches.length > 2)
197
+ if (shiftKey) {
198
+ panDelta[0] += dx
199
+ panDelta[1] += dy
200
+ } else {
201
+ rotateDelta[0] -= dx
202
+ rotateDelta[1] -= dy
203
+ }
204
+
205
+ lastX = ev.pageX
206
+ lastY = ev.pageY
207
+
208
+ ev.preventDefault()
209
+ }
210
+ const downHandler = (ev) => {
211
+ pointerDown = true
212
+ lastX = ev.pageX
213
+ lastY = ev.pageY
214
+ containerElement.setPointerCapture(ev.pointerId)
215
+ }
216
+
217
+ const upHandler = (ev) => {
218
+ pointerDown = false
219
+ containerElement.releasePointerCapture(ev.pointerId)
220
+ }
221
+
222
+ const wheelHandler = (ev) => {
223
+ zoomDelta += ev.deltaY
224
+ ev.preventDefault()
225
+ }
226
+
227
+ containerElement.onpointermove = moveHandler
228
+ containerElement.onpointerdown = downHandler
229
+ containerElement.onpointerup = upHandler
230
+ containerElement.onwheel = wheelHandler
231
+
232
+ </script>
233
+
234
+
235
+ </body>
236
+ </html>
package/demo.html CHANGED
@@ -12,22 +12,22 @@
12
12
  </style>
13
13
  </head>
14
14
  <body>
15
- <script language="javascript" src="https://unpkg.com/@jscad/modeling" id="MODELING"></script>
16
15
  <script language="javascript" src="./dist/jscad-regl-renderer.min.js" id="RENDERING"></script>
17
16
 
18
17
  <div id="jscad"></div>
19
18
 
20
- <script language="javascript">
19
+ <script type="module" id="MODELING">
21
20
  // ********************
22
21
  // The design to render.
23
22
  // ********************
24
- const { booleans, colors, primitives } = jscadModeling // modeling comes from the included MODELING library
23
+ import { booleans, colors, primitives } from "./jscad-modeling.es.js"
25
24
 
26
25
  const { intersect, subtract } = booleans
27
26
  const { colorize } = colors
28
27
  const { cube, cuboid, line, sphere, star } = primitives
29
28
 
30
- const demo = (parameters) => {
29
+ const main = (parameters) => {
30
+ parameters = {scale: 1}
31
31
  const logo = [
32
32
  colorize([1.0, 0.4, 1.0], subtract(
33
33
  cube({ size: 300 }),
@@ -39,7 +39,7 @@ const demo = (parameters) => {
39
39
  ))
40
40
  ]
41
41
 
42
- const transpCube = colorize([1, 0, 0, 0.75], cuboid({ size: [100 * parameters.scale, 100, 210 + (200 * parameters.scale)] }))
42
+ const transpCube = colorize([1, 0, 0, 0.25], cuboid({ size: [100 * parameters.scale, 100, 210 + (200 * parameters.scale)] }))
43
43
  const star2D = star({ vertices: 8, innerRadius: 300, outerRadius: 400 })
44
44
  const line2D = colorize([1.0, 0, 0], line([[260, 260], [-260, 260], [-260, -260], [260, -260], [260, 260]]))
45
45
  // some colors are intentionally without alpfa channel to test geom2ToGeometries will add alpha channel
@@ -50,19 +50,25 @@ const demo = (parameters) => {
50
50
  [0, 1, 0],
51
51
  [0, 0, 0.7]
52
52
  ]
53
- star2D.sides.forEach((side, i) => {
54
- if (i >= 2) side.color = colorChange[i % colorChange.length]
53
+ star2D.outlines.forEach((outline, i) => {
54
+ outline.color = colorChange[i % colorChange.length]
55
55
  })
56
56
 
57
- return [transpCube, star2D, line2D, ...logo]
57
+ return [star2D, line2D, ...logo]
58
58
  }
59
+ // HACK... export the results of the design to global space
60
+ window.shapes = main()
59
61
  </script>
60
62
 
61
- <script language="javascript">
63
+
64
+ <script type="module", id="RENDERING">
62
65
  // ********************
63
66
  // Renderer configuration and initiation.
64
67
  // ********************
65
- const { prepareRender, drawCommands, cameras, controls, entitiesFromSolids } = jscadReglRenderer
68
+ const { cameras, commands, controls, entitiesFromSolids, prepareRender } = jscadReglRenderer
69
+
70
+ // HACK... import the results of the design from global space
71
+ const shapes = window.shapes
66
72
 
67
73
  const perspectiveCamera = cameras.perspective
68
74
  const orbitControls = controls.orbit
@@ -111,16 +117,16 @@ const axisOptions = {
111
117
  // zColor: [0, 0, 0, 1]
112
118
  }
113
119
 
114
- const entities = entitiesFromSolids({}, demo({ scale: 1 }))
120
+ const entities = entitiesFromSolids({}, shapes)
115
121
 
116
122
  // assemble the options for rendering
117
123
  const renderOptions = {
118
124
  camera: state.camera,
119
125
  drawCommands: {
120
- drawAxis: drawCommands.drawAxis,
121
- drawGrid: drawCommands.drawGrid,
122
- drawLines: drawCommands.drawLines,
123
- drawMesh: drawCommands.drawMesh
126
+ drawAxis: commands.drawAxis,
127
+ drawGrid: commands.drawGrid,
128
+ drawLines: commands.drawLines,
129
+ drawMesh: commands.drawMesh
124
130
  },
125
131
  // define the visual content
126
132
  entities: [