@jscad/regl-renderer 2.5.9 → 2.6.2

package/CHANGELOG.md

@@ -3,6 +3,33 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.6.2](https://github.com/jscad/OpenJSCAD.org/compare/@jscad/regl-renderer@2.6.1...@jscad/regl-renderer@2.6.2) (2022-07-17)
+
+**Note:** Version bump only for package @jscad/regl-renderer
+
+
+
+
+
+## [2.6.1](https://github.com/jscad/OpenJSCAD.org/compare/@jscad/regl-renderer@2.6.0...@jscad/regl-renderer@2.6.1) (2022-06-12)
+
+**Note:** Version bump only for package @jscad/regl-renderer
+
+
+
+
+
+# [2.6.0](https://github.com/jscad/OpenJSCAD.org/compare/@jscad/regl-renderer@2.5.9...@jscad/regl-renderer@2.6.0) (2022-05-15)
+
+
+### Features
+
+* **regl-renderer:** added support for multicolor lines ([#1060](https://github.com/jscad/OpenJSCAD.org/issues/1060)) ([d5eb65b](https://github.com/jscad/OpenJSCAD.org/commit/d5eb65b298afcabd4231236c3aa5d5cc092db8d4))
+
+
+
+
+
 ## [2.5.9](https://github.com/jscad/OpenJSCAD.org/compare/@jscad/regl-renderer@2.5.8...@jscad/regl-renderer@2.5.9) (2022-04-24)
 
 

package/demo-cli.js

@@ -20,8 +20,19 @@ const demoSolids = (parameters) => {
   ]
 
   const transpCube = colorize([1, 0, 0, 0.75], cuboid({ size: [100 * parameters.scale, 100, 210 + (200 * parameters.scale)] }))
-  const star2D = star({ vertices: 8, innerRadius: 150, outerRadius: 200 })
-  const line2D = colorize([1.0, 0, 0], line([[220, 220], [-220, 220], [-220, -220], [220, -220], [220, 220]]))
+  const star2D = star({ vertices: 8, innerRadius: 300, outerRadius: 400 })
+  const line2D = colorize([1.0, 0, 0], line([[260, 260], [-260, 260], [-260, -260], [260, -260], [260, 260]]))
+  // some colors are intentionally without alpfa channel to test geom2ToGeometries will add alpha channel
+  const colorChange = [
+    [1, 0, 0, 1],
+    [1, 0.5, 0],
+    [1, 0, 1],
+    [0, 1, 0],
+    [0, 0, 0.7]
+  ]
+  star2D.sides.forEach((side, i) => {
+    if (i >= 2) side.color = colorChange[i % colorChange.length]
+  })
 
   return [transpCube, star2D, line2D, ...logo]
 }

package/demo-web.js

@@ -18,8 +18,19 @@ const demoSolids = (parameters) => {
   ]
 
   const transpCube = colorize([1, 0, 0, 0.75], cuboid({ size: [100 * parameters.scale, 100, 210 + (200 * parameters.scale)] }))
-  const star2D = star({ vertices: 8, innerRadius: 150, outerRadius: 200 })
-  const line2D = colorize([1.0, 0, 0], line([[220, 220], [-220, 220], [-220, -220], [220, -220], [220, 220]]))
+  const star2D = star({ vertices: 8, innerRadius: 300, outerRadius: 400 })
+  const line2D = colorize([1.0, 0, 0], line([[260, 260], [-260, 260], [-260, -260], [260, -260], [260, 260]]))
+  // some colors are intentionally without alpfa channel to test geom2ToGeometries will add alpha channel
+  const colorChange = [
+    [1, 0, 0, 1],
+    [1, 0.5, 0],
+    [1, 0, 1],
+    [0, 1, 0],
+    [0, 0, 0.7]
+  ]
+  star2D.sides.forEach((side, i) => {
+    if (i >= 2) side.color = colorChange[i % colorChange.length]
+  })
 
   return [transpCube, line2D, star2D, ...logo]
 }

package/demo.html

@@ -40,8 +40,19 @@ const demo = (parameters) => {
   ]
 
   const transpCube = colorize([1, 0, 0, 0.75], cuboid({ size: [100 * parameters.scale, 100, 210 + (200 * parameters.scale)] }))
-  const star2D = star({ vertices: 8, innerRadius: 150, outerRadius: 200 })
-  const line2D = colorize([1.0, 0, 0], line([[220, 220], [-220, 220], [-220, -220], [220, -220], [220, 220]]))
+  const star2D = star({ vertices: 8, innerRadius: 300, outerRadius: 400 })
+  const line2D = colorize([1.0, 0, 0], line([[260, 260], [-260, 260], [-260, -260], [260, -260], [260, 260]]))
+  // some colors are intentionally without alpfa channel to test geom2ToGeometries will add alpha channel
+  const colorChange = [
+    [1, 0, 0, 1],
+    [1, 0.5, 0],
+    [1, 0, 1],
+    [0, 1, 0],
+    [0, 0, 0.7]
+  ]
+  star2D.sides.forEach((side, i) => {
+    if (i >= 2) side.color = colorChange[i % colorChange.length]
+  })
 
   return [transpCube, star2D, line2D, ...logo]
 }

package/dist/jscad-regl-renderer.min.js

@@ -280,8 +280,8 @@ const vec3=require("gl-vec3"),mat4=require("gl-mat4"),{max:max,min:min,sqrt:sqrt
 },{"../bound-utils/computeBounds":89,"../cameras/orthographicCamera":91,"camera-unproject":9,"gl-mat4":26,"gl-vec3":59}],94:[function(require,module,exports){
 const{flatten:flatten,toArray:toArray}=require("@jscad/array-utils"),{meshColor:meshColor}=require("../rendering/renderDefaults"),geom2ToGeometries=require("./geom2ToGeometries"),geom3ToGeometries=require("./geom3ToGeometries"),path2ToGeometries=require("./path2ToGeometries"),assembleEntities=e=>{return e.map(e=>{return{geometry:e,visuals:{drawCmd:"2d"===e.type?"drawLines":"drawMesh",show:!0,transparent:e.isTransparent,useVertexColors:!0}}})},entitiesFromSolids=(e,...o)=>{const r={color:meshColor,smoothNormals:!0},{color:t,smoothNormals:s}=Object.assign({},r,e);o=(o=flatten(toArray(o))).filter(e=>e&&e instanceof Object);const i=[];return o.forEach(e=>{let o=[];"sides"in e?o=geom2ToGeometries({color:t},e):"points"in e?o=path2ToGeometries({color:t},e):"polygons"in e&&(o=geom3ToGeometries({smoothLighting:s,normalThreshold:.3,color:t},e)),i.push(...assembleEntities(o))}),i};module.exports=entitiesFromSolids;
 
-},{"../rendering/renderDefaults":110,"./geom2ToGeometries":95,"./geom3ToGeometries":96,"./path2ToGeometries":97,"@jscad/array-utils":4}],95:[function(require,module,exports){
-const mat4=require("gl-mat4"),maxIndex=Math.floor(32767.5),geom2ToGeometries=(o,e)=>{let{color:t}=o;const r=e.sides;if(0===r.length)return[];"color"in e&&(t=e.color);const n=t[3]<1,s=Math.floor(r.length/maxIndex)+1,a=[];for(let o=0;o<s;o++){const s=o*maxIndex,m=Math.min(s+maxIndex,r.length),l=[];for(let o=s;o<m;o++){const e=r[o];l.push([e[0][0],e[0][1],0]),l.push([e[1][0],e[1][1],0])}const c=l.map(o=>[0,0,-1]),i=l.map((o,e)=>e),h=e.transforms?mat4.clone(e.transforms):mat4.create();a.push({type:"2d",positions:l,normals:c,indices:i,transforms:h,color:t,isTransparent:n})}return a};module.exports=geom2ToGeometries;
+},{"../rendering/renderDefaults":111,"./geom2ToGeometries":95,"./geom3ToGeometries":96,"./path2ToGeometries":97,"@jscad/array-utils":4}],95:[function(require,module,exports){
+const mat4=require("gl-mat4"),maxIndex=Math.floor(32767.5),geom2ToGeometries=(o,e)=>{let{color:t}=o;const n=e.sides;if(0===n.length)return[];"color"in e&&(t=e.color);const r=t[3]<1,s=[],l=Math.floor(n.length/maxIndex)+1,a=(o,e)=>{s.push(o,e||o)},m=[];for(let o=0;o<l;o++){const l=o*maxIndex,c=Math.min(l+maxIndex,n.length),h=[];for(let o=l;o<c;o++){const e=n[o];if(e.color){if(0===s.length&&h.length>0){const o=h.length;for(let e=0;e<o;e++)s.push(t)}a(e.color,e.endColor)}else s.length&&a(t);h.push([e[0][0],e[0][1],0]),h.push([e[1][0],e[1][1],0])}const i=h.map(o=>[0,0,-1]),f=h.map((o,e)=>e),p=e.transforms?mat4.clone(e.transforms):mat4.create();m.push({type:"2d",positions:h,normals:i,indices:f,transforms:p,color:t,colors:s,isTransparent:r})}return m};module.exports=geom2ToGeometries;
 
 },{"gl-mat4":26}],96:[function(require,module,exports){
 const vec3=require("gl-vec3"),mat4=require("gl-mat4"),maxIndex=65535,geom3ToGeometries=(o,e)=>{let{color:t,smoothLighting:n}=o;"color"in e&&(t=e.color);const r=e.polygons,l=e.transforms?mat4.clone(e.transforms):mat4.create(),s=[];let c=0;for(;c<r.length;){let o=0,e=c;for(let t=c;t<r.length&&!((o+=r[t].vertices.length)>65535);t++)e++;const n=[],i=[],a=[],p=[],m=!0;for(let o=c;o<e;o++){const e=r[o],l=e.vertices,s=calculateNormal(e),c=polygonColor(e,t),m=[];for(let o=0;o<l.length;o++){const e=l[o];n.push(e),i.push(s),p.push(c);const t=n.length-1;m.push(t)}for(let o=2;o<m.length;o++)a.push([m[0],m[o-1],m[o]])}const u={type:"3d",positions:n,normals:i,indices:a,colors:p,transforms:l,isTransparent:m};s.push(u),c=e}return s},smoothing=()=>{const o=[],e=[];let t=!0;const n=[],r=[],l=[],s=[],c=[];let i=0;for(let a=0;a<o.length;a++){const p=o[a],m=p.vertices,u=polygonColor(p,e),h=calculateNormal(p);u&&1!==u[3]&&(t=!0);const g=[];for(let o=0;o<m.length;o++){let e;const t=m[o];{const o={normal:h,position:t},l=fuzyNormalAndPositionLookup(c,o,.5);if(l)e=l.index;else{const l=c[o.position],a=[{normal:o.normal,index:i}];c[o.position]=l?c[o.position].concat(a):a,e=i,u&&s.push(u),r.push(h),n.push(t),i+=1}}g.push(e)}for(let o=2;o<g.length;o++)l.push([g[0],g[o-1],g[o]])}},polygonColor=(o,e)=>{let t=e;return o.color&&(t=o.color),t&&t.length<4&&t.push(1),t},calculateNormal=o=>{if(o.plane)return vec3.clone(o.plane);const e=o.vertices,t=vec3.create();vec3.subtract(t,e[1],e[0]);const n=vec3.create();vec3.subtract(n,e[2],e[0]);const r=vec3.create();return vec3.cross(r,t,n),vec3.normalize(r,r),r},areNormalsSimilar=(o,e,t)=>vec3.distance(o,e)<=t,fuzyNormalAndPositionLookup=(o,e,t)=>{const n=o[e.position];if(n)for(let o=0;o<n.length;o++){const r=n[o].normal;if(areNormalsSimilar(r,e.normal,t))return{tupple:{position:e.position,normal:r},index:n[o].index}}};module.exports=geom3ToGeometries;
@@ -292,7 +292,7 @@ const mat4=require("gl-mat4"),maxIndex=Math.floor(32767.5)-2,path2ToGeometries=(
 },{"gl-mat4":26}],98:[function(require,module,exports){
 module.exports={prepareRender:require("./rendering/render"),drawCommands:{drawGrid:require("./rendering/commands/drawGrid/multi.js"),drawAxis:require("./rendering/commands/drawAxis"),drawMesh:require("./rendering/commands/drawMesh"),drawLines:require("./rendering/commands/drawLines")},cameras:{camera:require("./cameras/camera"),orthographic:require("./cameras/orthographicCamera"),perspective:require("./cameras/perspectiveCamera")},controls:{orbit:require("./controls/orbitControls")},entitiesFromSolids:require("./geometry-utils-V2/entitiesFromSolids")};
 
-},{"./cameras/camera":90,"./cameras/orthographicCamera":91,"./cameras/perspectiveCamera":92,"./controls/orbitControls":93,"./geometry-utils-V2/entitiesFromSolids":94,"./rendering/commands/drawAxis":99,"./rendering/commands/drawGrid/multi.js":101,"./rendering/commands/drawLines":103,"./rendering/commands/drawMesh":105,"./rendering/render":108}],99:[function(require,module,exports){
+},{"./cameras/camera":90,"./cameras/orthographicCamera":91,"./cameras/perspectiveCamera":92,"./controls/orbitControls":93,"./geometry-utils-V2/entitiesFromSolids":94,"./rendering/commands/drawAxis":99,"./rendering/commands/drawGrid/multi.js":101,"./rendering/commands/drawLines":103,"./rendering/commands/drawMesh":106,"./rendering/render":109}],99:[function(require,module,exports){
 const mat4=require("gl-mat4"),drawAxis=(t,i)=>{let{size:o,xColor:e,yColor:l,zColor:m,lineWidth:a,alwaysVisible:n}=Object.assign({},{xColor:[1,0,0,1],yColor:[0,1,0,1],zColor:[0,0,1,1],size:10,lineWidth:3,alwaysVisible:!0},i);a>t.limits.lineWidthDims[1]&&(a=t.limits.lineWidthDims[1]);const r=[0,0,0,o,0,0],d={frag:"precision mediump float;\n    uniform vec4 color;\n    void main() {\n      gl_FragColor = color;\n    }",vert:"\n    precision mediump float;\n    attribute vec3 position;\n    uniform mat4 model, view, projection;\n    void main() {\n      gl_Position = projection * view * model * vec4(position, 1);\n    }",uniforms:{model:(t,i)=>i&&i.model?i.model:mat4.identity([]),color:(t,i)=>i.color,angle:(t,i)=>i.angle},attributes:{position:r},count:r.length/3,primitive:"line loop",lineWidth:a,depth:{enable:!n}},s=mat4.identity([]),c=mat4.rotateZ(mat4.create(),mat4.identity([]),Math.PI/2),p=mat4.rotateY(mat4.create(),mat4.identity([]),-Math.PI/2),u=t(d);return t=>{const i={model:mat4.identity([])};return t=Object.assign({},i,t),u([{color:e,model:mat4.multiply(mat4.create(),t.model,s)},{color:l,model:mat4.multiply(mat4.create(),t.model,c)},{color:m,model:mat4.multiply(mat4.create(),t.model,p)}])}};module.exports=drawAxis;
 
 },{"gl-mat4":26}],100:[function(require,module,exports){
@@ -305,27 +305,30 @@ const makeDrawMultiGrid=(e,i)=>{const{size:s,ticks:r}=Object.assign({},{size:[50
 const vColorFrag="\nprecision mediump float;\nuniform vec4 ucolor;\n\nvoid main () {\n  gl_FragColor = ucolor;\n}\n";module.exports={frag:vColorFrag};
 
 },{}],103:[function(require,module,exports){
-const mat4=require("gl-mat4"),{meshColor:meshColor}=require("../../renderDefaults"),drawLines=(e,r={})=>{const t={color:meshColor,geometry:void 0};let{geometry:o,color:s}=Object.assign({},t,r);"color"in o&&(s=o.color);const a=!!(o.indices&&o.indices.length>0),i=!!(o.normals&&o.normals.length>0),l={primitive:"lines",vert:require("./meshShaders").vert,frag:require("./colorOnlyShaders").frag,uniforms:{model:(e,r)=>r.model||o.transforms||mat4.create(),ucolor:(e,r)=>r&&r.color?r.color:s},attributes:{position:e.buffer({usage:"static",type:"float",data:o.positions})}};return a&&(l.elements=e.elements({usage:"static",type:"uint16",data:o.indices})),i&&(l.attributes.normal=e.buffer({usage:"static",type:"float",data:o.normals})),e(l)};module.exports=drawLines;
+const mat4=require("gl-mat4"),{meshColor:meshColor}=require("../../renderDefaults"),drawLines=(e,r={})=>{const t={color:meshColor,geometry:void 0};let{geometry:o,color:s,transparent:a}=Object.assign({},t,r);"color"in o&&(s=o.color);const l=!!(o.indices&&o.indices.length>0),n=!!(o.normals&&o.normals.length>0),i=!!(o.colors&&o.colors.length>0),c={primitive:"lines",vert:i?require("./vColorShaders").vert:require("./meshShaders").vert,frag:i?require("./vColorShaders").frag:require("./colorOnlyShaders").frag,uniforms:{model:(e,r)=>r.model||o.transforms||mat4.create(),ucolor:(e,r)=>r&&r.color?r.color:s},attributes:{position:e.buffer({usage:"static",type:"float",data:o.positions})},depth:{enable:!a}};return a&&(c.blend={enable:!0,func:{src:"src alpha",dst:"one minus src alpha"}}),i&&(c.attributes.color=e.buffer({usage:"static",type:"float",data:o.colors})),l&&(c.elements=e.elements({usage:"static",type:"uint16",data:o.indices})),n&&(c.attributes.normal=e.buffer({usage:"static",type:"float",data:o.normals})),e(c)};module.exports=drawLines;
 
-},{"../../renderDefaults":110,"./colorOnlyShaders":102,"./meshShaders":104,"gl-mat4":26}],104:[function(require,module,exports){
-const meshFrag="\nprecision mediump float;\nvarying vec3 surfaceNormal;\nuniform float ambientLightAmount;\nuniform float diffuseLightAmount;\nuniform vec4 ucolor;\nuniform vec3 lightDirection;\nuniform vec3 opacity;\n\nvarying vec4 _worldSpacePosition;\n\nuniform vec2 printableArea;\n\nvec4 errorColor = vec4(0.15, 0.15, 0.15, 0.3);\n\nvoid main () {\n  vec4 depth = gl_FragCoord;\n\n  float v = 0.8; // shadow value\n  vec4 endColor = ucolor;\n\n  vec3 ambient = ambientLightAmount * endColor.rgb;\n  float cosTheta = dot(surfaceNormal, lightDirection);\n  vec3 diffuse = diffuseLightAmount * endColor.rgb * clamp(cosTheta , 0.0, 1.0 );\n\n  float cosTheta2 = dot(surfaceNormal, vec3(-lightDirection.x, -lightDirection.y, lightDirection.z));\n  vec3 diffuse2 = diffuseLightAmount * endColor.rgb * clamp(cosTheta2 , 0.0, 1.0 );\n\n  gl_FragColor = vec4((ambient + diffuse + diffuse2 * v), endColor.a);\n}",meshVert="\nprecision mediump float;\n\nuniform float camNear, camFar;\nuniform mat4 model, view, projection;\n\nattribute vec3 position, normal;\n\nvarying vec3 surfaceNormal, surfacePosition;\nvarying vec4 _worldSpacePosition;\n\nvoid main() {\n  surfacePosition = position;\n  surfaceNormal = normal;\n  vec4 worldSpacePosition = model * vec4(position, 1);\n  _worldSpacePosition = worldSpacePosition;\n\n  vec4 glPosition = projection * view * model * vec4(position, 1);\n  gl_Position = glPosition;\n}\n";module.exports={vert:meshVert,frag:meshFrag};
+},{"../../renderDefaults":111,"./colorOnlyShaders":102,"./meshShaders":104,"./vColorShaders":105,"gl-mat4":26}],104:[function(require,module,exports){
+const meshVert="\nprecision mediump float;\n\nuniform float camNear, camFar;\nuniform mat4 model, view, projection;\n\nattribute vec3 position, normal;\n\n\nvarying vec3 surfaceNormal, surfacePosition;\nvarying vec4 _worldSpacePosition;\n\n\nvoid main() {\n\n\n  surfacePosition = position;\n  surfaceNormal = normal;\n  vec4 worldSpacePosition = model * vec4(position, 1);\n  _worldSpacePosition = worldSpacePosition;\n\n  vec4 glPosition = projection * view * model * vec4(position, 1);\n  gl_Position = glPosition;\n}\n",meshFrag="\nprecision mediump float;\nvarying vec3 surfaceNormal;\nuniform float ambientLightAmount;\nuniform float diffuseLightAmount;\nuniform vec4 ucolor;\nuniform vec3 lightDirection;\nuniform vec3 opacity;\n\nvarying vec4 _worldSpacePosition;\n\nuniform vec2 printableArea;\n\nvec4 errorColor = vec4(0.15, 0.15, 0.15, 0.3);\n\nvoid main () {\n  vec4 depth = gl_FragCoord;\n\n  float v = 0.8; // shadow value\n  vec4 endColor = ucolor;\n\n  vec3 ambient = ambientLightAmount * endColor.rgb;\n  float cosTheta = dot(surfaceNormal, lightDirection);\n  vec3 diffuse = diffuseLightAmount * endColor.rgb * clamp(cosTheta , 0.0, 1.0 );\n\n  float cosTheta2 = dot(surfaceNormal, vec3(-lightDirection.x, -lightDirection.y, lightDirection.z));\n  vec3 diffuse2 = diffuseLightAmount * endColor.rgb * clamp(cosTheta2 , 0.0, 1.0 );\n\n  gl_FragColor = vec4((ambient + diffuse + diffuse2 * v), endColor.a);\n}";module.exports={vert:meshVert,frag:meshFrag};
 
 },{}],105:[function(require,module,exports){
-const mat4=require("gl-mat4"),{meshColor:meshColor}=require("../../renderDefaults"),drawMesh=(e,r={extras:{}})=>{const t={useVertexColors:!0,dynamicCulling:!0,geometry:void 0,color:meshColor},{geometry:a,dynamicCulling:s,useVertexColors:o,color:l}=Object.assign({},t,r),n=e.buffer([]),i=!!(a.indices&&a.indices.length>0),c=!!(a.normals&&a.normals.length>0),m=!!(o&&a.colors&&a.colors.length>0),u=a.transforms||mat4.create(),d=mat4.determinant(u)<0,g=s&&d?"front":"back",f=m?require("./vColorShaders").vert:require("./meshShaders").vert,h=m?require("./vColorShaders").frag:require("./meshShaders").frag,b=mat4.invert(mat4.create(),u);let p={primitive:"triangles",vert:f,frag:h,uniforms:{model:(e,r)=>u,ucolor:(e,r)=>r&&r.color?r.color:l,vColorToggler:(e,r)=>r&&r.useVertexColors&&!0===r.useVertexColors?1:0,unormal:(e,r)=>{const t=mat4.invert(mat4.create(),r.camera.view);return mat4.multiply(t,b,t),mat4.transpose(t,t),t}},attributes:{position:e.buffer({usage:"static",type:"float",data:a.positions}),ao:n},cull:{enable:!0,face:g},depth:{enable:!0},blend:{enable:!0,func:{src:"src alpha",dst:"one minus src alpha"}}};return a.cells?p.elements=a.cells:i?p.elements=e.elements({usage:"static",type:"uint16",data:a.indices}):a.triangles?p.elements=a.triangles:p.count=a.positions.length/3,c&&(p.attributes.normal=e.buffer({usage:"static",type:"float",data:a.normals})),m&&(p.attributes.color=e.buffer({usage:"static",type:"float",data:a.colors})),e(p=Object.assign({},p,r.extras))};module.exports=drawMesh;
+const vColorVert="\nprecision mediump float;\n\nuniform float camNear, camFar;\nuniform mat4 model, view, projection;\n\nattribute vec3 position, normal;\nattribute vec4 color;\n\nvarying vec3 surfaceNormal, surfacePosition;\nvarying vec4 _worldSpacePosition;\nvarying vec4 vColor;\n\nvoid main() {\n  vColor = color;\n\n  surfacePosition = position;\n  surfaceNormal = normal;\n  vec4 worldSpacePosition = model * vec4(position, 1);\n  _worldSpacePosition = worldSpacePosition;\n\n  vec4 glPosition = projection * view * model * vec4(position, 1);\n  gl_Position = glPosition;\n}\n",vColorFrag="\nprecision mediump float;\nvarying vec4 vColor;\n\nvoid main () {\n  gl_FragColor = vColor;\n}\n";module.exports={frag:vColorFrag,vert:vColorVert};
+
+},{}],106:[function(require,module,exports){
+const mat4=require("gl-mat4"),{meshColor:meshColor}=require("../../renderDefaults"),drawMesh=(e,r={extras:{}})=>{const t={useVertexColors:!0,dynamicCulling:!0,geometry:void 0,color:meshColor},{geometry:a,dynamicCulling:s,useVertexColors:o,color:l,transparent:n}=Object.assign({},t,r),i=e.buffer([]),c=!!(a.indices&&a.indices.length>0),m=!!(a.normals&&a.normals.length>0),u=!!(o&&a.colors&&a.colors.length>0),d=a.transforms||mat4.create(),g=mat4.determinant(d)<0,f=s&&g?"front":"back",h=u?require("./vColorShaders").vert:require("./meshShaders").vert,p=u?require("./vColorShaders").frag:require("./meshShaders").frag,b=mat4.invert(mat4.create(),d);let C={primitive:"triangles",vert:h,frag:p,uniforms:{model:(e,r)=>d,ucolor:(e,r)=>r&&r.color?r.color:l,vColorToggler:(e,r)=>r&&r.useVertexColors&&!0===r.useVertexColors?1:0,unormal:(e,r)=>{const t=mat4.invert(mat4.create(),r.camera.view);return mat4.multiply(t,b,t),mat4.transpose(t,t),t}},attributes:{position:e.buffer({usage:"static",type:"float",data:a.positions}),ao:i},cull:{enable:!0,face:f},depth:{enable:!n}};return n&&(C.blend={enable:!0,func:{src:"src alpha",dst:"one minus src alpha"}}),a.cells?C.elements=a.cells:c?C.elements=e.elements({usage:"static",type:"uint16",data:a.indices}):a.triangles?C.elements=a.triangles:C.count=a.positions.length/3,m&&(C.attributes.normal=e.buffer({usage:"static",type:"float",data:a.normals})),u&&(C.attributes.color=e.buffer({usage:"static",type:"float",data:a.colors})),e(C=Object.assign({},C,r.extras))};module.exports=drawMesh;
 
-},{"../../renderDefaults":110,"./meshShaders":106,"./vColorShaders":107,"gl-mat4":26}],106:[function(require,module,exports){
+},{"../../renderDefaults":111,"./meshShaders":107,"./vColorShaders":108,"gl-mat4":26}],107:[function(require,module,exports){
 const meshFrag="\nprecision mediump float;\nvarying vec3 surfaceNormal;\nuniform float ambientLightAmount;\nuniform float diffuseLightAmount;\nuniform vec4 ucolor;\nuniform vec3 lightDirection;\nuniform vec3 opacity;\n\nvarying vec4 _worldSpacePosition;\n\nuniform vec2 printableArea;\n\nvec4 errorColor = vec4(0.15, 0.15, 0.15, 0.3);\n\nvoid main () {\n  vec4 depth = gl_FragCoord;\n\n  float v = 0.8; // shadow value\n  vec4 endColor = ucolor;\n\n  vec3 ambient = ambientLightAmount * endColor.rgb;\n  float cosTheta = dot(surfaceNormal, lightDirection);\n  vec3 diffuse = diffuseLightAmount * endColor.rgb * clamp(cosTheta , 0.0, 1.0 );\n\n  float cosTheta2 = dot(surfaceNormal, vec3(-lightDirection.x, -lightDirection.y, lightDirection.z));\n  vec3 diffuse2 = diffuseLightAmount * endColor.rgb * clamp(cosTheta2 , 0.0, 1.0 );\n\n  gl_FragColor = vec4((ambient + diffuse + diffuse2 * v), endColor.a);\n}",meshVert="\nprecision mediump float;\n\nuniform float camNear, camFar;\nuniform mat4 model, view, projection;\n\nattribute vec3 position, normal;\n\nvarying vec3 surfaceNormal, surfacePosition;\nvarying vec4 _worldSpacePosition;\n\nvoid main() {\n  surfacePosition = position;\n  surfaceNormal = normal;\n  vec4 worldSpacePosition = model * vec4(position, 1);\n  _worldSpacePosition = worldSpacePosition;\n\n  vec4 glPosition = projection * view * model * vec4(position, 1);\n  gl_Position = glPosition;\n}\n";module.exports={vert:meshVert,frag:meshFrag};
 
-},{}],107:[function(require,module,exports){
+},{}],108:[function(require,module,exports){
 const vColorVert="\nprecision mediump float;\n\nuniform float camNear, camFar;\nuniform mat4 model, view, projection, unormal;\n\nattribute vec3 position, normal;\nattribute vec4 color;\n\nattribute float ao;\nvarying float ambientAo;\n\nvarying vec3 surfaceNormal, surfacePosition;\nvarying vec4 _worldSpacePosition;\nvarying vec4 vColor;\n\nvoid main() {\n  surfacePosition = (unormal * vec4(position, 1.0)).xyz;\n  surfaceNormal = normalize((unormal * vec4(normal, 1.0)).xyz); //vec4 transformedNormal = uNormalMatrix * vec4(aVertexNormal, 1.0);\n  vec4 worldSpacePosition = model * vec4(position, 1);\n  _worldSpacePosition = worldSpacePosition;\n  //gl_Position = projection * view * worldSpacePosition;\n\n  vColor = color;\n\n  //ambientAo = (1. - ao) * (0.5 * max(normal.x, 0.) + 0.5);\n\n  vec4 glPosition = projection * view * model * vec4(position, 1);\n  gl_Position = glPosition;\n  //gl_Position = zBufferAdjust(glPosition, camNear, camFar);\n}\n",vColorFrag="\nprecision mediump float;\nvarying vec3 surfaceNormal, surfacePosition;\n\nuniform float ambientLightAmount;\nuniform float diffuseLightAmount;\nuniform float specularLightAmount;\n\nuniform vec3 lightDirection;\nuniform vec4 lightColor;\nuniform vec3 opacity;\nuniform float uMaterialShininess;\n\nvarying vec4 vColor;\nuniform vec4 ucolor;\nuniform float vColorToggler;\n\nuniform vec2 printableArea;\nvec4 errorColor = vec4(0.15, 0.15, 0.15, 0.3);//vec4(0.15, 0.15, 0.15, 0.3);\nvarying vec4 _worldSpacePosition;\nvarying float ambientAo;\n\nvoid main () {\n  vec4 depth = gl_FragCoord;\n  vec4 endColor = vColor * vColorToggler + ucolor * (1.0 - vColorToggler);\n\n  vec3 ambient = ambientLightAmount * endColor.rgb ; //ambientAo * \n\n  float diffuseWeight = dot(surfaceNormal, lightDirection);\n  vec3 diffuse = diffuseLightAmount * endColor.rgb * clamp(diffuseWeight , 0.0, 1.0 );\n\n  //specular\n  \n  vec4 specularColor = vec4(lightColor);\n  vec3 eyeDirection = normalize(surfacePosition.xyz);\n  vec3 reflectionDirection = reflect(-lightDirection, -surfaceNormal);\n  float specularLightWeight = pow(max(dot(reflectionDirection, eyeDirection), 0.0), uMaterialShininess);\n  vec3 specular = specularColor.rgb * specularLightWeight * specularLightAmount;\n\n  gl_FragColor = vec4((ambient + diffuse + specular), endColor.a);\n}\n";module.exports={frag:vColorFrag,vert:vColorVert};
 
-},{}],108:[function(require,module,exports){
+},{}],109:[function(require,module,exports){
 const renderContext=require("./renderContext"),renderDefaults=require("./renderDefaults"),prepareRender=e=>{const r=Object.assign({},{},e.glOptions,{onDone:(e,r)=>{if(e)throw e}}),n=require("regl")(r),a=new Map;return function(e){var r;n.poll(),(r=e).rendering=Object.assign({},renderDefaults,r.rendering),renderContext(n)(r,e=>{n.clear({color:r.rendering.background,depth:1}),r.entities&&r.entities.sort((e,r)=>{const n="transparent"in e.visuals&&e.visuals.transparent;return n===("transparent"in r.visuals&&r.visuals.transparent)?0:n?1:-1}).forEach(e=>{const{visuals:t}=e;if((!("show"in t)||t.show)&&t.drawCmd&&r.drawCommands[t.drawCmd]){let s;t.cacheId?s=a.get(t.cacheId):(t.cacheId=a.size,s=r.drawCommands[t.drawCmd](n,e),a.set(t.cacheId,s)),s({...e,...t,camera:r.camera})}})})}};module.exports=prepareRender;
 
-},{"./renderContext":109,"./renderDefaults":110,"regl":87}],109:[function(require,module,exports){
+},{"./renderContext":110,"./renderDefaults":111,"regl":87}],110:[function(require,module,exports){
 const mat4=require("gl-mat4"),renderWrapper=(e,i={})=>{const{fbo:r}=i,n={cull:{enable:!0},context:{lightDirection:[.2,.2,1]},uniforms:{view:(e,i)=>i.camera.view,eye:(e,i)=>i.camera.position,projection:(e,i)=>i.camera.projection,camNear:(e,i)=>i.camera.near,camFar:(e,i)=>i.camera.far,invertedView:(e,i)=>mat4.invert([],i.camera.view),lightPosition:(e,i)=>i&&i.rendering&&i.rendering.lightPosition?i.rendering.lightPosition:[100,200,100],lightDirection:(e,i)=>i&&i.rendering&&i.rendering.lightDirection?i.rendering.lightDirection:e.lightDirection||[0,0,0],lightView:e=>mat4.lookAt([],e.lightDirection,[0,0,0],[0,0,1]),lightProjection:mat4.ortho([],-25,-25,-20,20,-25,25),lightColor:(e,i)=>i&&i.rendering&&i.rendering.lightColor?i.rendering.lightColor:[1,.8,0],ambientLightAmount:(e,i)=>i&&i.rendering&&i.rendering.ambientLightAmount?i.rendering.ambientLightAmount:.3,diffuseLightAmount:(e,i)=>i&&i.rendering&&i.rendering.diffuseLightAmount?i&&i.rendering&&i.rendering.diffuseLightAmount:.89,specularLightAmount:(e,i)=>i&&i.rendering&&i.rendering.specularLightAmount?i.rendering.specularLightAmount:.16,uMaterialShininess:(e,i)=>i&&i.rendering&&i.rendering.materialShininess?i.rendering.materialShininess:8,materialAmbient:[.5,.8,.3],materialDiffuse:[.5,.8,.3],materialSpecular:[.5,.8,.3]},framebuffer:r};return e(Object.assign({},n,i.extras))};module.exports=renderWrapper;
 
-},{"gl-mat4":26}],110:[function(require,module,exports){
+},{"gl-mat4":26}],111:[function(require,module,exports){
 module.exports={background:[1,1,1,1],meshColor:[0,.6,1,1],lightColor:[1,1,1,1],lightDirection:[.2,.2,1],lightPosition:[100,200,100],ambientLightAmount:.3,diffuseLightAmount:.89,specularLightAmount:.16,materialShininess:8};
 
 },{}]},{},[98])(98)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jscad/regl-renderer",
-  "version": "2.5.9",
+  "version": "2.6.2",
   "description": "Renderer for JSCAD Geometries",
   "homepage": "https://openjscad.xyz/",
   "repository": "https://github.com/jscad/OpenJSCAD.org",
@@ -36,13 +36,12 @@
   },
   "devDependencies": {
     "@jscad/img-utils": "2.0.5",
-    "@jscad/modeling": "2.9.3",
+    "@jscad/modeling": "2.9.6",
     "ava": "3.15.0",
     "browserify": "16.5.1",
     "budo": "11.6.4",
     "nyc": "15.1.0",
-    "typescript": "^4.0.0",
     "uglifyify": "5.0.2"
   },
-  "gitHead": "85fa1fcdfb2d516a201ecf31da242e64b5b3274e"
+  "gitHead": "9768af96e5da00cd113c00ddeb0f6046707819b1"
 }

package/src/geometry-utils-V2/geom2ToGeometries.js

@@ -17,16 +17,36 @@ const geom2ToGeometries = (options, solid) => {
 
   if ('color' in solid) color = solid.color
   const isTransparent = (color[3] < 1.0)
-
+  const colors = []
   const numgeometries = Math.floor(sides.length / (maxIndex)) + 1
 
+  const addColor = (startColor, endColor) => {
+    // each line needs 2 colors: startColor and endColor
+    // endColor is optional
+    colors.push(startColor, endColor || startColor)
+  }
+
   const geometries = []
   for (let g = 0; g < numgeometries; g++) {
     const offset = g * maxIndex
     const endset = Math.min(offset + maxIndex, sides.length)
     const positions = []
+
     for (let i = offset; i < endset; i++) {
       const side = sides[i]
+      if (side.color) {
+        // backfill colors, so colors array is not used unless at least one side has color defined
+        if (colors.length === 0 && positions.length > 0) {
+          const toFill = positions.length
+          for (let j = 0; j < toFill; j++) {
+            colors.push(color) // push default color
+          }
+        }
+        // shader actually allows for gradient on the lines by design
+        addColor(side.color, side.endColor)
+      } else if (colors.length) {
+        addColor(color)
+      }
       positions.push([side[0][0], side[0][1], 0])
       positions.push([side[1][0], side[1][1], 0])
     }
@@ -38,7 +58,7 @@ const geom2ToGeometries = (options, solid) => {
     // FIXME positions should be Float32Array buffers to eliminate another conversion
     // FIXME normals should be Float32Array buffers to eliminate another conversion
     // FIXME indices should be Uint16Array buffers to eliminate another conversion
-    geometries.push({ type: '2d', positions, normals, indices, transforms, color, isTransparent })
+    geometries.push({ type: '2d', positions, normals, indices, transforms, color, colors, isTransparent })
   }
   return geometries
 }

package/src/geometry-utils-V2/geom2ToGeometries.test.js

@@ -39,6 +39,7 @@ test('geom2ToGeometries (solid with sides)', (t) => {
   }
   const expected = [{
     color: [1, 2, 3, 0.8],
+    colors: [],
     indices: [0, 1, 2, 3, 4, 5],
     normals: [[0, 0, -1], [0, 0, -1], [0, 0, -1], [0, 0, -1], [0, 0, -1], [0, 0, -1]],
     positions: [[0, 0, 0], [1, 0, 0], [1, 0, 0], [1, 1, 0], [1, 1, 0], [0, 0, 0]],

package/src/rendering/commands/drawLines/index.js

@@ -7,17 +7,21 @@ const drawLines = (regl, params = {}) => {
     color: meshColor,
     geometry: undefined
   }
-  let { geometry, color } = Object.assign({}, defaults, params)
+  let { geometry, color, transparent } = 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)
+  const hasVertexColors = !!(geometry.colors && geometry.colors.length > 0)
+
+  const vert = hasVertexColors ? require('./vColorShaders').vert : require('./meshShaders').vert
+  const frag = hasVertexColors ? require('./vColorShaders').frag : require('./colorOnlyShaders').frag
 
   const commandParams = {
     primitive: 'lines',
-    vert: require('./meshShaders').vert,
-    frag: require('./colorOnlyShaders').frag,
+    vert,
+    frag,
 
     uniforms: {
       model: (context, props) => props.model || geometry.transforms || mat4.create(),
@@ -25,9 +29,23 @@ const drawLines = (regl, params = {}) => {
     },
     attributes: {
       position: regl.buffer({ usage: 'static', type: 'float', data: geometry.positions })
+    },
+    depth: { enable: !transparent }
+  }
+
+  // blending is a bit tricky
+  // https://stackoverflow.com/questions/51938739/regl-color-and-alpha-blending-of-primitives
+  if (transparent) {
+    commandParams.blend = {
+      enable: true,
+      func: { src: 'src alpha', dst: 'one minus src alpha' }
     }
   }
 
+  if (hasVertexColors) {
+    commandParams.attributes.color = regl.buffer({ usage: 'static', type: 'float', data: geometry.colors })
+  }
+
   if (hasIndices) {
     commandParams.elements = regl.elements({ usage: 'static', type: 'uint16', data: geometry.indices })
   }

package/src/rendering/commands/drawLines/meshShaders.js

@@ -1,3 +1,29 @@
+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;
+}
+`
+
 const meshFrag = `
 precision mediump float;
 varying vec3 surfaceNormal;
@@ -29,26 +55,4 @@ void main () {
   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 }

package/src/rendering/commands/drawLines/vColorShaders.js

@@ -0,0 +1,35 @@
+const vColorVert = `
+precision mediump float;
+
+uniform float camNear, camFar;
+uniform mat4 model, view, projection;
+
+attribute vec3 position, normal;
+attribute vec4 color;
+
+varying vec3 surfaceNormal, surfacePosition;
+varying vec4 _worldSpacePosition;
+varying vec4 vColor;
+
+void main() {
+  vColor = color;
+
+  surfacePosition = position;
+  surfaceNormal = normal;
+  vec4 worldSpacePosition = model * vec4(position, 1);
+  _worldSpacePosition = worldSpacePosition;
+
+  vec4 glPosition = projection * view * model * vec4(position, 1);
+  gl_Position = glPosition;
+}
+`
+
+const vColorFrag = `
+precision mediump float;
+varying vec4 vColor;
+
+void main () {
+  gl_FragColor = vColor;
+}
+`
+module.exports = { frag: vColorFrag, vert: vColorVert }

package/src/rendering/commands/drawMesh/index.js

@@ -9,7 +9,7 @@ const drawMesh = (regl, params = { extras: {} }) => {
     geometry: undefined,
     color: meshColor
   }
-  const { geometry, dynamicCulling, useVertexColors, color } = Object.assign({}, defaults, params)
+  const { geometry, dynamicCulling, useVertexColors, color, transparent } = Object.assign({}, defaults, params)
 
   // let ambientOcclusion = vao(geometry.indices, geometry.positions, 64, 64)
   const ambientOcclusion = regl.buffer([])
@@ -54,12 +54,14 @@ const drawMesh = (regl, params = { extras: {} }) => {
       enable: true,
       face: cullFace
     },
-    depth: {
-      enable: true
-    },
-    blend: {
-      enable: true,
+    depth: { enable: !transparent }
+  }
 
+  // blending is a bit tricky
+  // https://stackoverflow.com/questions/51938739/regl-color-and-alpha-blending-of-primitives
+  if (transparent) {
+    commandParams.blend = {
+      enable: true,
       func: { src: 'src alpha', dst: 'one minus src alpha' }
     }
   }