Address a pointSize NaN bug

.github/workflows/codeql-analysis.yml

@@ -25,9 +25,9 @@ jobs:
 
     # Initializes the CodeQL tools for scanning.
     - name: Initialize CodeQL
-      uses: github/codeql-action/init@v1
+      uses: github/codeql-action/init@v2
       with:
         languages: ${{ matrix.language }}
 
     - name: Perform CodeQL analysis
-      uses: github/codeql-action/analyze@v1
+      uses: github/codeql-action/analyze@v2

README.md

@@ -2,9 +2,9 @@
 
 [![jsdelivr](https://data.jsdelivr.com/v1/package/npm/@mathicsorg/mathics-threejs-backend/badge)](https://www.jsdelivr.com/package/npm/@mathicsorg/mathics-threejs-backend)
 
-A JavaScript library for rendering [Mathics](https://mathics.org) (and eventually Wolfram Language) [Graphics3D](https://reference.wolfram.com/language/ref/Graphics3D.html) objects.
+A JavaScript library for rendering [Mathics3](https://mathics.org) (and eventually Wolfram Language) [Graphics3D](https://reference.wolfram.com/language/ref/Graphics3D.html) objects.
 
-This can be used in Mathics front ends like [Mathics-Django](https://pypi.org/project/Mathics-Django/) and [Symja](https://github.com/axkr/symja_android_library) to handle 3D graphics. The code may also be useful as a guide for other kinds of Mathics/WL frontends to other kinds of JavaScript graphics engines.
+This can be used in Mathics3 front ends like [Mathics-Django](https://pypi.org/project/Mathics-Django/) and [Symja](https://github.com/axkr/symja_android_library) to handle 3D graphics. The code may also be useful as a guide for other kinds of Mathics/WL frontends to other kinds of JavaScript graphics engines.
 
 ## Example:
 ```js

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@mathicsorg/mathics-threejs-backend",
-	"version": "1.3.1",
+	"version": "1.3.2",
 	"threejs_revision": 146,
 	"description": "Mathics 3D Graphics backend using three.js",
 	"source": "src/index.js",

src/graphics3d.js

@@ -10,13 +10,13 @@ import {
 	WebGLRenderer
 } from '../vendors/three.js';
 
-import calculateExtent from './extent.js';
 import { positionTickNumbers, setTicksInitialPosition } from './axes.js';
+import calculateExtent from './extent.js';
 import lightFunctions from './lights.js';
+import { clamp } from './math.js';
 import primitiveFunctions from './primitives/index.js';
 import { getBasicMaterial } from './shader.js';
 import { getUniformsBuffer } from './uniforms.js';
-import { clamp } from './math.js';
 
 /**
  * @typedef {import('./index.js').AxesTicks} AxesTicks
@@ -51,6 +51,19 @@ function setDefaultContainerStyle(container) {
 	if (!style.cursor) container.style.cursor = 'pointer';
 }
 
+/**
+ * Read the container size. Returns 0 in case the inputs are invalid.
+ * @param {HTMLElement} container
+ */
+function getContainerSize(container) {
+	const { width, height } = getComputedStyle(container);
+
+	return {
+		width: parseFloat(width) || 0,
+		height: parseFloat(height) || 0
+	};
+}
+
 /**
  * Plot the data
  * @param {HTMLElement} container
@@ -144,6 +157,9 @@ export default function (
 	scene.add(camera);
 
 	const uniforms = getUniformsBuffer();
+	const containerSize = getContainerSize(container);
+
+	uniforms.viewportSize.value = [containerSize.width, containerSize.height];
 
 	lighting.forEach(
 		(element) => lightFunctions[element.type](element, uniforms, extent)
@@ -313,10 +329,7 @@ export default function (
 		alpha: true
 	});
 
-	renderer.setSize(
-		parseInt(getComputedStyle(container).width),
-		parseInt(getComputedStyle(container).height)
-	);
+	renderer.setSize(containerSize.width, containerSize.height);
 	renderer.setPixelRatio(window.devicePixelRatio);
 	renderer.domElement.style.width = '100%';
 	renderer.domElement.style.height = '100%';
@@ -527,9 +540,11 @@ export default function (
 	container.addEventListener('touchend', onMouseUp);
 
 	new ResizeObserver(() => {
-		const { width, height } = getComputedStyle(container);
+		const { width, height } = getContainerSize(container);
+
+		uniforms.viewportSize.value = [width, height];
 
-		renderer.setSize(parseInt(width), parseInt(height));
+		renderer.setSize(width, height);
 
 		render();
 

src/primitives/line.js

@@ -20,7 +20,7 @@ import { getBasicMaterial } from '../shader.js';
  *
  * @type {import('./index.js').PrimitiveFunction}
  */
-export default function ({ color = /** @type {[number, number, number]} */([0, 0, 0]), coords, dashed = false, gapSize = 10, opacity = 1 }, uniforms, extent, container) {
+export default function ({ color = /** @type {[number, number, number]} */([0, 0, 0]), coords, dashed = false, gapSize = 10, opacity = 1 }, uniforms, extent) {
 	return new Line(
 		new BufferGeometry().setAttribute(
 			'position',
@@ -34,6 +34,7 @@ export default function ({ color = /** @type {[number, number, number]} */([0, 0
 			? new RawShaderMaterial({
 				opacity,
 				transparent: opacity !== 1,
+				uniforms,
 				vertexShader: `#version 300 es
 					in vec3 position;
 
@@ -53,17 +54,16 @@ export default function ({ color = /** @type {[number, number, number]} */([0, 0
 				fragmentShader: `#version 300 es
 					precision mediump float;
 
+					uniform vec2 viewportSize;
+
 					flat in vec2 startPosition;
 					in vec2 vertexPosition;
 
 					out vec4 pc_fragColor;
 
 					void main() {
 						float doubleDistance = length(
-							(vertexPosition - startPosition) * vec2(
-								${parseInt(getComputedStyle(container).width)},
-								${parseInt(getComputedStyle(container).height)}
-							)
+							(vertexPosition - startPosition) * viewportSize
 						);
 
 						float quadrupleGapInverse = ${(1 / (4 * gapSize)).toFixed(4)};

src/primitives/point.js

@@ -19,7 +19,12 @@ import { getPopulatedCoordinateBuffer } from '../bufferUtils.js';
  *
  * @type {import('./index.js').PrimitiveFunction}
  */
-export default function ({ color = [0, 0, 0], coords, opacity = 1, pointSize = 1 }, uniforms, extent, container) {
+
+export default function (
+	{ color = [0, 0, 0], coords, opacity = 1, pointSize = 1 },
+	uniforms,
+	extent
+) {
 	return new Points(
 		new BufferGeometry().setAttribute(
 			'position',
@@ -28,35 +33,31 @@ export default function ({ color = [0, 0, 0], coords, opacity = 1, pointSize = 1
 				3
 			)
 		),
-		// @ts-expect-error: bad three.js typing
+		// We are passing a PointsMaterial when we should be passing a RawShaderMaterial.
+		// rocky doesn't know how to properly fix this. So...
+		// @ts-ignore
 		new RawShaderMaterial({
 			transparent: true,
 			depthWrite: false,
+			uniforms,
 			vertexShader: `#version 300 es
-				in vec3 position;
-
-				uniform mat4 projectionMatrix;
-				uniform mat4 modelViewMatrix;
+                in vec3 position;
+                uniform mat4 projectionMatrix;
+                uniform mat4 modelViewMatrix;
+                uniform vec2 viewportSize;
 
-				void main() {
-					gl_PointSize = ${(pointSize * parseInt(getComputedStyle(container).width)).toFixed(4)};
-					gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1);
-				}
-			`,
+                void main() {
+                    gl_PointSize = viewportSize.x * ${pointSize};
+                    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1);
+                }
+            `,
 			fragmentShader: `#version 300 es
-				out lowp vec4 pc_fragColor;
-
-				void main() {
-					if (length(gl_PointCoord - 0.5) > 0.5) discard;
-
-					pc_fragColor = vec4(
-						${color[0]},
-						${color[1]},
-						${color[2]},
-						${opacity}
-					);
-				}
-			`
+                out lowp vec4 pc_fragColor;
+                void main() {
+                    if (length(gl_PointCoord - 0.5) > 0.5) discard;
+                    pc_fragColor = vec4(${color[0]}, ${color[1]}, ${color[2]}, ${opacity});
+                }
+            `
 		})
 	);
 }

src/uniforms.js

@@ -19,7 +19,8 @@
  *         coneCos: number,
  *         direction?: import('../vendors/three.js').Vector3,
  *         position?: import('../vendors/three.js').Vector3
- *     }[] }
+ *     }[] },
+ *     viewportSize: { value: [number, number] }
  * }} UniformsBuffer
  */
 
@@ -33,6 +34,7 @@ export function getUniformsBuffer() {
 		ambientLightColor: { value: [0, 0, 0] },
 		directionalLights: { value: [] },
 		pointLights: { value: [] },
-		spotLights: { value: [] }
+		spotLights: { value: [] },
+		viewportSize: { value: [0, 0] }
 	};
 }