DomeGeometry for the skydome rendering - refactor

src/index.js

@@ -176,6 +176,7 @@ export { calculateNormals, calculateTangents } from './scene/geometry/geometry-u
 export { CapsuleGeometry } from './scene/geometry/capsule-geometry.js';
 export { ConeGeometry } from './scene/geometry/cone-geometry.js';
 export { CylinderGeometry } from './scene/geometry/cylinder-geometry.js';
+export { DomeGeometry } from './scene/geometry/dome-geometry.js';
 export { Geometry } from './scene/geometry/geometry.js';
 export { BoxGeometry } from './scene/geometry/box-geometry.js';
 export { PlaneGeometry } from './scene/geometry/plane-geometry.js';

src/scene/geometry/dome-geometry.js

@@ -0,0 +1,67 @@
+import { SphereGeometry } from "./sphere-geometry.js";
+
+/**
+ * A procedural dome-shaped geometry.
+ *
+ * The size and tesselation properties of the dome can be controlled via constructor parameters.
+ * Radius is fixed to 0.5.
+ *
+ * Note that the dome is created with UVs in the range of 0 to 1.
+ *
+ * @param {import('../../platform/graphics/graphics-device.js').GraphicsDevice} device - The graphics
+ * device used to manage the mesh.
+ * @param {object} [opts] - An object that specifies optional inputs for the function as follows:
+ * @param {number} [opts.latitudeBands] - The number of divisions along the latitudinal axis of the
+ * sphere (defaults to 16).
+ * @param {number} [opts.longitudeBands] - The number of divisions along the longitudinal axis of
+ * the sphere (defaults to 16).
+ * @category Graphics
+ */
+class DomeGeometry extends SphereGeometry {
+    constructor(opts = {}) {
+
+        // create a sphere geometry
+        const radius = 0.5; // the math and constants are based on a unit sphere
+        const latitudeBands = opts.latitudeBands ?? 16;
+        const longitudeBands = opts.longitudeBands ?? 16;
+
+        super({
+            radius,
+            latitudeBands,
+            longitudeBands
+        });
+
+        // post-process the geometry to flatten the bottom hemisphere
+        const bottomLimit = 0.1; // flatten bottom y-coordinate
+        const curvatureRadius = 0.95; // normalized distance from the center that is completely flat
+        const curvatureRadiusSq = curvatureRadius * curvatureRadius; // derived values
+
+        const positions = this.positions;
+        for (let i = 0; i < positions.length; i += 3) {
+
+            const x = positions[i] / radius;
+            let y = positions[i + 1] / radius;
+            const z = positions[i + 2] / radius;
+
+            // flatten the lower hemisphere
+            if (y < 0) {
+
+                // scale vertices on the bottom
+                y *= 0.3;
+
+                // flatten the center
+                if (x * x + z * z < curvatureRadiusSq) {
+                    y = -bottomLimit;
+                }
+            }
+
+            // adjust y to have the center at the flat bottom
+            y += bottomLimit;
+            y *= radius;
+
+            positions[i + 1] = y;
+        }
+    }
+}
+
+export { DomeGeometry };

src/scene/skybox/sky-geometry.js

@@ -2,7 +2,7 @@ import { Debug } from "../../core/debug.js";
 import { SKYTYPE_BOX, SKYTYPE_DOME, SKYTYPE_INFINITE } from "../constants.js";
 import { Mesh } from "../mesh.js";
 import { BoxGeometry } from "../geometry/box-geometry.js";
-import { Geometry } from "../geometry/geometry.js";
+import { DomeGeometry } from "../geometry/dome-geometry.js";
 
 class SkyGeometry {
     static create(device, type) {
@@ -23,68 +23,15 @@ class SkyGeometry {
     }
 
     static dome(device) {
-        // flatten bottom y-coordinate
-        const bottomLimit = 0.1;
 
-        // normalized distance from the center that is completely flat
-        const curvatureRadius = 0.95;
+        const geom = new DomeGeometry({
+            latitudeBands: 50,
+            longitudeBands: 50
+        });
 
-        // derived values
-        const curvatureRadiusSq = curvatureRadius * curvatureRadius;
-
-        const radius = 0.5;
-        const latitudeBands = 50;
-        const longitudeBands = 50;
-        const positions = [];
-        const indices = [];
-
-        for (let lat = 0; lat <= latitudeBands; lat++) {
-            const theta = lat * Math.PI / latitudeBands;
-            const sinTheta = Math.sin(theta);
-            const cosTheta = Math.cos(theta);
-
-            for (let lon = 0; lon <= longitudeBands; lon++) {
-                // Sweep the sphere from the positive Z axis to match a 3DS Max sphere
-                const phi = lon * 2 * Math.PI / longitudeBands - Math.PI / 2;
-                const sinPhi = Math.sin(phi);
-                const cosPhi = Math.cos(phi);
-
-                const x = cosPhi * sinTheta;
-                let y = cosTheta;
-                const z = sinPhi * sinTheta;
-
-                // flatten the lower hemisphere
-                if (y < 0) {
-
-                    // scale vertices on the bottom
-                    y *= 0.3;
-
-                    // flatten the center
-                    if (x * x + z * z < curvatureRadiusSq) {
-                        y = -bottomLimit;
-                    }
-                }
-
-                // adjust y to have the center at the flat bottom
-                y += bottomLimit;
-
-                positions.push(x * radius, y * radius, z * radius);
-            }
-        }
-
-        for (let lat = 0; lat < latitudeBands; ++lat) {
-            for (let lon = 0; lon < longitudeBands; ++lon) {
-                const first  = (lat * (longitudeBands + 1)) + lon;
-                const second = first + longitudeBands + 1;
-
-                indices.push(first + 1, second, first);
-                indices.push(first + 1, second + 1, second);
-            }
-        }
-
-        const geom = new Geometry();
-        geom.positions = positions;
-        geom.indices = indices;
+        // remove unused normals and uvs
+        geom.normals = undefined;
+        geom.uvs = undefined;
 
         return Mesh.fromGeometry(device, geom);
     }