Skip to content

Commit 5e4b6f6

Browse files
nartcnartc
committed
feat(soba/staging): rename injectMatcapTexture to matcapTextureResource; and injectNormalTexture
1 parent 5ab9a3e commit 5e4b6f6

File tree

2 files changed

+118
-16
lines changed

2 files changed

+118
-16
lines changed

‎libs/soba/staging/src/lib/matcap-texture.ts‎

Lines changed: 52 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,17 @@ import {
33
Directive,
44
EmbeddedViewRef,
55
Injector,
6+
ResourceRef,
67
Signal,
78
TemplateRef,
89
ViewContainerRef,
910
computed,
1011
effect,
1112
inject,
1213
input,
13-
output,
1414
signal,
1515
} from '@angular/core';
16-
import { injectTexture } from 'angular-three-soba/loaders';
16+
import { injectTexture, textureResource } from 'angular-three-soba/loaders';
1717
import { assertInjector } from 'ngxtension/assert-injector';
1818
import * as THREE from 'three';
1919

@@ -35,6 +35,10 @@ function getFormatString(format: number) {
3535
const LIST_URL = 'https://cdn.jsdelivr.net/gh/pmndrs/drei-assets@master/matcaps.json';
3636
const MATCAP_ROOT = 'https://rawcdn.githack.com/emmelleppi/matcaps/9b36ccaaf0a24881a39062d05566c9e92be4aa0d';
3737

38+
/**
39+
* @deprecated Use matcapTexture instead. Will be removed in v5.0.0
40+
* @since v4.0.0
41+
*/
3842
export function injectMatcapTexture(
3943
id: () => number | string = () => 0,
4044
{
@@ -77,6 +81,47 @@ export function injectMatcapTexture(
7781
});
7882
}
7983

84+
export function matcapTextureResource(
85+
id: () => number | string = () => 0,
86+
{
87+
format = () => 1024,
88+
onLoad,
89+
injector,
90+
}: { format?: () => number; onLoad?: (texture: THREE.Texture) => void; injector?: Injector } = {},
91+
) {
92+
return assertInjector(matcapTextureResource, injector, () => {
93+
const matcapList = signal<Record<string, string>>({});
94+
95+
fetch(LIST_URL)
96+
.then((res) => res.json())
97+
.then((list) => {
98+
matcapList.set(list);
99+
});
100+
101+
const DEFAULT_MATCAP = computed(() => matcapList()[0]);
102+
const numTot = computed(() => Object.keys(matcapList()).length);
103+
104+
const fileHash = computed(() => {
105+
const idValue = id();
106+
if (typeof idValue === 'string') {
107+
return idValue;
108+
}
109+
110+
if (typeof idValue === 'number') {
111+
return matcapList()[idValue];
112+
}
113+
114+
return null;
115+
});
116+
117+
const fileName = computed(() => `${fileHash() || DEFAULT_MATCAP()}${getFormatString(format())}.png`);
118+
const url = computed(() => `${MATCAP_ROOT}/${format()}/${fileName()}`);
119+
120+
const resource = textureResource(url, { onLoad });
121+
return { url, resource, numTot };
122+
});
123+
}
124+
80125
export interface NgtsMatcapTextureOptions {
81126
id?: number | string;
82127
format?: number;
@@ -85,7 +130,7 @@ export interface NgtsMatcapTextureOptions {
85130
@Directive({ selector: 'ng-template[matcapTexture]' })
86131
export class NgtsMatcapTexture {
87132
matcapTexture = input<NgtsMatcapTextureOptions>();
88-
matcapTextureLoaded = output<THREE.Texture[]>();
133+
matcapTextureLoaded = input<(texture: THREE.Texture) => void>();
89134

90135
private template = inject(TemplateRef);
91136
private vcr = inject(ViewContainerRef);
@@ -96,13 +141,13 @@ export class NgtsMatcapTexture {
96141
private ref?: EmbeddedViewRef<{ $implicit: Signal<THREE.Texture | null> }>;
97142

98143
constructor() {
99-
const { texture } = injectMatcapTexture(this.id, {
144+
const { resource } = matcapTextureResource(this.id, {
100145
format: this.format,
101-
onLoad: this.matcapTextureLoaded.emit.bind(this.matcapTextureLoaded),
146+
onLoad: this.matcapTextureLoaded(),
102147
});
103148

104149
effect(() => {
105-
this.ref = this.vcr.createEmbeddedView(this.template, { $implicit: texture });
150+
this.ref = this.vcr.createEmbeddedView(this.template, { $implicit: resource });
106151
this.ref.detectChanges();
107152
});
108153

@@ -114,7 +159,7 @@ export class NgtsMatcapTexture {
114159
static ngTemplateContextGuard(
115160
_: NgtsMatcapTexture,
116161
ctx: unknown,
117-
): ctx is { $implicit: Signal<THREE.Texture | null> } {
162+
): ctx is { $implicit: ResourceRef<THREE.Texture | undefined> } {
118163
return true;
119164
}
120165
}

‎libs/soba/staging/src/lib/normal-texture.ts‎

Lines changed: 66 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,16 @@ import {
33
Directive,
44
EmbeddedViewRef,
55
Injector,
6-
Signal,
6+
ResourceRef,
77
TemplateRef,
88
ViewContainerRef,
99
computed,
1010
effect,
1111
inject,
1212
input,
13-
output,
1413
signal,
1514
} from '@angular/core';
16-
import { injectTexture } from 'angular-three-soba/loaders';
15+
import { injectTexture, textureResource } from 'angular-three-soba/loaders';
1716
import { assertInjector } from 'ngxtension/assert-injector';
1817
import * as THREE from 'three';
1918

@@ -26,6 +25,10 @@ interface NgtsNormalTextureSettings {
2625
offset?: number[];
2726
}
2827

28+
/**
29+
* @deprecated Use normalTexture instead. Will be removed in v5.0.0
30+
* @since v4.0.0
31+
*/
2932
export function injectNormalTexture(
3033
id: () => string | number = () => 0,
3134
{
@@ -79,14 +82,68 @@ export function injectNormalTexture(
7982
});
8083
}
8184

85+
export function normalTextureResource(
86+
id: () => string | number = () => 0,
87+
{
88+
settings = () => ({}),
89+
onLoad,
90+
injector,
91+
}: { settings?: () => NgtsNormalTextureSettings; onLoad?: (texture: THREE.Texture) => void; injector?: Injector },
92+
) {
93+
return assertInjector(normalTextureResource, injector, () => {
94+
const normalList = signal<Record<string, string>>({});
95+
96+
fetch(LIST_URL)
97+
.then((res) => res.json())
98+
.then((list) => {
99+
normalList.set(list);
100+
});
101+
102+
const DEFAULT_NORMAL = computed(() => normalList()[0]);
103+
const numTot = computed(() => Object.keys(normalList()).length);
104+
105+
const fileHash = computed(() => {
106+
const idValue = id();
107+
if (typeof idValue === 'string') {
108+
return idValue;
109+
}
110+
111+
if (typeof idValue === 'number') {
112+
return normalList()[idValue];
113+
}
114+
115+
return null;
116+
});
117+
118+
const imageName = computed(() => fileHash() || DEFAULT_NORMAL());
119+
const url = computed(() => `${NORMAL_ROOT}/normals/${imageName()}`);
120+
121+
const resource = textureResource(url, { onLoad });
122+
123+
effect(() => {
124+
if (!resource.hasValue()) return;
125+
126+
const texture = resource.value();
127+
const { anisotropy = 1, repeat = [1, 1], offset = [0, 0] } = settings();
128+
129+
texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
130+
texture.repeat = new THREE.Vector2(repeat[0], repeat[1]);
131+
texture.offset = new THREE.Vector2(offset[0], offset[1]);
132+
texture.anisotropy = anisotropy;
133+
});
134+
135+
return { url, resource, numTot };
136+
});
137+
}
138+
82139
export interface NgtsNormalTextureOptions extends NgtsNormalTextureSettings {
83140
id?: number | string;
84141
}
85142

86143
@Directive({ selector: 'ng-template[normalTexture]' })
87144
export class NgtsNormalTexture {
88145
normalTexture = input<NgtsNormalTextureOptions>();
89-
normalTextureLoaded = output<THREE.Texture[]>();
146+
normalTextureLoaded = input<(texture: THREE.Texture) => void>();
90147

91148
private template = inject(TemplateRef);
92149
private vcr = inject(ViewContainerRef);
@@ -97,16 +154,16 @@ export class NgtsNormalTexture {
97154
return settings;
98155
});
99156

100-
private ref?: EmbeddedViewRef<{ $implicit: Signal<THREE.Texture | null> }>;
157+
private ref?: EmbeddedViewRef<{ $implicit: ResourceRef<THREE.Texture | undefined> }>;
101158

102159
constructor() {
103-
const { texture } = injectNormalTexture(this.id, {
160+
const { resource } = normalTextureResource(this.id, {
104161
settings: this.settings,
105-
onLoad: this.normalTextureLoaded.emit.bind(this.normalTextureLoaded),
162+
onLoad: this.normalTextureLoaded(),
106163
});
107164

108165
effect(() => {
109-
this.ref = this.vcr.createEmbeddedView(this.template, { $implicit: texture });
166+
this.ref = this.vcr.createEmbeddedView(this.template, { $implicit: resource });
110167
this.ref.detectChanges();
111168
});
112169

@@ -118,7 +175,7 @@ export class NgtsNormalTexture {
118175
static ngTemplateContextGuard(
119176
_: NgtsNormalTexture,
120177
ctx: unknown,
121-
): ctx is { $implicit: Signal<THREE.Texture | null> } {
178+
): ctx is { $implicit: ResourceRef<THREE.Texture | undefined> } {
122179
return true;
123180
}
124181
}

0 commit comments

Comments
 (0)