Merge pull request #92 from FunTechInc/v1.1.10

fix obscurus demo

Author: takuma-hmng8

Diff for: app/obscurus/Playground.tsx

@@ -128,10 +128,9 @@ const setWobbleConfig = () => {
 
 export const Playground = () => {
    useGUI(setGUI);
-   const [noise] = useLoader(THREE.TextureLoader, ["/noise.jpg"]);
    const { size, viewport, camera } = useThree();
+   const [noise] = useLoader(THREE.TextureLoader, ["/noise.jpg"]);
    const [updateWobble, wobble] = useCreateWobble3D({
-      baseMaterial: THREE.MeshPhysicalMaterial,
       geometry: useMemo(() => new THREE.IcosahedronGeometry(2.4, 10), []),
       materialParameters: MATERIAL_CONFIG,
    });
@@ -141,11 +140,9 @@ export const Playground = () => {
       geometry: useMemo(() => new THREE.IcosahedronGeometry(0.8, 10), []),
    });
    useEffect(() => {
-      const particleMat = particles.points.material as THREE.ShaderMaterial;
-      particleMat.blending = THREE.NormalBlending;
+      particles.points.material.blending = THREE.NormalBlending;
       camera.position.z = 8;
    }, [noise, updateParticle, particles.points.material, camera]);
-
    useFrame((props) => {
       updateWobble(props, {
          ...setWobbleConfig(),
@@ -171,3 +168,42 @@ export const Playground = () => {
       </mesh>
    );
 };
+
+/*===============================================
+simple version
+===============================================*/
+// export const Playground = () => {
+//    const { size, viewport, camera } = useThree();
+//    const [noise] = useLoader(THREE.TextureLoader, ["/noise.jpg"]);
+
+// 	const [updateWobble, wobble] = useCreateWobble3D({
+//       baseMaterial: THREE.MeshPhysicalMaterial,
+//       geometry: useMemo(() => new THREE.IcosahedronGeometry(2.4, 10), []),
+//       materialParameters: MATERIAL_CONFIG,
+//    });
+//    const [updateParticle, particles] = useCreateMorphParticles({
+//       size,
+//       dpr: viewport.dpr,
+//       geometry: useMemo(() => new THREE.IcosahedronGeometry(0.8, 10), []),
+//    });
+
+// 	useEffect(() => {
+//       particles.points.material.blending = THREE.NormalBlending;
+//       camera.position.z = 8;
+//       updateWobble(null, WOBBLE_CONFIG);
+//       updateParticle(null, { ...PARTICLE_CONFIG, alphaMap: noise });
+//    }, [particles.points.material, camera, updateWobble, updateParticle, noise]);
+//    useFrame((props) => {
+//       updateWobble(props);
+//       updateParticle(props);
+//    });
+
+// 	return (
+//       <mesh>
+//          <OrbitControls />
+//          <Environment files={"/snowpark.exr"} background={true} />
+//          <primitive object={wobble.mesh} />
+//          <primitive object={particles.points} />
+//       </mesh>
+//    );
+// };

Diff for: packages/use-shader-fx/build/use-shader-fx.js

@@ -1,6 +1,6 @@
 {
    "name": "@funtech-inc/use-shader-fx",
-   "version": "1.1.10",
+   "version": "1.1.11",
    "description": "⚡️ More FXs, Less GLSL",
    "main": "./build/use-shader-fx.umd.cjs",
    "module": "./build/use-shader-fx.js",

Diff for: packages/use-shader-fx/build/use-shader-fx.js.map

@@ -8,6 +8,7 @@ import {
    UseCreateMorphParticlesProps,
 } from "./useCreateMorphParticles";
 import { HooksProps3D } from "../types";
+import { InteractiveMesh, MorphParticlePoints } from "./utils/useCreateObject";
 
 export type MorphParticlesParams = {
    /** progress value to morph vertices,0~1 */
@@ -58,8 +59,8 @@ export type MorphParticlesParams = {
 
 export type MorphParticlesObject = {
    scene: THREE.Scene;
-   points: THREE.Points;
-   interactiveMesh: THREE.Mesh;
+   points: MorphParticlePoints;
+   interactiveMesh: InteractiveMesh;
    renderTarget: THREE.WebGLRenderTarget;
    output: THREE.Texture;
    positions: Float32Array[];

Diff for: packages/use-shader-fx/build/use-shader-fx.umd.cjs.map

@@ -1,6 +1,10 @@
 import * as THREE from "three";
 import { Size, RootState } from "@react-three/fiber";
-import { useCreateObject } from "./utils/useCreateObject";
+import {
+   InteractiveMesh,
+   MorphParticlePoints,
+   useCreateObject,
+} from "./utils/useCreateObject";
 import { useMaterial } from "./utils/useMaterial";
 import { MorphParticlesParams } from ".";
 import { setUniform } from "../../../utils/setUniforms";
@@ -22,11 +26,12 @@ type UpdateUniform = (
    props: RootState | null,
    params?: MorphParticlesParams
 ) => void;
+
 type UseCreateMorphParticlesReturn = [
    UpdateUniform,
    {
-      points: THREE.Points;
-      interactiveMesh: THREE.Mesh;
+      points: MorphParticlePoints;
+      interactiveMesh: InteractiveMesh;
       positions: Float32Array[];
       uvs: Float32Array[];
    }

Diff for: packages/use-shader-fx/package-lock.json

@@ -8,20 +8,34 @@ type UseCreateObjectProps = {
    material: THREE.ShaderMaterial;
 };
 
+export type MorphParticlePoints = THREE.Points<
+   THREE.BufferGeometry<THREE.NormalBufferAttributes>,
+   THREE.ShaderMaterial
+>;
+export type InteractiveMesh = THREE.Mesh<
+   THREE.BufferGeometry<THREE.NormalBufferAttributes>,
+   THREE.ShaderMaterial
+>;
+
 export const useCreateObject = ({
    scene,
    geometry,
    material,
 }: UseCreateObjectProps) => {
-   const points = useAddObject(scene, geometry, material, THREE.Points);
+   const points = useAddObject(
+      scene,
+      geometry,
+      material,
+      THREE.Points
+   ) as MorphParticlePoints;
 
    // Generate a mesh for pointer
    const interactiveMesh = useAddObject(
       scene,
       useMemo(() => geometry.clone(), [geometry]),
       useMemo(() => material.clone(), [material]),
       THREE.Mesh
-   );
+   ) as InteractiveMesh;
    interactiveMesh.visible = false;
 
    return {

Diff for: packages/use-shader-fx/package.json

@@ -19,7 +19,7 @@ export type UseCreateWobble3DProps = {
 };
 
 type UpdateUniform = (props: RootState | null, params?: Wobble3DParams) => void;
-type UseCreateWobble3DReturn = [
+type UseCreateWobble3DReturn<T> = [
    UpdateUniform,
    {
       mesh: THREE.Mesh;
@@ -34,7 +34,7 @@ export const useCreateWobble3D = <T extends WobbleMaterialConstructor>({
    materialParameters,
 }: UseCreateWobble3DProps &
    Create3DHooksProps &
-   WobbleMaterialProps<T>): UseCreateWobble3DReturn => {
+   WobbleMaterialProps<T>): UseCreateWobble3DReturn<T> => {
    const wobbleGeometry = useMemo(() => {
       let geo = geometry || new THREE.IcosahedronGeometry(2, 20);
       geo = mergeVertices(geo);
@@ -46,7 +46,7 @@ export const useCreateWobble3D = <T extends WobbleMaterialConstructor>({
       materialParameters,
    });
 
-   const object = useAddObject(scene, wobbleGeometry, material, THREE.Mesh);
+   const mesh = useAddObject(scene, wobbleGeometry, material, THREE.Mesh);
 
    const updateUniform = useCallback<UpdateUniform>(
       (props, params) => {
@@ -102,7 +102,7 @@ export const useCreateWobble3D = <T extends WobbleMaterialConstructor>({
    return [
       updateUniform,
       {
-         mesh: object,
+         mesh,
          depthMaterial,
       },
    ];

Diff for: packages/use-shader-fx/src/fxs/3D/useMorphParticles/index.ts

@@ -1,19 +1,22 @@
 import * as THREE from "three";
 import { useEffect, useMemo } from "react";
 
-type Object3DConstructor<T> = new (
+type Object3DConstructor<T, M extends THREE.Material> = new (
    geometry: THREE.BufferGeometry,
-   material: THREE.Material
+   material: M
 ) => T;
 
 /**
  * Add geometry and material to Object3D and add them to scene.
  */
-export const useAddObject = <T extends THREE.Object3D>(
+export const useAddObject = <
+   T extends THREE.Object3D,
+   M extends THREE.Material
+>(
    scene: THREE.Scene | false,
    geometry: THREE.BufferGeometry,
-   material: THREE.Material,
-   Proto: Object3DConstructor<T>
+   material: M,
+   Proto: Object3DConstructor<T, M>
 ) => {
    const object3D = useMemo(() => {
       return new Proto(geometry, material);

Diff for: packages/use-shader-fx/src/fxs/3D/useMorphParticles/useCreateMorphParticles.ts

@@ -2,6 +2,7 @@ import * as THREE from "three";
 import { HooksReturn } from "../../types";
 import { UseCreateMorphParticlesProps } from "./useCreateMorphParticles";
 import { HooksProps3D } from "../types";
+import { InteractiveMesh, MorphParticlePoints } from "./utils/useCreateObject";
 export type MorphParticlesParams = {
     /** progress value to morph vertices,0~1 */
     morphProgress?: number;
@@ -50,8 +51,8 @@ export type MorphParticlesParams = {
 };
 export type MorphParticlesObject = {
     scene: THREE.Scene;
-    points: THREE.Points;
-    interactiveMesh: THREE.Mesh;
+    points: MorphParticlePoints;
+    interactiveMesh: InteractiveMesh;
     renderTarget: THREE.WebGLRenderTarget;
     output: THREE.Texture;
     positions: Float32Array[];

Diff for: packages/use-shader-fx/src/fxs/3D/useMorphParticles/utils/useCreateObject.ts

@@ -1,5 +1,6 @@
 import * as THREE from "three";
 import { Size, RootState } from "@react-three/fiber";
+import { InteractiveMesh, MorphParticlePoints } from "./utils/useCreateObject";
 import { MorphParticlesParams } from ".";
 import { Create3DHooksProps } from "../types";
 export type UseCreateMorphParticlesProps = {
@@ -16,8 +17,8 @@ type UpdateUniform = (props: RootState | null, params?: MorphParticlesParams) =>
 type UseCreateMorphParticlesReturn = [
     UpdateUniform,
     {
-        points: THREE.Points;
-        interactiveMesh: THREE.Mesh;
+        points: MorphParticlePoints;
+        interactiveMesh: InteractiveMesh;
         positions: Float32Array[];
         uvs: Float32Array[];
     }

Diff for: packages/use-shader-fx/src/fxs/3D/useWobble3D/useCreateWobble3D.ts

@@ -4,8 +4,10 @@ type UseCreateObjectProps = {
     geometry: THREE.BufferGeometry;
     material: THREE.ShaderMaterial;
 };
+export type MorphParticlePoints = THREE.Points<THREE.BufferGeometry<THREE.NormalBufferAttributes>, THREE.ShaderMaterial>;
+export type InteractiveMesh = THREE.Mesh<THREE.BufferGeometry<THREE.NormalBufferAttributes>, THREE.ShaderMaterial>;
 export declare const useCreateObject: ({ scene, geometry, material, }: UseCreateObjectProps) => {
-    points: THREE.Points<THREE.BufferGeometry<THREE.NormalBufferAttributes>, THREE.Material>;
-    interactiveMesh: THREE.Mesh<THREE.BufferGeometry<THREE.NormalBufferAttributes>, THREE.Material>;
+    points: MorphParticlePoints;
+    interactiveMesh: InteractiveMesh;
 };
 export {};