use more stuffs from vanilla; mesh distort

Author: nartc

libs/soba/materials/src/index.ts

@@ -1,4 +1,5 @@
 export * from './lib/custom-shader-material';
+export * from './lib/mesh-distort-material';
 export * from './lib/mesh-reflector-material';
 export * from './lib/mesh-refraction-material';
 export * from './lib/mesh-transmission-material';

libs/soba/materials/src/lib/mesh-distort-material.ts

@@ -0,0 +1,44 @@
+import { ChangeDetectionStrategy, Component, CUSTOM_ELEMENTS_SCHEMA, input } from '@angular/core';
+import { MeshDistortMaterial } from '@pmndrs/vanilla';
+import { injectBeforeRender, NgtArgs, NgtMeshPhysicalMaterial, omit, pick } from 'angular-three';
+import { MeshDistortMaterialParameters } from 'angular-three-soba/vanilla-exports';
+import { mergeInputs } from 'ngxtension/inject-inputs';
+
+export interface NgtsMeshDistortMaterialOptions
+	extends Partial<MeshDistortMaterialParameters>,
+		Partial<NgtMeshPhysicalMaterial> {
+	speed: number;
+	factor?: number;
+}
+
+const defaultOptions: NgtsMeshDistortMaterialOptions = {
+	speed: 1,
+};
+
+@Component({
+	selector: 'ngts-mesh-distort-material',
+	standalone: true,
+	template: `
+		<ngt-primitive *args="[material]" [attach]="attach()" [parameters]="parameters()">
+			<ng-content />
+		</ngt-primitive>
+	`,
+	schemas: [CUSTOM_ELEMENTS_SCHEMA],
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [NgtArgs],
+})
+export class NgtsMeshDistortMaterial {
+	attach = input('material');
+	options = input(defaultOptions, { transform: mergeInputs(defaultOptions) });
+	parameters = omit(this.options, ['speed']);
+
+	material = new MeshDistortMaterial();
+
+	private speed = pick(this.options, 'speed');
+
+	constructor() {
+		injectBeforeRender(({ clock }) => {
+			this.material.time = clock.getElapsedTime() * this.speed();
+		});
+	}
+}

libs/soba/materials/src/lib/mesh-reflector-material.ts

@@ -11,7 +11,6 @@ import {
 	untracked,
 	viewChild,
 } from '@angular/core';
-import { BlurPass, MeshReflectorMaterial } from '@pmndrs/vanilla';
 import {
 	applyProps,
 	getLocalState,
@@ -23,6 +22,7 @@ import {
 	omit,
 	pick,
 } from 'angular-three';
+import { BlurPass, MeshReflectorMaterial } from 'angular-three-soba/vanilla-exports';
 import { injectAutoEffect } from 'ngxtension/auto-effect';
 import { mergeInputs } from 'ngxtension/inject-inputs';
 import {

libs/soba/materials/src/lib/mesh-wobble-material.ts

@@ -1,9 +1,9 @@
 import { ChangeDetectionStrategy, Component, computed, CUSTOM_ELEMENTS_SCHEMA, input } from '@angular/core';
 import { injectBeforeRender, NgtArgs, omit } from 'angular-three';
-import { MeshWobbleMaterial, MeshWobbleMaterialOptions } from 'angular-three-soba/shaders';
+import { MeshWobbleMaterial, MeshWobbleMaterialParameters } from 'angular-three-soba/vanilla-exports';
 import { mergeInputs } from 'ngxtension/inject-inputs';
 
-export interface NgtsMeshWobbleMaterialOptions extends MeshWobbleMaterialOptions {
+export interface NgtsMeshWobbleMaterialOptions extends MeshWobbleMaterialParameters {
 	speed: number;
 }
 

libs/soba/package.json

@@ -29,7 +29,7 @@
 		"@angular/common": "^18.0.0",
 		"@angular/core": "^18.0.0",
 		"@monogrid/gainmap-js": "^3.0.0",
-		"@pmndrs/vanilla": "^1.16.0",
+		"@pmndrs/vanilla": "^1.19.0",
 		"camera-controls": "^2.8.0",
 		"hls.js": "^1.5.0",
 		"meshline": "^3.1.0",

libs/soba/shaders/src/index.ts

@@ -1,4 +1,2 @@
-export * from './lib/caustics';
 export * from './lib/grid-material';
 export * from './lib/mesh-refraction-material';
-export * from './lib/mesh-wobble-material';