@jscad/x3d-serializer 2.4.3 → 2.4.5

package/CHANGELOG.md

@@ -3,6 +3,29 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.4.5](https://github.com/jscad/OpenJSCAD.org/compare/@jscad/x3d-serializer@2.4.4...@jscad/x3d-serializer@2.4.5) (2023-06-27)
+
+
+### Bug Fixes
+
+* **x3d-serializer:** added specular highlights and conversion of shape names ([ba26567](https://github.com/jscad/OpenJSCAD.org/commit/ba26567f207a3e7529778ec89436956cf03592bf))
+
+
+
+
+
+## [2.4.4](https://github.com/jscad/OpenJSCAD.org/compare/@jscad/x3d-serializer@2.4.3...@jscad/x3d-serializer@2.4.4) (2023-04-30)
+
+
+### Bug Fixes
+
+* **x3d-serializer:** corrected color and transparency conversions ([cc99548](https://github.com/jscad/OpenJSCAD.org/commit/cc9954853c30c6a82fcd26cda686e7f51f9fa304))
+* **x3d-serializer:** corrected colors, orientation of scene to Y up, and added new option for smoothing ([3444e2d](https://github.com/jscad/OpenJSCAD.org/commit/3444e2d462446694e62da71b130dfb4e56e92f82))
+
+
+
+
+
 ## [2.4.3](https://github.com/jscad/OpenJSCAD.org/compare/@jscad/x3d-serializer@2.4.2...@jscad/x3d-serializer@2.4.3) (2022-11-26)
 
 **Note:** Version bump only for package @jscad/x3d-serializer

package/README.md

@@ -27,7 +27,10 @@ The serialization of the following geometries are possible.
 - serialization of 2D geometries (geom2) to X3D Polyline2D
 - serialization of 2D paths (path2) to X3D Polyline2D
 
-Material (color) is added to X3D shapes when found on the geometry.
+The id attribute is used as the DEF name for the generated X3D shape when found on a geometry.  
+Material (color) is added to X3D shapes when found on a geometry.
+
+All shapes are wrapped in a rotation transform to align the positive Z direction of JSCAD with the vertical up direction in X3D.
 
 ## Table of Contents
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jscad/x3d-serializer",
-  "version": "2.4.3",
+  "version": "2.4.5",
   "description": "X3D Serializer for JSCAD",
   "homepage": "https://openjscad.xyz/",
   "repository": "https://github.com/jscad/OpenJSCAD.org",
@@ -33,12 +33,12 @@
   "license": "MIT",
   "dependencies": {
     "@jscad/array-utils": "2.1.4",
-    "@jscad/modeling": "2.11.0",
+    "@jscad/modeling": "2.12.0",
     "onml": "1.3.0"
   },
   "devDependencies": {
     "ava": "3.15.0",
     "nyc": "15.1.0"
   },
-  "gitHead": "5899622c5ffc640001da7261d7c06a1223064ccc"
+  "gitHead": "e269f212db5a00cda740d2f7ad3e5206d1eb839f"
 }

package/src/index.js

@@ -34,7 +34,7 @@ Notes:
 const { geometries, modifiers } = require('@jscad/modeling')
 const { geom2, geom3, path2, poly2, poly3 } = geometries
 
-const { flatten, toArray } = require('@jscad/array-utils')
+const { flatten } = require('@jscad/array-utils')
 
 const stringify = require('onml/lib/stringify')
 
@@ -43,11 +43,15 @@ const stringify = require('onml/lib/stringify')
 // https://x3dgraphics.com/examples/X3dForWebAuthors/Chapter13GeometryTrianglesQuadrilaterals/
 
 const mimeType = 'model/x3d+xml'
+const defNames = new Map()
 
 /**
  * Serialize the give objects to X3D elements (XML).
  * @param {Object} options - options for serialization, REQUIRED
  * @param {Array} [options.color=[0,0,1,1]] - default color for objects
+ * @param {Number} [options.shininess=8/256] - x3d shininess for specular highlights
+ * @param {Boolean} [options.smooth=false] - use averaged vertex normals
+ * @param {Number} [options.decimals=1000] - multiplier before rounding to limit precision
  * @param {Boolean} [options.metadata=true] - add metadata to 3MF contents, such at CreationDate
  * @param {String} [options.unit='millimeter'] - unit of design; millimeter, inch, feet, meter or micrometer
  * @param {Function} [options.statusCallback] - call back function for progress ({ progress: 0-100 })
@@ -61,6 +65,8 @@ const mimeType = 'model/x3d+xml'
 const serialize = (options, ...objects) => {
   const defaults = {
     color: [0, 0, 1, 1.0], // default colorRGBA specification
+    shininess: 8 / 256,
+    smooth: false,
     decimals: 1000,
     metadata: true,
     unit: 'millimeter', // millimeter, inch, feet, meter or micrometer
@@ -80,20 +86,20 @@ const serialize = (options, ...objects) => {
   let body = ['X3D',
     {
       profile: 'Interchange',
-      version: '4.0',
+      version: '3.3',
       'xmlns:xsd': 'http://www.w3.org/2001/XMLSchema-instance',
-      'xsd:noNamespaceSchemaLocation': 'http://www.web3d.org/specifications/x3d-4.0.xsd'
+      'xsd:noNamespaceSchemaLocation': 'http://www.web3d.org/specifications/x3d-3.3.xsd'
     }
   ]
   if (options.metadata) {
     body.push(['head', {},
       ['meta', { name: 'creator', content: 'Created by JSCAD' }],
       ['meta', { name: 'reference', content: 'https://www.openjscad.xyz' }],
-      ['meta', { name: 'created', content: new Date().toISOString()}]
+      ['meta', { name: 'created', content: new Date().toISOString() }]
     ])
   } else {
     body.push(['head', {},
-      ['meta', { name: 'creator', content: 'Created by JSCAD' }],
+      ['meta', { name: 'creator', content: 'Created by JSCAD' }]
     ])
   }
   body = body.concat(convertObjects(objects, options))
@@ -108,7 +114,6 @@ ${stringify(body, 2)}`
 }
 
 const convertObjects = (objects, options) => {
-  let scene = ['Scene', {}]
   const shapes = []
   objects.forEach((object, i) => {
     options.statusCallback && options.statusCallback({ progress: 100 * i / objects.length })
@@ -128,7 +133,8 @@ const convertObjects = (objects, options) => {
       shapes.push(convertPath2(object, options))
     }
   })
-  scene = scene.concat(shapes)
+  const transform = ['Transform', { rotation: '1 0 0 -1.5708' }, ...shapes]
+  const scene = ['Scene', {}, transform]
   return [scene]
 }
 
@@ -138,9 +144,9 @@ const convertObjects = (objects, options) => {
 const convertPath2 = (object, options) => {
   const points = path2.toPoints(object).slice()
   if (points.length > 1 && object.isClosed) points.push(points[0])
-  shape = ['Shape', {}, convertPolyline2D(poly2.create(points), options)]
+  const shape = ['Shape', shapeAttributes(object), convertPolyline2D(poly2.create(points), options)]
   if (object.color) {
-    shape.push(convertAppearance(object, options))
+    shape.push(convertAppearance(object, 'emissiveColor', options))
   }
   return shape
 }
@@ -153,37 +159,67 @@ const convertGeom2 = (object, options) => {
   const group = ['Group', {}]
   outlines.forEach((outline) => {
     if (outline.length > 1) outline.push(outline[0]) // close the outline for conversion
-    const shape = ['Shape', {}, convertPolyline2D(poly2.create(outline), options)]
+    const shape = ['Shape', shapeAttributes(object), convertPolyline2D(poly2.create(outline), options)]
     if (object.color) {
-      shape.push(convertAppearance(object, options))
+      shape.push(convertAppearance(object, 'emissiveColor', options))
     }
     group.push(shape)
   })
   return group
 }
 
+/*
+ * generate attributes for Shape node
+ */
+
+const shapeAttributes = (object, attributes = {}) => {
+  if (object.id) {
+    Object.assign(attributes, { DEF: checkDefName(object.id) })
+  }
+  return attributes
+}
+
+const checkDefName = (defName) => {
+  const count = defNames.get(defName) || 0
+  defNames.set(defName, count + 1)
+  if (count > 0) console.warn(`Warning: object.id set as DEF but not unique. ${defName} set ${count + 1} times.`)
+  return defName
+}
+
 /*
  * Convert the given object (poly2) to X3D source
  */
 const convertPolyline2D = (object, options) => {
   const lineSegments = object.vertices.map((p) => `${p[0]} ${p[1]}`).join(' ')
-  return ['Polyline2D', {lineSegments}]
+  return ['Polyline2D', { lineSegments }]
 }
 
-const convertAppearance = (object, options) => {
-  const diffuseColor = object.color.join(' ')
-  const emissiveColor = object.color.join(' ')
-  return ['Appearance', ['Material', {diffuseColor, emissiveColor}]]
+/*
+ * Convert color to Appearance
+ */
+const convertAppearance = (object, colorField, options) => {
+  const colorRGB = object.color.slice(0, 3)
+  const color = colorRGB.join(' ')
+  const transparency = roundToDecimals(1.0 - object.color[3], options)
+  const materialFields = { [colorField]: color, transparency }
+  if (colorField === 'diffuseColor') {
+    Object.assign(
+      materialFields,
+      { specularColor: '0.2 0.2 0.2', shininess: options.shininess })
+  }
+  return ['Appearance', ['Material', materialFields]]
 }
 
 /*
  * Convert the given object (geom3) to X3D source
  */
 const convertGeom3 = (object, options) => {
-  const shape = ['Shape', {}, convertMesh(object, options)]
+  const shape = ['Shape', shapeAttributes(object), convertMesh(object, options)]
+  let appearance = ['Appearance', {}, ['Material']]
   if (object.color) {
-    shape.push(convertAppearance(object, options))
+    appearance = convertAppearance(object, 'diffuseColor', options)
   }
+  shape.push(appearance)
   return shape
 }
 
@@ -197,10 +233,10 @@ const convertMesh = (object, options) => {
 
   const faceset = [
     'IndexedTriangleSet',
-    { ccw: 'true', colorPerVertex: 'false', solid: 'false', index: indexList },
-    ['Coordinate', { point: pointList }],
+    { ccw: 'true', colorPerVertex: 'false', normalPerVertex: options.smooth, solid: 'false', index: indexList },
+    ['Coordinate', { point: pointList }]
   ]
-  if (! object.color) {
+  if (!object.color) {
     faceset.push(['Color', { color: colorList }])
   }
   return faceset
@@ -236,6 +272,8 @@ const convertToColor = (polygon, options) => {
   return `${color[0]} ${color[1]} ${color[2]}`
 }
 
+const roundToDecimals = (float, options) => Math.round(float * options.decimals) / options.decimals
+
 /*
  * This function converts the given polygons into three lists
  * - indexList : index of each vertex in the triangle (tuples)
@@ -257,9 +295,9 @@ const polygons2coordinates = (polygons, options) => {
 
       // add the vertex to the list of points (and index) if not found
       if (!vertexTagToCoordIndexMap.has(id)) {
-        const x = Math.round(vertex[0] * options.decimals) / options.decimals
-        const y = Math.round(vertex[1] * options.decimals) / options.decimals
-        const z = Math.round(vertex[2] * options.decimals) / options.decimals
+        const x = roundToDecimals(vertex[0], options)
+        const y = roundToDecimals(vertex[1], options)
+        const z = roundToDecimals(vertex[2], options)
         pointList.push(`${x} ${y} ${z}`)
         vertexTagToCoordIndexMap.set(id, pointList.length - 1)
       }

package/tests/geom2ToX3D.test.js

@@ -24,7 +24,7 @@ test('serialize 2D geometry to X3D Polyline2D', (t) => {
 
   const shape2 = primitives.rectangle()
 
-  results = serialize({metadata: false}, shape2)
+  results = serialize({ metadata: false }, shape2)
   t.is(results.length, 1)
 
   obs = results[0]
@@ -41,7 +41,7 @@ test('serialize 2D geometry to X3D Polyline2D', (t) => {
 
   const shape3 = colors.colorize([0, 0, 0], shape2)
 
-  results = serialize({metadata: false}, shape3)
+  results = serialize({ metadata: false }, shape3)
   t.is(results.length, 1)
 
   obs = results[0]
@@ -58,11 +58,10 @@ test('serialize 2D geometry to X3D Polyline2D', (t) => {
   // for color
   t.is(countOf('Appearance', obs), 2)
   t.is(countOf('Material', obs), 1)
-  t.is(countOf('diffuseColor', obs), 1)
+  t.is(countOf('diffuseColor', obs), 0)
   t.is(countOf('emissiveColor', obs), 1)
 
-
-  results = serialize({metadata: false}, shape2, shape3)
+  results = serialize({ metadata: false }, shape2, shape3)
   t.is(results.length, 1)
 
   obs = results[0]
@@ -79,7 +78,7 @@ test('serialize 2D geometry to X3D Polyline2D', (t) => {
   // for color
   t.is(countOf('Appearance', obs), 2)
   t.is(countOf('Material', obs), 1)
-  t.is(countOf('diffuseColor', obs), 1)
+  t.is(countOf('diffuseColor', obs), 0)
+  t.is(countOf('specularColor', obs), 0)
   t.is(countOf('emissiveColor', obs), 1)
 })
-

package/tests/geom3ToX3D.test.js

@@ -19,11 +19,11 @@ test('serialize 3D geometry to X3D IndexedTriangleSet', (t) => {
   t.is(countOf('name', obs), 3)
   t.is(countOf('content', obs), 3)
   t.is(countOf('Created by JSCAD', obs), 1)
-  t.is(countOf('Scene', obs), 1)
+  t.is(countOf('Scene', obs), 2)
 
   const geom2 = primitives.cube()
 
-  results = serializer.serialize({metadata: false}, geom2)
+  results = serializer.serialize({ metadata: false }, geom2)
   t.is(results.length, 1)
 
   obs = results[0]
@@ -34,15 +34,17 @@ test('serialize 3D geometry to X3D IndexedTriangleSet', (t) => {
   t.is(countOf('content', obs), 1)
   t.is(countOf('Created by JSCAD', obs), 1)
   t.is(countOf('Scene', obs), 2)
+  t.is(countOf('Transform', obs), 2)
   t.is(countOf('Shape', obs), 2)
+  t.is(countOf('DEF', obs), 0)
   t.is(countOf('IndexedTriangleSet', obs), 2)
   t.is(countOf('Coordinate', obs), 1)
   t.is(countOf('Color', obs), 1)
 
-
   const geom3 = colors.colorize([0.5, 1, 0.5, 1.0], transforms.center({ relativeTo: [5, 5, 5] }, primitives.cube()))
+  geom2.id = geom3.id = 'g23'
 
-  results = serializer.serialize({metadata: false}, geom2, geom3)
+  results = serializer.serialize({ metadata: false }, geom2, geom3)
   t.is(results.length, 1)
 
   obs = results[0]
@@ -54,11 +56,15 @@ test('serialize 3D geometry to X3D IndexedTriangleSet', (t) => {
   t.is(countOf('Created by JSCAD', obs), 1)
   t.is(countOf('Scene', obs), 2)
   t.is(countOf('Shape', obs), 4)
+  t.is(countOf('DEF', obs), 2)
   t.is(countOf('IndexedTriangleSet', obs), 4)
   t.is(countOf('Coordinate', obs), 2)
   // for color
-  t.is(countOf('Color', obs), 3)
-  t.is(countOf('Appearance', obs), 2)
-
+  t.is(countOf('<Color', obs), 1)
+  t.is(countOf('Appearance', obs), 4)
+  // for RGB
+  t.is(countOf('diffuseColor="0.5 1 0.5"', obs), 1)
+  t.is(countOf('specularColor', obs), 1)
+  // for facets
+  t.is(countOf('normalPerVertex="false"', obs), 2)
 })
-

package/tests/path2ToX3D.test.js

@@ -22,7 +22,7 @@ test('serialize 2D path to X3D Polyline2D', (t) => {
 
   const path2 = primitives.arc({ center: [5, 5], endAngle: 45, segments: 16 })
 
-  results = serialize({metadata: false}, path2)
+  results = serialize({ metadata: false }, path2)
   t.is(results.length, 1)
 
   obs = results[0]
@@ -35,7 +35,7 @@ test('serialize 2D path to X3D Polyline2D', (t) => {
 
   const path3 = colors.colorize([0, 0, 0], path2)
 
-  results = serialize({metadata: false}, path2, path3)
+  results = serialize({ metadata: false }, path2, path3)
   t.is(results.length, 1)
 
   obs = results[0]
@@ -48,8 +48,6 @@ test('serialize 2D path to X3D Polyline2D', (t) => {
   // and color on path3
   t.is(countOf('Appearance', obs), 2)
   t.is(countOf('Material', obs), 1)
-  t.is(countOf('diffuseColor', obs), 1)
+  t.is(countOf('diffuseColor', obs), 0)
   t.is(countOf('emissiveColor', obs), 1)
-
 })
-