Pass the container size as a uniform to point and line shaders

This is a more solid replacement of the "point size is NaN" bug fix.

Author: TiagoCavalcante

docs/build.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/graphics3d.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/line.js

@@ -23,16 +23,8 @@ import { getPopulatedCoordinateBuffer } from '../bufferUtils.js';
 export default function (
 	{ color = [0, 0, 0], coords, opacity = 1, pointSize = 1 },
 	uniforms,
-	extent,
-	container
+	extent
 ) {
-	const containerWidth = parseInt(getComputedStyle(container).width);
-	const safeWidth =
-		isNaN(containerWidth) || containerWidth <= 0 ? 500 : containerWidth;
-
-	const validatedSize = isNaN(pointSize) || pointSize <= 0 ? 1.0 : pointSize;
-	const finalPointSize = (validatedSize * safeWidth).toFixed(4);
-
 	return new Points(
 		new BufferGeometry().setAttribute(
 			'position',
@@ -47,13 +39,15 @@ export default function (
 		new RawShaderMaterial({
 			transparent: true,
 			depthWrite: false,
+			uniforms,
 			vertexShader: `#version 300 es
                 in vec3 position;
                 uniform mat4 projectionMatrix;
                 uniform mat4 modelViewMatrix;
+                uniform vec2 viewportSize;
 
                 void main() {
-                    gl_PointSize = ${finalPointSize};
+                    gl_PointSize = viewportSize.x * ${pointSize};
                     gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1);
                 }
             `,

src/primitives/point.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] }
 	};
 }