added basic tests for 3d model styles

Signed-off-by: Tim Deubler <[email protected]>

packages/display/src/displays/webgl/buffer/FeatureFactory.ts

@@ -779,7 +779,7 @@ export class FeatureFactory {
                 specular = getValue('specular', style, feature, level);
 
                 if (specular) {
-                    shininess = getValue('shininess', style, feature, level) || DEFAULT_SPECULAR_SHININESS;
+                    shininess = getValue('shininess', style, feature, level) ?? DEFAULT_SPECULAR_SHININESS;
                     groupId += specular + shininess;
                     specular = this.toRGBA(specular).slice(0, 3);
                 }

packages/display/src/displays/webgl/buffer/ModelFactory.ts

@@ -227,6 +227,8 @@ class ModelFactory {
                     }
                 }
 
+                console.log(bufferUniforms);
+
                 if (index) {
                     buffer.setIndex(index);
                 } else {

packages/tests/assets/model/cube.mtl

@@ -0,0 +1,55 @@
+# Materials for the cube
+########################################################################
+# Material for the front side
+newmtl front
+# Red
+Kd 0.0 0.0 1.0
+# Specular color (white) - highlights from light
+#Ks 1.0 1.0 1.0
+# Shininess coefficient (higher values mean sharper highlights)
+#Ns 32
+########################################################################
+# Material for the back side
+newmtl back
+# Green
+Kd 1.0 1.0 0.0
+# Specular color (white) - highlights from light
+#Ks 1.0 1.0 1.0
+# Shininess coefficient (higher values mean sharper highlights)
+#Ns 32
+########################################################################
+# Material for the right side
+newmtl right
+# Blue
+Kd 1.0 0.0 1.0
+# Specular color (white) - highlights from light
+#Ks 1.0 1.0 1.0
+# Shininess coefficient (higher values mean sharper highlights)
+#Ns 1
+########################################################################
+# Material for the left side
+newmtl left
+# Yellow
+Kd 0.0 1.0 1.0
+# Specular color (white) - highlights from light
+#Ks 1.0 1.0 1.0
+# Shininess coefficient (higher values mean sharper highlights)
+#Ns 32
+########################################################################
+# Material for the top side
+newmtl top
+# Orange
+Kd 1.0 0.0 0.0
+# Specular color (white) - highlights from light
+#Ks 1.0 1.0 1.0
+# Shininess coefficient (higher values mean sharper highlights)
+#Ns 32
+########################################################################
+# Material for the bottom side
+newmtl bottom
+# Purple
+Kd 0.0 1.0 0.0
+# Specular color (white) - highlights from light
+#Ks 1.0 1.0 1.0
+# Shininess coefficient (higher values mean sharper highlights)
+#Ns 32

packages/tests/assets/model/cube.obj

@@ -0,0 +1,75 @@
+# Cube with numbered sides and colors
+#                     [Top - Orange]
+#                    v8---------v5
+#                    /|        / |
+#                   / |       /  |
+#                v7---------v6   | [Right - Blue]
+#                 |   |      |   |
+#                 |   |      |   |
+#   [Left - Yellow] |  v3------|--v2
+#                 | /        |  /  [Bottom - Purple]
+#                 |/         | /
+#                 v4---------v1
+#
+#
+#                 [Front - Red]
+#                    Y (+)
+#                    ^
+#                    |
+#                    |
+#                    +----> X (+)
+#                   /
+#                 /
+#                Z (-) (going into the screen)
+
+mtllib cube.mtl
+
+# Vertices (corners)
+v  1.0  1.0 -1.0  # v1: Front top right
+v  1.0 -1.0 -1.0  # v2: Front bottom right
+v -1.0 -1.0 -1.0  # v3: Front bottom left
+v -1.0  1.0 -1.0  # v4: Front top left
+v  1.0  1.0  1.0  # v5: Back top right
+v  1.0 -1.0  1.0  # v6: Back bottom right
+v -1.0 -1.0  1.0  # v7: Back bottom left
+v -1.0  1.0  1.0  # v8: Back top left
+
+# Texture coordinates (optional)
+vt 0.0 0.0  # Texture coordinate for corner (0,0)
+vt 1.0 0.0  # Texture coordinate for corner (1,0)
+vt 1.0 1.0  # Texture coordinate for corner (1,1)
+vt 0.0 1.0  # Texture coordinate for corner (0,1)
+
+# Normal vectors
+vn  0.0  0.0 -1.0  # Normal for the front side
+vn  0.0  0.0  1.0  # Normal for the back side
+vn  1.0  0.0  0.0  # Normal for the right side
+vn -1.0  0.0  0.0  # Normal for the left side
+vn  0.0  1.0  0.0  # Normal for the top side
+vn  0.0 -1.0  0.0  # Normal for the bottom side
+
+# Faces with material assignments
+# Front side
+g front
+usemtl front
+f 1/1/1 2/2/1 3/3/1 4/4/1
+
+# Back side
+usemtl back
+f 5/1/2 8/2/2 7/3/2 6/4/2
+
+# Right side
+usemtl right
+f 1/1/3 5/2/3 6/3/3 2/4/3
+
+# Left side
+usemtl left
+f 4/1/4 3/2/4 7/3/4 8/4/4
+
+# Top side
+usemtl top
+f 1/1/5 4/2/5 8/3/5 5/4/5
+
+# Bottom side
+usemtl bottom
+f 2/1/6 6/2/6 7/3/6 3/4/6

packages/tests/karma.display.conf.js

@@ -24,6 +24,7 @@ const cfg = Object.assign(baseCfg, {
         {id: 'core-src', pattern: 'core/dist/xyz-maps-core.min.js', watched: true, served: true, included: true},
         {id: 'display-src', pattern: 'display/dist/xyz-maps-display.min.js', watched: true, served: true, included: true},
         {pattern: 'tests/assets/tiles/*.png', watched: false, included: false, served: true},
+        {pattern: 'tests/assets/model/*', watched: false, included: false, served: true},
         {pattern: 'tests/dist/display/displayTests*.js', watched: true, served: true, included: true},
         {pattern: 'tests/dist/display/specs*.js', watched: true, served: true, included: true}
     ],
@@ -40,6 +41,7 @@ const cfg = Object.assign(baseCfg, {
 
 module.exports = (config) => {
     config.set(cfg);
+    console.log(cfg.files);
 };
 
 module.exports.cfg = cfg;

packages/tests/specs/display/layer/style_type_model.json

@@ -0,0 +1,22 @@
+{
+    "layers": [{
+        "id": "modelLayer",
+        "provider": {
+            "id": "modelProvider",
+            "type": "LocalProvider"
+        },
+        "min": 14,
+        "max": 20,
+        "data": {
+            "local": [{
+                "id": "model1",
+                "geometry": {
+                    "coordinates": [73.549401, 19.815739, 0],
+                    "type": "Point"
+                },
+                "type": "Feature",
+                "properties": {}
+            }]
+        }
+    }]
+}

packages/tests/specs/display/layer/style_type_model.ts

@@ -0,0 +1,135 @@
+/*
+ * Copyright (C) 2019-2024 HERE Europe B.V.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ * License-Filename: LICENSE
+ */
+
+import {waitForViewportReady} from 'displayUtils';
+import {getCanvasPixelColor, prepare} from 'utils';
+import {Map} from '@here/xyz-maps-display';
+import dataset from './style_type_model.json';
+
+
+describe('3d Model Styles', function() {
+    const expect = chai.expect;
+
+    let modelLayer;
+    let display;
+    let mapContainer;
+    let feature;
+
+    let baseModelStyle = {
+        'zIndex': 0, 'type': 'Model', 'model': 'base/tests/assets/model/cube.obj', 'scale': [20, 20, 20],
+        'specular': [0, 0, 0], 'shininess': 0
+    };
+
+    before(async () => {
+        let preparedData = await prepare(dataset);
+        display = new Map(document.getElementById('map'), {
+            // @ts-ignore
+            renderOptions: {
+                preserveDrawingBuffer: true
+            },
+            center: {longitude: 73.549401, latitude: 19.815739},
+            zoomlevel: 20,
+            layers: preparedData.getLayers()
+        });
+        await waitForViewportReady(display);
+
+        mapContainer = display.getContainer();
+        modelLayer = preparedData.getLayers('modelLayer');
+        feature = preparedData.getFeature('modelLayer', 'model1');
+    });
+
+    after(() => {
+        display.destroy();
+    });
+
+    it('validate Wavefront .obj model is loaded and displayed', async () => {
+        modelLayer.setStyleGroup(feature, [baseModelStyle]);
+
+        let color = await getCanvasPixelColor(mapContainer, {x: 400, y: 300});
+        expect(color).to.equal('#ff0000');
+    });
+
+    it('validate model orientation, rotate front face to top', async () => {
+        modelLayer.setStyleGroup(feature, [{
+            ...baseModelStyle,
+            'rotate': [Math.PI/2, 0, 0]
+        }]);
+
+        let color = await getCanvasPixelColor(mapContainer, {x: 400, y: 300});
+        expect(color).to.equal('#0000ff');
+    });
+    it('validate model orientation, rotate back face to top', async () => {
+        modelLayer.setStyleGroup(feature, [{
+            ...baseModelStyle,
+            'rotate': [-Math.PI/2, 0, 0]
+        }]);
+
+        let color = await getCanvasPixelColor(mapContainer, {x: 400, y: 300});
+        expect(color).to.equal('#ffff00');
+    });
+
+    it('validate model orientation, rotate bottom face to top', async () => {
+        modelLayer.setStyleGroup(feature, [{
+            ...baseModelStyle,
+            'rotate': [Math.PI, 0, 0]
+        }]);
+
+        let color = await getCanvasPixelColor(mapContainer, {x: 400, y: 300});
+        expect(color).to.equal('#00ff00');
+    });
+
+    it('validate model orientation, rotate left face to top', async () => {
+        modelLayer.setStyleGroup(feature, [{
+            ...baseModelStyle,
+            'rotate': [0, 0, -Math.PI/2]
+        }]);
+
+        let color = await getCanvasPixelColor(mapContainer, {x: 400, y: 300});
+        expect(color).to.equal('#00ffff');
+    });
+
+    it('validate model orientation, rotate right face to top', async () => {
+        modelLayer.setStyleGroup(feature, [{
+            ...baseModelStyle,
+            'rotate': [0, 0, Math.PI/2]
+        }]);
+
+        let color = await getCanvasPixelColor(mapContainer, {x: 400, y: 300});
+        expect(color).to.equal('#ff00ff');
+    });
+
+    it('validate model orientation, scale size', async () => {
+        modelLayer.setStyleGroup(feature, [{
+            ...baseModelStyle,
+            'scale': [40, 40, 40]
+        }]);
+
+        let color = await getCanvasPixelColor(mapContainer, {x: 200, y: 300});
+        expect(color).to.equal('#ff0000');
+    });
+
+    it('validate specular shininess', async () => {
+        modelLayer.setStyleGroup(feature, [{
+            ...baseModelStyle,
+            'specular': [1, 1, 1], 'shininess': 32
+        }]);
+        let colors = await getCanvasPixelColor(mapContainer, [{x: 400, y: 300}]);
+        expect(colors[0]).to.equal('#ffffff');
+    });
+});