docs: add skydiving example

Author: nartc

apps/sandbox/src/app/app.component.ts

@@ -8,9 +8,10 @@ import { injectBox, injectPlane } from 'angular-three-cannon/services';
 import { NgtpBloom, NgtpEffectComposer } from 'angular-three-postprocessing';
 import { NgtsGrid } from 'angular-three-soba/abstractions';
 import { NgtsOrbitControls } from 'angular-three-soba/controls';
-import { injectNgtsGLTFLoader } from 'angular-three-soba/loaders';
+import { NgtsLoader, injectNgtsGLTFLoader } from 'angular-three-soba/loaders';
 import { injectNgtsAnimations } from 'angular-three-soba/misc';
 import * as THREE from 'three';
+import { SkyDivingScene } from './skydiving/scene.component';
 
 extend(THREE);
 
@@ -126,7 +127,7 @@ export class Scene {
 
 @Component({
 	standalone: true,
-	imports: [NgtCanvas, NgIf, NgtKey],
+	imports: [NgtCanvas, NgtKey, NgtsLoader],
 	selector: 'sandbox-root',
 	template: `
 		<ngt-canvas
@@ -136,12 +137,13 @@ export class Scene {
 			[shadows]="true"
 			[gl]="scenes[scene].glOptions"
 		/>
-		<button (click)="onToggle()">Toggle scene: {{ scene }}</button>
+		<ngts-loader />
+		<!-- <button (click)="onToggle()">Toggle scene: {{ scene }}</button> -->
 	`,
 	styleUrls: ['./app.component.css'],
 })
 export class AppComponent {
-	scene: 'cannon' | 'bot' = 'cannon';
+	scene: 'cannon' | 'bot' | 'skydiving' = 'skydiving';
 	scenes = {
 		bot: {
 			scene: Scene,
@@ -153,6 +155,11 @@ export class AppComponent {
 			cameraOptions: { position: [0, 0, 15] },
 			glOptions: { useLegacyLights: true },
 		},
+		skydiving: {
+			scene: SkyDivingScene,
+			cameraOptions: { fov: 70, position: [0, 0, 3] },
+			glOptions: { useLegacyLights: true },
+		},
 	} as const;
 
 	onToggle() {

apps/sandbox/src/app/skydiving/components/model.component.ts

@@ -0,0 +1,113 @@
+import { NgIf } from '@angular/common';
+import { CUSTOM_ELEMENTS_SCHEMA, Component, Signal, effect } from '@angular/core';
+import { NgtArgs, injectBeforeRender } from 'angular-three';
+import { NgtsGLTF, injectNgtsGLTFLoader, injectNgtsTextureLoader } from 'angular-three-soba/loaders';
+import { injectNgtsAnimations } from 'angular-three-soba/misc';
+import * as THREE from 'three';
+
+type SkydiverGLTF = NgtsGLTF<{
+	nodes: {
+		skydiver_2: THREE.SkinnedMesh<THREE.BufferGeometry, THREE.ShaderMaterial>;
+		mixamorigHips: THREE.Mesh;
+	};
+}>;
+
+@Component({
+	selector: 'app-model',
+	standalone: true,
+	template: `
+		<ngt-group [dispose]="null">
+			<ngt-group *ngIf="skydiverGltf() as skydiverGltf" [ref]="animations.ref">
+				<ngt-primitive *args="[skydiverGltf.nodes['mixamorigHips']]" />
+				<ngt-skinned-mesh
+					[geometry]="skydiverGltf.nodes['skydiver_2'].geometry"
+					[skeleton]="skydiverGltf.nodes['skydiver_2'].skeleton"
+				>
+					<ngt-mesh-standard-material
+						[side]="DoubleSide"
+						[map]="textures()?.baseColor"
+						[roughnessMap]="textures()?.roughness"
+						[normalMap]="textures()?.normal"
+						[metalnessMap]="textures()?.metallic"
+						[normalScale]="[-0.2, 0.2]"
+						[envMapIntensity]="0.8"
+						[toneMapped]="false"
+						[uniforms]="{ uTime: { value: 0 } }"
+						(afterAttach)="$event.node.onBeforeCompile = onBeforeCompile"
+					/>
+				</ngt-skinned-mesh>
+			</ngt-group>
+		</ngt-group>
+	`,
+	imports: [NgtArgs, NgIf],
+	schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+export class Model {
+	DoubleSide = THREE.DoubleSide;
+	textures = injectNgtsTextureLoader(
+		() => ({
+			baseColor: 'assets/texture/skydiver_BaseColor.webp',
+			roughness: 'assets/texture/skydiver_Roughness.webp',
+			metallic: 'assets/texture/skydiver_Metallic.webp',
+			normal: 'assets/texture/skydiver_Normal.webp',
+			clothes: 'assets/texture/skydiver_Clothes.webp',
+		}),
+		{
+			onLoad: (textures) => {
+				if (Array.isArray(textures)) {
+					const [baseColor, roughness, metallic, normal, clothes] = textures;
+					baseColor.flipY = roughness.flipY = metallic.flipY = normal.flipY = clothes.flipY = false;
+				}
+			},
+		},
+	);
+
+	skydiverGltf = injectNgtsGLTFLoader(() => 'assets/skydiver.glb') as Signal<SkydiverGLTF>;
+
+	animations = injectNgtsAnimations(() => this.skydiverGltf()?.animations || [], { playFirstClip: false });
+
+	onBeforeCompile: THREE.MeshStandardMaterial['onBeforeCompile'] = (shader) => {
+		Object.assign(shader.uniforms, {
+			...((this.skydiverGltf()?.nodes['skydiver_2']).material.uniforms || {}),
+		});
+		shader.vertexShader = `
+        uniform float uTime;
+        uniform sampler2D uClothes;
+        ${shader.vertexShader}
+        `;
+		shader.vertexShader = shader.vertexShader.replace(
+			`#include <begin_vertex>`,
+			`
+          vec3 clothesTexture = vec3(texture2D(uClothes, vUv));
+          float circleTime = 2.0;
+          float amplitude = 30.0;
+          float circleTimeParam = mod(uTime, circleTime);
+          vec3 transformed = vec3( position );
+          transformed.y += min(clothesTexture.y * sin( circleTimeParam * amplitude * (PI  / circleTime)) * 0.025, 0.5);
+        `,
+		);
+	};
+
+	constructor() {
+		effect(() => {
+			const ready = this.animations.ready();
+			if (!ready) return;
+			const { actions } = this.animations;
+			actions['animation_0'].reset().play();
+
+			const [textures, gltf] = [this.textures(), this.skydiverGltf()];
+			if (!textures || !gltf) return;
+			gltf.nodes['skydiver_2'].material.uniforms = {
+				uTime: { value: 0 },
+				uClothes: { value: textures.clothes },
+			};
+		});
+
+		injectBeforeRender(({ clock }) => {
+			const skydiver = this.skydiverGltf()?.nodes['skydiver_2'];
+			if (skydiver?.material.uniforms?.['uTime']) {
+				skydiver.material.uniforms['uTime'].value = clock.getElapsedTime();
+			}
+		});
+	}
+}

apps/sandbox/src/app/skydiving/components/wind-effect.component.ts

@@ -0,0 +1,72 @@
+import { CUSTOM_ELEMENTS_SCHEMA, Component, computed } from '@angular/core';
+import { NgtArgs, NgtRepeat, injectBeforeRender, injectNgtRef, injectNgtStore } from 'angular-three';
+import { NgtsInstance, NgtsInstances, PositionMesh } from 'angular-three-soba/performances';
+import { NgtsSobaContent } from 'angular-three-soba/utils';
+import * as THREE from 'three';
+
+@Component({
+	selector: 'app-wind-shape',
+	standalone: true,
+	template: ` <ngts-instance color="white" [instanceRef]="ref" [position]="randomPosition" /> `,
+	imports: [NgtsInstance],
+	schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+export class WindShape {
+	randomPosition = [
+		THREE.MathUtils.randFloatSpread(8),
+		THREE.MathUtils.randFloatSpread(5),
+		THREE.MathUtils.randFloatSpread(8),
+	];
+	private v3 = new THREE.Vector3();
+	private randomSpeed = THREE.MathUtils.randFloat(0.05, 0.5);
+
+	ref = injectNgtRef<PositionMesh>();
+
+	private store = injectNgtStore();
+	private getCurrentViewport = this.store.get('viewport', 'getCurrentViewport');
+
+	private height = computed(() => this.getCurrentViewport().height);
+
+	constructor() {
+		injectBeforeRender(({ camera }) => {
+			const instance = this.ref.nativeElement;
+			if (instance) {
+				const { height: elHeight } = (instance.instance.nativeElement?.geometry as any)['parameters'];
+				const worldPosition = instance.getWorldPosition(this.v3);
+				const limitPos = this.height() - (worldPosition.y + elHeight / 2);
+				if (limitPos < 0) {
+					instance.position.y = -(this.height() + elHeight / 2);
+				}
+				instance.position.y += this.randomSpeed;
+				instance.rotation.y = camera.rotation.y;
+			}
+		});
+	}
+}
+
+@Component({
+	selector: 'app-wind-effect',
+	standalone: true,
+	template: `
+		<ngt-group>
+			<ngts-instances>
+				<ng-template ngtsSobaContent>
+					<ngt-plane-geometry *args="[0.0135, 1.2]" />
+					<ngt-mesh-basic-material
+						[side]="DoubleSide"
+						[blending]="AdditiveBlending"
+						[opacity]="0.15"
+						[transparent]="true"
+					/>
+					<app-wind-shape *ngFor="let i; repeat: 130" />
+				</ng-template>
+			</ngts-instances>
+		</ngt-group>
+	`,
+	imports: [NgtsInstances, NgtsSobaContent, NgtArgs, WindShape, NgtRepeat],
+	schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+export class WindEffect {
+	DoubleSide = THREE.DoubleSide;
+	AdditiveBlending = THREE.AdditiveBlending;
+}

apps/sandbox/src/app/skydiving/components/world.component.ts

@@ -0,0 +1,21 @@
+import { CUSTOM_ELEMENTS_SCHEMA, Component } from '@angular/core';
+import { NgtArgs } from 'angular-three';
+import { injectNgtsTextureLoader } from 'angular-three-soba/loaders';
+import * as THREE from 'three';
+
+@Component({
+	selector: 'app-world',
+	standalone: true,
+	template: `
+		<ngt-mesh>
+			<ngt-sphere-geometry *args="[5, 60, 60]" />
+			<ngt-mesh-basic-material [toneMapped]="false" [map]="skyTexture()" [side]="BackSide" />
+		</ngt-mesh>
+	`,
+	imports: [NgtArgs],
+	schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+export class World {
+	BackSide = THREE.BackSide;
+	skyTexture = injectNgtsTextureLoader(() => 'assets/sky-texture.jpg');
+}

apps/sandbox/src/app/skydiving/scene.component.ts

@@ -0,0 +1,45 @@
+import { CUSTOM_ELEMENTS_SCHEMA, Component } from '@angular/core';
+import { NgtpBloom, NgtpEffectComposer, NgtpVignette } from 'angular-three-postprocessing';
+import { NgtsOrbitControls } from 'angular-three-soba/controls';
+import { NgtsCameraShake, NgtsEnvironment } from 'angular-three-soba/staging';
+import { Model } from './components/model.component';
+import { WindEffect } from './components/wind-effect.component';
+import { World } from './components/world.component';
+
+@Component({
+	standalone: true,
+	template: `
+		<ngts-environment [frames]="1" path="assets/env" [resolution]="256" />
+
+		<app-world />
+		<app-wind-effect />
+		<app-model />
+
+		<ngts-camera-shake [yawFrequency]="4" [pitchFrequency]="4" [rollFrequency]="5" [intensity]="0.3" />
+
+		<ngt-ambient-light [intensity]="0.2 * Math.PI" />
+		<ngt-directional-light [intensity]="2" [position]="[-0.15, -2, 0]" />
+
+		<ngts-orbit-controls [makeDefault]="true" />
+
+		<ngtp-effect-composer>
+			<ngtp-bloom [luminanceThreshold]="0.6" [luminanceSmoothing]="0.5" [intensity]="1.2" [mipmapBlur]="true" />
+			<ngtp-vignette [offset]="0.5" [darkness]="0.5" />
+		</ngtp-effect-composer>
+	`,
+	imports: [
+		NgtsEnvironment,
+		NgtsCameraShake,
+		NgtsOrbitControls,
+		NgtpEffectComposer,
+		NgtpBloom,
+		NgtpVignette,
+		World,
+		Model,
+		WindEffect,
+	],
+	schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+export class SkyDivingScene {
+	Math = Math;
+}

apps/sandbox/src/assets/env/nx.png

@@ -1,7 +1,34 @@
 /* You can add global styles to this file, and also import other style files */
+
+* {
+	box-sizing: border-box;
+}
+
 html,
 body {
-	height: 100%;
 	width: 100%;
+	height: 100%;
 	margin: 0;
+	padding: 0;
+	background-color: #272727;
+	-webkit-touch-callout: none;
+	-webkit-user-select: none;
+	-khtml-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+	overflow: hidden;
+}
+
+body {
+	position: fixed;
+	overflow: hidden;
+	overscroll-behavior-y: none;
+	font-family:
+		helvetica neue,
+		helvetica,
+		arial,
+		sans-serif;
+	color: black;
+	-webkit-font-smoothing: antialiased;
 }