Skip to content

Commit

Permalink
added GroundedSkybox
Browse files Browse the repository at this point in the history
  • Loading branch information
elalish committed Dec 21, 2023
1 parent 99fa9a8 commit 582c9c6
Show file tree
Hide file tree
Showing 8 changed files with 138 additions and 21 deletions.
3 changes: 1 addition & 2 deletions packages/model-viewer/src/features/controls.ts
Original file line number Diff line number Diff line change
Expand Up @@ -799,8 +799,7 @@ export const ControlsMixin = <T extends Constructor<ModelViewerElementBase>>(
* orbiting at the supplied radius.
*/
[$updateCameraForRadius](radius: number) {
const maximumRadius =
Math.max(this[$scene].boundingSphere.radius, radius);
const maximumRadius = Math.max(this[$scene].farRadius(), radius);

const near = 0;
const far = Math.abs(2 * maximumRadius);
Expand Down
9 changes: 9 additions & 0 deletions packages/model-viewer/src/features/environment.ts
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ const $cancelEnvironmentUpdate = Symbol('cancelEnvironmentUpdate');
export declare interface EnvironmentInterface {
environmentImage: string|null;
skyboxImage: string|null;
skyboxHeight: string;
shadowIntensity: number;
shadowSoftness: number;
exposure: number;
Expand All @@ -60,6 +61,9 @@ export const EnvironmentMixin = <T extends Constructor<ModelViewerElementBase>>(
@property({type: String, attribute: 'tone-mapping'})
toneMapping: ToneMappingValue = 'auto';

@property({type: String, attribute: 'skybox-height'})
skyboxHeight: string = '0';

protected[$currentEnvironmentMap]: Texture|null = null;
protected[$currentBackground]: Texture|null = null;

Expand Down Expand Up @@ -93,6 +97,11 @@ export const EnvironmentMixin = <T extends Constructor<ModelViewerElementBase>>(
this[$shouldAttemptPreload]()) {
this[$updateEnvironment]();
}

if (changedProperties.has('skyboxHeight')) {
this[$scene].setGroundedSkybox();
this[$needsRender]();
}
}

hasBakedShadow(): boolean {
Expand Down
72 changes: 72 additions & 0 deletions packages/model-viewer/src/three-components/GroundedSkybox.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
/* @license
* Copyright 2023 Google LLC. All Rights Reserved.
* 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.
*/

import {BackSide, BufferAttribute, Mesh, MeshBasicMaterial, SphereGeometry, Texture, Vector3} from 'three';

export class GroundedSkybox extends Mesh {
private height = 0;
private radius = 0;
private resolution = 0;

constructor() {
super(undefined, new MeshBasicMaterial({side: BackSide}));
this.userData.noHit = true;
}

get map() {
return (this.material as MeshBasicMaterial).map;
}

set map(skybox: Texture|null) {
(this.material as MeshBasicMaterial).map = skybox;
}

getHeight() {
return this.height;
}

updateGeometry(height = this.height, radius = this.radius, resolution = 128) {
if (height != this.height || radius != this.radius ||
resolution != this.resolution) {
this.height = height;
this.radius = radius;
this.resolution = resolution;
if (height > 0 && radius > 0) {
this.geometry = makeGeometry(height, radius, resolution);
}
}
}
}

function makeGeometry(height: number, radius: number, resolution: number) {
const geometry = new SphereGeometry(radius, 2 * resolution, resolution);

const pos = geometry.getAttribute('position') as BufferAttribute;
const tmp = new Vector3();
for (let i = 0; i < pos.count; ++i) {
tmp.fromBufferAttribute(pos, i);
if (tmp.y < 0) {
// Smooth out the transition from flat floor to sphere:
const y1 = -height * 3 / 2;
const f =
tmp.y < y1 ? -height / tmp.y : (1 - tmp.y * tmp.y / (3 * y1 * y1));
tmp.multiplyScalar(f);
tmp.toArray(pos.array, 3 * i);
}
}
pos.needsUpdate = true;

return geometry;
}
44 changes: 38 additions & 6 deletions packages/model-viewer/src/three-components/ModelScene.ts
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@

import {AnimationAction, AnimationActionLoopStyles, AnimationClip, AnimationMixer, Box3, Camera, Euler, Event as ThreeEvent, LoopPingPong, LoopRepeat, Material, Matrix3, Mesh, Object3D, PerspectiveCamera, Raycaster, Scene, Sphere, Texture, Triangle, Vector2, Vector3, WebGLRenderer} from 'three';
import {CSS2DRenderer} from 'three/examples/jsm/renderers/CSS2DRenderer.js';
// @ts-ignore
import {reduceVertices} from 'three/examples/jsm/utils/SceneUtils.js';

import {ToneMappingValue} from '../features/environment.js';
Expand All @@ -29,9 +28,11 @@ import {resolveDpr} from '../utilities.js';

import {Damper, SETTLING_TIME} from './Damper.js';
import {ModelViewerGLTFInstance} from './gltf-instance/ModelViewerGLTFInstance.js';
import {GroundedSkybox} from './GroundedSkybox.js';
import {Hotspot} from './Hotspot.js';
import {Shadow} from './Shadow.js';

export const GROUNDED_SKYBOX_SIZE = 10;
const MIN_SHADOW_RATIO = 100;

export interface ModelLoadEvent extends ThreeEvent {
Expand Down Expand Up @@ -115,6 +116,8 @@ export class ModelScene extends Scene {
private animationsByName: Map<string, AnimationClip> = new Map();
private currentAnimationAction: AnimationAction|null = null;

private groundedSkybox = new GroundedSkybox();

constructor({canvas, element, width, height}: ModelSceneConfig) {
super();

Expand Down Expand Up @@ -275,6 +278,8 @@ export class ModelScene extends Scene {

this.updateShadow();
this.setShadowIntensity(this.shadowIntensity);

this.setGroundedSkybox();
}

reset() {
Expand Down Expand Up @@ -344,12 +349,12 @@ export class ModelScene extends Scene {
}

markBakedShadow(mesh: Mesh) {
mesh.userData.shadow = true;
mesh.userData.noHit = true;
this.bakedShadows.add(mesh);
}

unmarkBakedShadow(mesh: Mesh) {
mesh.userData.shadow = false;
mesh.userData.noHit = false;
mesh.visible = true;
this.bakedShadows.delete(mesh);
this.boundingBox.expandByObject(mesh);
Expand Down Expand Up @@ -536,10 +541,38 @@ export class ModelScene extends Scene {
return;
}
this.environment = environment;
this.background = skybox;
this.setBackground(skybox);
this.queueRender();
}

setBackground(skybox: Texture|null) {
this.groundedSkybox.map = skybox;
this.background = this.groundedSkybox.parent != null ? null : skybox;
}

farRadius() {
return this.boundingSphere.radius *
(this.groundedSkybox.parent != null ? GROUNDED_SKYBOX_SIZE : 1);
}

setGroundedSkybox() {
const heightNode =
parseExpressions(this.element.skyboxHeight)[0].terms[0] as NumberNode;
const height = normalizeUnit(heightNode).number;
const radius = GROUNDED_SKYBOX_SIZE * this.boundingSphere.radius;

this.groundedSkybox.updateGeometry(height, radius);
this.groundedSkybox.position.y =
height - (this.shadow ? 2 * this.shadow.gap() : 0);

if (this.groundedSkybox.getHeight() > 0) {
this.target.add(this.groundedSkybox);
} else {
this.target.remove(this.groundedSkybox);
}
this.setBackground(this.groundedSkybox.map);
}

/**
* Sets the point in model coordinates the model should orbit/pivot around.
*/
Expand Down Expand Up @@ -815,8 +848,7 @@ export class ModelScene extends Scene {
raycaster.setFromCamera(ndcPosition, this.getCamera());
const hits = raycaster.intersectObject(object, true);

return hits.find(
(hit) => hit.object.visible && !hit.object.userData.shadow);
return hits.find((hit) => hit.object.visible && !hit.object.userData.noHit);
}

/**
Expand Down
8 changes: 6 additions & 2 deletions packages/model-viewer/src/three-components/Shadow.ts
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,7 @@ export class Shadow extends Object3D {
side: BackSide,
});
this.floor = new Mesh(plane, shadowMaterial);
this.floor.userData.shadow = true;
this.floor.userData.noHit = true;
camera.add(this.floor);

// the plane onto which to blur the texture
Expand Down Expand Up @@ -264,7 +264,11 @@ export class Shadow extends Object3D {
* z-fighting with any baked-in shadow plane.
*/
setOffset(offset: number) {
this.floor.position.z = -offset + 0.001 * this.maxDimension;
this.floor.position.z = -offset + this.gap();
}

gap() {
return 0.001 * this.maxDimension;
}

render(renderer: WebGLRenderer, scene: Scene) {
Expand Down
6 changes: 3 additions & 3 deletions packages/modelviewer.dev/data/examples.json
Original file line number Diff line number Diff line change
Expand Up @@ -160,8 +160,8 @@
"name": "HDR skybox-image"
},
{
"htmlId": "litModel",
"name": "Lit Model"
"htmlId": "groundedSkybox",
"name": "Grounded Skybox"
},
{
"htmlId": "unlitModel",
Expand Down Expand Up @@ -303,4 +303,4 @@
}
]
}
]
]
17 changes: 9 additions & 8 deletions packages/modelviewer.dev/examples/lightingandenv/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,7 @@
<div class="content">
<div class="wrapper">
<h4 id="intro"><span class="font-medium">Lighting &amp; Environment. </span>Control the lighting and the environment surrounding &lt;model-viewer&gt;. This page showcases the skybox-image attribute, which links to an equirectangular projection image which is used as the skybox, and applied as an environment map to the model.</h4>
<h4>Since the environment map represents scene lighting, it requires extremely high dynamic range to realistically represent either natural or artificial scenes. Traditionally the .hdr image format was used for this purpose (and is supported here), but it has poor compression. Recently, the UltraHDR image format was introduced which is backwards-compatible with JPEG, still using .jpg but efficiently compresses HDR image data. The examples on this page use UltraHDR to showcase its 10x - 30x savings over .hdr.</h4>
<div class="heading">
<h2 class="demo-title">An equirectangular HDR <span class="attribute">skybox-image</span></h2>
<h4></h4>
Expand All @@ -71,16 +72,16 @@ <h4></h4>
</div>

<div class="sample">
<div id="litModel" class="demo"></div>
<div id="groundedSkybox" class="demo"></div>
<div class="content">
<div class="wrapper">
<div class="heading">
<h2 class="demo-title">An equirectangular <span class="attribute">skybox-image</span> with a lit model</h2>
<h2 class="demo-title">An equirectangular <span class="attribute">skybox-image</span> projected onto the ground using a 1.5 meter <span class="attribute">skybox-height</span>, denoting the height of the camera that took the image.</h2>
<h4></h4>
</div>
<example-snippet stamp-to="litModel" highlight-as="html">
<example-snippet stamp-to="groundedSkybox" highlight-as="html">
<template>
<model-viewer camera-controls touch-action="pan-y" skybox-image="../../assets/whipple_creek_regional_park_04_1k.hdr" alt="A 3D astronaut model depicted within a forest" src="../../shared-assets/models/Astronaut.glb"></model-viewer>
<model-viewer camera-controls touch-action="pan-y" skybox-image="../../shared-assets/environments/whipple_creek_regional_park_04_1k.jpg" skybox-height="1.5m" shadow-intensity="2" max-camera-orbit="auto 90deg auto" alt="A 3D astronaut model depicted within a forest" src="../../shared-assets/models/Astronaut.glb"></model-viewer>
</template>
</example-snippet>
</div>
Expand All @@ -92,12 +93,12 @@ <h4></h4>
<div class="content">
<div class="wrapper">
<div class="heading">
<h2 class="demo-title">An equirectangular <span class="attribute">skybox-image</span> with an unlit model</h2>
<h2 class="demo-title">An equirectangular ground-projected <span class="attribute">skybox-image</span> with an unlit model</h2>
<h4></h4>
</div>
<example-snippet stamp-to="unlitModel" highlight-as="html">
<template>
<model-viewer camera-controls touch-action="pan-y" skybox-image="../../assets/whipple_creek_regional_park_04_1k.hdr" alt="An unlit 3D astronaut model depicted within a forest" src="../../shared-assets/models/Astronaut-Unlit.glb"></model-viewer>
<model-viewer camera-controls touch-action="pan-y" skybox-image="../../shared-assets/environments/whipple_creek_regional_park_04_1k.jpg" skybox-height="1.5m" shadow-intensity="2" alt="An unlit 3D astronaut model depicted within a forest" src="../../shared-assets/models/Astronaut-Unlit.glb"></model-viewer>
</template>
</example-snippet>
</div>
Expand All @@ -114,7 +115,7 @@ <h4></h4>
</div>
<example-snippet stamp-to="environmentLighting" highlight-as="html">
<template>
<model-viewer camera-controls touch-action="pan-y" environment-image="../../assets/whipple_creek_regional_park_04_1k.hdr" alt="A 3D model of a sphere reflecting a forest, on a pink background" src="../../shared-assets/models/reflective-sphere.gltf"></model-viewer>
<model-viewer camera-controls touch-action="pan-y" environment-image="../../shared-assets/environments/whipple_creek_regional_park_04_1k.jpg" alt="A 3D model of a sphere reflecting a forest" src="../../shared-assets/models/reflective-sphere.gltf"></model-viewer>
</template>
</example-snippet>
</div>
Expand Down Expand Up @@ -198,7 +199,7 @@ <h4></h4>
</div>
<example-snippet stamp-to="shadows" highlight-as="html">
<template>
<model-viewer camera-controls touch-action="pan-y" id="shadow-intensity-demo" shadow-intensity="0" shadow-softness="0" environment-image="../../assets/whipple_creek_regional_park_04_1k.hdr" alt="A 3D model of a sphere reflecting a forest with varying shadow intensity" src="../../shared-assets/models/reflective-sphere.gltf"></model-viewer>
<model-viewer camera-controls touch-action="pan-y" id="shadow-intensity-demo" shadow-intensity="0" shadow-softness="0" environment-image="../../shared-assets/environments/whipple_creek_regional_park_04_1k.jpg" alt="A 3D model of a sphere reflecting a forest with varying shadow intensity" src="../../shared-assets/models/reflective-sphere.gltf"></model-viewer>
<script>
(() => {
const modelViewer = document.querySelector('#shadow-intensity-demo');
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 582c9c6

Please sign in to comment.