docs: migrate color grading

Author: Chau Tran

apps/sandbox/src/app/pages/clump/index.page.ts

@@ -14,7 +14,7 @@ export const routeMeta: RouteMeta = {
 };
 
 @Directive({ selector: 'clump-pointer', standalone: true })
-class Pointer {
+class ClumpPointer {
     readonly pointerBody = injectSphere(() => ({ type: 'Kinematic', args: [3], position: [0, 0, 0] }));
 
     constructor() {
@@ -67,7 +67,7 @@ class ObjectClump {
 @Component({
     standalone: true,
     templateUrl: 'scene.html',
-    imports: [NgtArgs, NgtcPhysics, NgtsEnvironment, NgtsSky, NgtpEffectComposer, NgtpBloom, ObjectClump, Pointer],
+    imports: [NgtArgs, NgtcPhysics, NgtsEnvironment, NgtsSky, NgtpEffectComposer, NgtpBloom, ObjectClump, ClumpPointer],
     schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })
 class SceneGraph {}

apps/sandbox/src/app/pages/color-grading/grading-effect.html

@@ -0,0 +1,3 @@
+<ngtp-effect-composer>
+    <ngtp-lut *ngIf="texture() as texture" [lut]="texture" />
+</ngtp-effect-composer>

apps/sandbox/src/app/pages/color-grading/grading-sphere.html

@@ -0,0 +1,12 @@
+<ngt-mesh>
+    <ngt-sphere-geometry *args="[1, 64, 64]" />
+    <ngt-mesh-physical-material
+        *ngIf="texture() as texture"
+        [map]="texture"
+        [envMapIntensity]="0.4"
+        [clearcoat]="0.8"
+        [clearcoatRoughness]="0"
+        [roughness]="1"
+        [metalness]="0"
+    />
+</ngt-mesh>

apps/sandbox/src/app/pages/color-grading/index.html

@@ -0,0 +1,2 @@
+<ngt-canvas [sceneGraph]="scene" frameloop="demand" [camera]="{ position: [0, 0, 5], fov: 45 }" />
+<ngts-stats [right]="true" />

apps/sandbox/src/app/pages/color-grading/index.page.ts

@@ -0,0 +1,58 @@
+import { RouteMeta } from '@analogjs/router';
+import { NgIf } from '@angular/common';
+import { Component, CUSTOM_ELEMENTS_SCHEMA, Signal } from '@angular/core';
+import { injectNgtLoader, NgtArgs, NgtCanvas } from 'angular-three';
+import { NgtpEffectComposer } from 'angular-three-postprocessing';
+import { NgtpLUT } from 'angular-three-postprocessing/effects';
+import { NgtsOrbitControls } from 'angular-three-soba/controls';
+import { injectNgtsTextureLoader } from 'angular-three-soba/loaders';
+import { NgtsStats } from 'angular-three-soba/performance';
+import { NgtsEnvironment } from 'angular-three-soba/staging';
+import { LookupTexture, LUTCubeLoader } from 'postprocessing';
+
+export const routeMeta: RouteMeta = {
+    title: 'Color Grading',
+};
+
+@Component({
+    selector: 'grading-sphere',
+    standalone: true,
+    templateUrl: 'grading-sphere.html',
+    imports: [NgtArgs, NgIf],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+class GradingSphere {
+    readonly texture = injectNgtsTextureLoader(() => 'terrazo.png');
+}
+
+@Component({
+    selector: 'grading-effect',
+    standalone: true,
+    templateUrl: 'grading-effect.html',
+    imports: [NgtpLUT, NgtpEffectComposer, NgIf],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+class GradingEffect {
+    readonly texture = injectNgtLoader(
+        () => LUTCubeLoader as any,
+        () => 'cubicle-99.CUBE'
+    ) as Signal<LookupTexture>;
+}
+
+@Component({
+    standalone: true,
+    templateUrl: 'scene.html',
+    imports: [GradingSphere, GradingEffect, NgtsEnvironment, NgtsOrbitControls],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+class SceneGraph {}
+
+@Component({
+    standalone: true,
+    templateUrl: 'index.html',
+    imports: [NgtCanvas, NgtsStats],
+    host: { class: 'block h-full w-full bg-gradient-to-br from-indigo-300 to-sky-700' },
+})
+export default class ColorGrading {
+    readonly scene = SceneGraph;
+}

apps/sandbox/src/app/pages/color-grading/scene.html

@@ -0,0 +1,5 @@
+<ngt-spot-light [intensity]="0.5" [angle]="0.2" [penumbra]="1" [position]="[5, 15, 10]" />
+<grading-sphere />
+<grading-effect />
+<ngts-environment preset="warehouse" />
+<ngts-orbit-controls />