@google/model-viewer/lib/test/model-viewer-spec.js

Easily display interactive 3D models on the web and in AR!

import { $renderer } from '../model-viewer-base.js';
import { ModelViewerElement } from '../model-viewer.js';
import { waitForEvent } from '../utilities.js';
import { assetPath } from './helpers.js';
import { BasicSpecTemplate } from './templates.js';
const expect = chai.expect;
const LIGHTROOM_PATH = 'environments/lightroom_14b.hdr';
const SUNRISE_HDR_PATH = 'environments/spruit_sunrise_1k_HDR.hdr';
const SUNRISE_LDR_PATH = 'environments/spruit_sunrise_1k_LDR.jpg';
const COMPONENTS_PER_PIXEL = 4;
const setupModelViewer = async (modelViewer) => {
    modelViewer.style.width = '100px';
    modelViewer.style.height = '100px';
    modelViewer.style.backgroundColor = 'rgba(255,255,255,0)';
    const modelLoaded = waitForEvent(modelViewer, 'load');
    modelViewer.src = assetPath('models/reflective-sphere.gltf');
    modelViewer.minCameraOrbit = 'auto auto 12m';
    modelViewer.maxCameraOrbit = 'auto auto 12m';
    modelViewer.cameraOrbit = '0deg 90deg 12m';
    modelViewer.cameraTarget = '0m 0m 0m';
    modelViewer.fieldOfView = '45deg';
    await modelLoaded;
};
const setupLighting = async (modelViewer, lighting) => {
    const posterDismissed = waitForEvent(modelViewer, 'poster-dismissed');
    const lightingPath = assetPath(lighting);
    modelViewer.environmentImage = lightingPath;
    modelViewer.skyboxImage = lightingPath;
    await posterDismissed;
};
// TODO(sun765): this only test whether the screenshot
// is colorless or not. Replace this with more robust
// test in later pr.
function testFidelity(screenshotContext) {
    const width = screenshotContext.drawingBufferWidth;
    const height = screenshotContext.drawingBufferHeight;
    const pixels = new Uint8Array(width * height * COMPONENTS_PER_PIXEL);
    // this function reads in the bottom-up direction from the coordinate
    // specified ((0,0) is the bottom-left corner).
    screenshotContext.readPixels(0, 0, width, height, screenshotContext.RGBA, screenshotContext.UNSIGNED_BYTE, pixels);
    let colorlessPixelCountCanvas = 0;
    for (let row = 0; row < height; row++) {
        for (let col = 0; col < width; col++) {
            let isWhite = true;
            let isBlack = true;
            // read pixel data from top left corner
            const index = (height - row - 1) * width + col;
            const position = index * COMPONENTS_PER_PIXEL;
            for (let i = 0; i < 3; i++) {
                const colorComponent = pixels[position + i];
                if (colorComponent != 255) {
                    isWhite = false;
                }
                if (colorComponent != 0) {
                    isBlack = false;
                }
            }
            if (isWhite || isBlack) {
                colorlessPixelCountCanvas++;
            }
        }
    }
    const imagePixelCount = width * height;
    expect(colorlessPixelCountCanvas).to.be.below(imagePixelCount);
}
;
suite('ModelViewerElement', () => {
    let nextId = 0;
    let tagName;
    let ModelViewer;
    setup(() => {
        tagName = `model-viewer-${nextId++}`;
        ModelViewer = class extends ModelViewerElement {
            static get is() {
                return tagName;
            }
        };
        customElements.define(tagName, ModelViewer);
    });
    BasicSpecTemplate(() => ModelViewer, () => tagName);
    suite('Fidelity Test', () => {
        let element;
        setup(async () => {
            element = new ModelViewerElement();
            setupModelViewer(element);
            document.body.insertBefore(element, document.body.firstChild);
        });
        teardown(() => {
            if (element.parentNode != null) {
                element.parentNode.removeChild(element);
            }
        });
        test('Metal roughness sphere', async () => {
            await setupLighting(element, LIGHTROOM_PATH);
            const screenshotContext = element[$renderer].threeRenderer.getContext();
            testFidelity(screenshotContext);
        });
        test('Metal roughness sphere HDR', async () => {
            await setupLighting(element, SUNRISE_HDR_PATH);
            const screenshotContext = element[$renderer].threeRenderer.getContext();
            testFidelity(screenshotContext);
        });
        test('Metal roughness sphere LDR', async () => {
            await setupLighting(element, SUNRISE_LDR_PATH);
            const screenshotContext = element[$renderer].threeRenderer.getContext();
            testFidelity(screenshotContext);
        });
    });
});
//# sourceMappingURL=model-viewer-spec.js.map