From d2bf88549f4fea3f422bd92e6f8df6a2b851c108 Mon Sep 17 00:00:00 2001 From: Chau Tran Date: Mon, 6 Mar 2023 11:44:44 -0600 Subject: [PATCH] fix: clean up selections from rx-state --- .../src/lib/gizmo-helper/gizmo-helper.ts | 9 ++- .../abstractions/src/lib/text-3d/text-3d.ts | 15 +--- .../mesh-transmission-material.ts | 4 - .../performance/src/lib/detailed/detailed.ts | 8 +- libs/angular-three-soba/shaders/src/index.ts | 1 + .../soft-shadow-material.ts | 42 ++++++++++ .../mesh-refraction-material.stories.ts | 4 +- .../accumulative-shadows.ts | 46 +---------- .../accumulative-shadows/randomized-lights.ts | 4 +- .../staging/src/lib/caustics/caustics.ts | 43 +++++----- .../staging/src/lib/center/center.ts | 81 ++++++++++--------- 11 files changed, 128 insertions(+), 129 deletions(-) create mode 100644 libs/angular-three-soba/shaders/src/lib/soft-shadow-material/soft-shadow-material.ts diff --git a/libs/angular-three-soba/abstractions/src/lib/gizmo-helper/gizmo-helper.ts b/libs/angular-three-soba/abstractions/src/lib/gizmo-helper/gizmo-helper.ts index da275ee..2abb090 100644 --- a/libs/angular-three-soba/abstractions/src/lib/gizmo-helper/gizmo-helper.ts +++ b/libs/angular-three-soba/abstractions/src/lib/gizmo-helper/gizmo-helper.ts @@ -12,7 +12,6 @@ import { Output, TemplateRef, } from '@angular/core'; -import { selectSlice } from '@rx-angular/state'; import { extend, injectNgtRef, NgtPortal, NgtPortalContent, NgtRxStore, NgtStore } from 'angular-three'; import { NgtsOrthographicCamera } from 'angular-three-soba/cameras'; import { combineLatest, map } from 'rxjs'; @@ -191,7 +190,13 @@ export class NgtsGizmoHelper extends NgtRxStore implements OnInit { private setGizmoPosition() { this.connect( 'gizmoPosition', - combineLatest([this.store.select('size'), this.select(selectSlice(['alignment', 'margin']))]).pipe( + combineLatest([ + this.store.select('size'), + combineLatest({ + alignment: this.select('alignment'), + margin: this.select('margin'), + }), + ]).pipe( map(([size, { alignment, margin }]) => { const [marginX, marginY] = margin; const x = alignment.endsWith('-center') diff --git a/libs/angular-three-soba/abstractions/src/lib/text-3d/text-3d.ts b/libs/angular-three-soba/abstractions/src/lib/text-3d/text-3d.ts index f30e772..54037f4 100644 --- a/libs/angular-three-soba/abstractions/src/lib/text-3d/text-3d.ts +++ b/libs/angular-three-soba/abstractions/src/lib/text-3d/text-3d.ts @@ -4,21 +4,12 @@ import { combineLatest, map, of, switchMap } from 'rxjs'; import { Mesh } from 'three'; import { FontLoader, TextGeometry } from 'three-stdlib'; -declare type Glyph = { - _cachedOutline: string[]; - ha: number; - o: string; -}; +declare type Glyph = { _cachedOutline: string[]; ha: number; o: string }; declare type FontData = { - boundingBox: { - yMax: number; - yMin: number; - }; + boundingBox: { yMax: number; yMin: number }; familyName: string; - glyphs: { - [k: string]: Glyph; - }; + glyphs: { [k: string]: Glyph }; resolution: number; underlineThickness: number; }; diff --git a/libs/angular-three-soba/materials/src/lib/mesh-transmission-material/mesh-transmission-material.ts b/libs/angular-three-soba/materials/src/lib/mesh-transmission-material/mesh-transmission-material.ts index a81314e..3eec91e 100644 --- a/libs/angular-three-soba/materials/src/lib/mesh-transmission-material/mesh-transmission-material.ts +++ b/libs/angular-three-soba/materials/src/lib/mesh-transmission-material/mesh-transmission-material.ts @@ -203,8 +203,4 @@ export class NgtsMeshTranmissionMaterial extends NgtRxStore { } }); } - - ngOnInit() { - console.log(this.materialRef); - } } diff --git a/libs/angular-three-soba/performance/src/lib/detailed/detailed.ts b/libs/angular-three-soba/performance/src/lib/detailed/detailed.ts index eb87edc..0c08365 100644 --- a/libs/angular-three-soba/performance/src/lib/detailed/detailed.ts +++ b/libs/angular-three-soba/performance/src/lib/detailed/detailed.ts @@ -1,5 +1,5 @@ import { Component, CUSTOM_ELEMENTS_SCHEMA, Input, OnInit } from '@angular/core'; -import { extend, injectNgtRef, NgtRxStore } from 'angular-three'; +import { extend, injectNgtRef, NgtBeforeRenderEvent, NgtRxStore } from 'angular-three'; import { combineLatest } from 'rxjs'; import { LOD } from 'three'; @@ -9,7 +9,7 @@ extend({ LOD }); selector: 'ngts-detailed[distances]', standalone: true, template: ` - + `, @@ -26,6 +26,10 @@ export class NgtsDetailed extends NgtRxStore implements OnInit { this.updateLodChildren(); } + onLODBeforeRender({ object, state }: NgtBeforeRenderEvent) { + object.update(state.camera); + } + private updateLodChildren() { this.hold(combineLatest([this.lodRef.children$(), this.select('distances')]), ([children, distances]) => { this.lodRef.nativeElement.levels.length = 0; diff --git a/libs/angular-three-soba/shaders/src/index.ts b/libs/angular-three-soba/shaders/src/index.ts index 9f02c7f..185c269 100644 --- a/libs/angular-three-soba/shaders/src/index.ts +++ b/libs/angular-three-soba/shaders/src/index.ts @@ -9,4 +9,5 @@ export * from './lib/mesh-refraction-material/mesh-refraction-material'; export * from './lib/mesh-transmission-material/mesh-transmission-material'; export * from './lib/mesh-wobble-material/mesh-wobble-material'; export * from './lib/shader-material/shader-material'; +export * from './lib/soft-shadow-material/soft-shadow-material'; export * from './lib/spot-light-material/spot-light-material'; diff --git a/libs/angular-three-soba/shaders/src/lib/soft-shadow-material/soft-shadow-material.ts b/libs/angular-three-soba/shaders/src/lib/soft-shadow-material/soft-shadow-material.ts new file mode 100644 index 0000000..1dfe009 --- /dev/null +++ b/libs/angular-three-soba/shaders/src/lib/soft-shadow-material/soft-shadow-material.ts @@ -0,0 +1,42 @@ +import * as THREE from 'three'; +import { shaderMaterial } from '../shader-material/shader-material'; + +export const SoftShadowMaterial = shaderMaterial( + { + color: new THREE.Color(), + blend: 2.0, + alphaTest: 0.75, + opacity: 0, + map: null, + }, + // language=GLSL + ` +varying vec2 vUv; +void main() { + gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(position, 1.); + vUv = uv; +} + `, + // language=GLSL + ` +varying vec2 vUv; +uniform sampler2D map; +uniform vec3 color; +uniform float blend; +uniform float opacity; +uniform float alphaTest; +void main() { + vec4 sampledDiffuseColor = texture2D(map, vUv); + gl_FragColor = vec4(color * sampledDiffuseColor.r * blend, max(0.0, (1.0 - (sampledDiffuseColor.r + sampledDiffuseColor.g + sampledDiffuseColor.b) / alphaTest)) * opacity); + #include + #include +} + ` +); + +export type SoftShadowMaterialInputs = { + map: THREE.Texture; + color?: THREE.ColorRepresentation; + alphaTest?: number; + blend?: number; +}; diff --git a/libs/angular-three-soba/src/shaders/mesh-refraction-material.stories.ts b/libs/angular-three-soba/src/shaders/mesh-refraction-material.stories.ts index b0ab025..b241545 100644 --- a/libs/angular-three-soba/src/shaders/mesh-refraction-material.stories.ts +++ b/libs/angular-three-soba/src/shaders/mesh-refraction-material.stories.ts @@ -27,12 +27,12 @@ extend({ Mesh, Color, AmbientLight, SpotLight, PointLight, SphereGeometry, MeshS - #include -} - ` -); - -type SoftShadowMaterialInputs = { - map: THREE.Texture; - color?: THREE.ColorRepresentation; - alphaTest?: number; - blend?: number; -}; - extend({ SoftShadowMaterial, Group, Mesh, PlaneGeometry }); export type NgtsAccumulativeShadowsLightApi = { update: () => void }; @@ -166,7 +126,7 @@ function accumulativeShadowsApiFactory(accumulativeShadows: NgtsAccumulativeShad return api; } -@Directive({ selector: 'ngts-accumulative-shadows-consumer', standalone: true }) +@Directive({ selector: '[ngtsAccumulativeShadowsConsumer]', standalone: true }) export class AccumulativeShadowsConsumer { constructor() { inject(NGTS_ACCUMULATIVE_SHADOWS_API); @@ -180,7 +140,7 @@ export class AccumulativeShadowsConsumer { - + diff --git a/libs/angular-three-soba/staging/src/lib/accumulative-shadows/randomized-lights.ts b/libs/angular-three-soba/staging/src/lib/accumulative-shadows/randomized-lights.ts index ccb1f64..a1f9da6 100644 --- a/libs/angular-three-soba/staging/src/lib/accumulative-shadows/randomized-lights.ts +++ b/libs/angular-three-soba/staging/src/lib/accumulative-shadows/randomized-lights.ts @@ -60,7 +60,7 @@ function randomizedLightsApiFactory(randomizedLights: NgtsRandomizedLights) { return api; } -@Directive({ selector: 'ngts-randomized-lights-consumer', standalone: true }) +@Directive({ selector: '[ngtsRandomizedLightsConsumer]', standalone: true }) export class RandomizedLightsConsumer { constructor() { inject(NGTS_RANDOMIZED_LIGHTS_API); @@ -81,7 +81,7 @@ export class RandomizedLightsConsumer { - + `, imports: [RandomizedLightsConsumer, NgtArgs, NgtRepeat], diff --git a/libs/angular-three-soba/staging/src/lib/caustics/caustics.ts b/libs/angular-three-soba/staging/src/lib/caustics/caustics.ts index ee5ca7b..4201c9e 100644 --- a/libs/angular-three-soba/staging/src/lib/caustics/caustics.ts +++ b/libs/angular-three-soba/staging/src/lib/caustics/caustics.ts @@ -1,5 +1,5 @@ import { NgIf } from '@angular/common'; -import { ChangeDetectorRef, Component, CUSTOM_ELEMENTS_SCHEMA, ElementRef, inject, Input, OnInit } from '@angular/core'; +import { Component, CUSTOM_ELEMENTS_SCHEMA, ElementRef, inject, Input, OnInit } from '@angular/core'; import { extend, injectNgtRef, NgtRxStore, NgtStore } from 'angular-three'; import { NgtsEdges } from 'angular-three-soba/abstractions'; import { injectNgtsFBO } from 'angular-three-soba/misc'; @@ -189,7 +189,6 @@ export class NgtsCaustics extends NgtRxStore implements OnInit { ); private readonly store = inject(NgtStore); - private readonly cdr = inject(ChangeDetectorRef); override initialize(): void { this.set({ @@ -232,43 +231,41 @@ export class NgtsCaustics extends NgtRxStore implements OnInit { this.effect( combineLatest([ this.sceneRef.$, - this.sceneRef.children$('both'), + this.sceneRef.children$(), this.causticsRef.$, this.cameraRef.$, - this.planeRef.$, - this.planeRef.children$('both'), this.normalTargetFbo.$, this.normalTargetBFbo.$, this.causticsTargetFbo.$, this.causticsTargetBFbo.$, + this.planeRef.$, + this.planeRef.children$('both'), ]), ([ scene, children, caustics, camera, - plane, - , normalTarget, normalTargetB, causticsTarget, causticsTargetB, + plane, ]) => { - const v = new THREE.Vector3(); - const lpF = new THREE.Frustum(); - const lpM = new THREE.Matrix4(); - const lpP = new THREE.Plane(); - - const lightDir = new THREE.Vector3(); - const lightDirInv = new THREE.Vector3(); - const bounds = new THREE.Box3(); - const focusPos = new THREE.Vector3(); - - let count = 0; - caustics.updateWorldMatrix(false, true); if (children.length > 1) { + const v = new THREE.Vector3(); + const lpF = new THREE.Frustum(); + const lpM = new THREE.Matrix4(); + const lpP = new THREE.Plane(); + + const lightDir = new THREE.Vector3(); + const lightDirInv = new THREE.Vector3(); + const bounds = new THREE.Box3(); + const focusPos = new THREE.Vector3(); + + let count = 0; return this.store.get('internal').subscribe(({ gl }) => { const { frames, @@ -399,10 +396,10 @@ export class NgtsCaustics extends NgtRxStore implements OnInit { // Render front face caustics causticsMaterial.ior = ior; - // @ts-ignore - plane.material.lightProjMatrix = camera.projectionMatrix; - // @ts-ignore - plane.material.lightViewMatrix = camera.matrixWorldInverse; + (plane.material as CausticsProjectionMaterialType).lightProjMatrix = + camera.projectionMatrix; + (plane.material as CausticsProjectionMaterialType).lightViewMatrix = + camera.matrixWorldInverse; causticsMaterial.normalTexture = normalTarget.texture; causticsMaterial.depthTexture = normalTarget.depthTexture; gl.setRenderTarget(causticsTarget); diff --git a/libs/angular-three-soba/staging/src/lib/center/center.ts b/libs/angular-three-soba/staging/src/lib/center/center.ts index 9dd6b7c..cfc73ce 100644 --- a/libs/angular-three-soba/staging/src/lib/center/center.ts +++ b/libs/angular-three-soba/staging/src/lib/center/center.ts @@ -95,45 +95,48 @@ export class NgtsCenter extends NgtRxStore implements OnInit { } private setPosition() { - this.hold(combineLatest([this.innerRef.$, this.innerRef.children$()]), ([innerGroup]) => { - const { precise, top, left, front, disabled, disableX, disableY, disableZ, back, bottom, right } = - this.get(); - this.outerRef.nativeElement.matrixWorld.identity(); - const box3 = new Box3().setFromObject(innerGroup, precise); - const center = new Vector3(); - const sphere = new Sphere(); - const width = box3.max.x - box3.min.x; - const height = box3.max.y - box3.min.y; - const depth = box3.max.z - box3.min.z; - - box3.getCenter(center); - box3.getBoundingSphere(sphere); - - const vAlign = top ? height / 2 : bottom ? -height / 2 : 0; - const hAlign = left ? -width / 2 : right ? width / 2 : 0; - const dAlign = front ? depth / 2 : back ? -depth / 2 : 0; - - this.outerRef.nativeElement.position.set( - disabled || disableX ? 0 : -center.x + hAlign, - disabled || disableY ? 0 : -center.y + vAlign, - disabled || disableZ ? 0 : -center.z + dAlign - ); - - if (this.centered.observed) { - this.centered.emit({ - parent: this.centerRef.nativeElement.parent!, - container: this.centerRef.nativeElement, - width, - height, - depth, - boundingBox: box3, - boundingSphere: sphere, - center: center, - verticalAlignment: vAlign, - horizontalAlignment: hAlign, - depthAlignment: dAlign, - }); + this.hold( + combineLatest([this.centerRef.$, this.outerRef.$, this.innerRef.$, this.innerRef.children$()]), + ([centerGroup, outerGroup, innerGroup]) => { + const { precise, top, left, front, disabled, disableX, disableY, disableZ, back, bottom, right } = + this.get(); + outerGroup.matrixWorld.identity(); + const box3 = new Box3().setFromObject(innerGroup, precise); + const center = new Vector3(); + const sphere = new Sphere(); + const width = box3.max.x - box3.min.x; + const height = box3.max.y - box3.min.y; + const depth = box3.max.z - box3.min.z; + + box3.getCenter(center); + box3.getBoundingSphere(sphere); + + const vAlign = top ? height / 2 : bottom ? -height / 2 : 0; + const hAlign = left ? -width / 2 : right ? width / 2 : 0; + const dAlign = front ? depth / 2 : back ? -depth / 2 : 0; + + outerGroup.position.set( + disabled || disableX ? 0 : -center.x + hAlign, + disabled || disableY ? 0 : -center.y + vAlign, + disabled || disableZ ? 0 : -center.z + dAlign + ); + + if (this.centered.observed) { + this.centered.emit({ + parent: centerGroup.parent!, + container: centerGroup, + width, + height, + depth, + boundingBox: box3, + boundingSphere: sphere, + center: center, + verticalAlignment: vAlign, + horizontalAlignment: hAlign, + depthAlignment: dAlign, + }); + } } - }); + ); } }