fun fun fun

app.tsx

import { Grid, Instance, InstancedAttribute, Instances, OrbitControls, PerformanceMonitor, shaderMaterial, Stats, StatsGl } from "@react-three/drei";
import { Canvas, createRoot, events, extend, ThreeElements, useFrame } from "@react-three/fiber";
import { useControls } from "leva";
import GUI from "lil-gui";
import React, { useEffect, useRef, useState } from 'react';
import * as THREE from 'three';

extend(THREE);

console.log('hi');

const CoolMaterial = shaderMaterial({
    time: 0,

    amp: new THREE.Vector3(3, 3, 3),
    freq: new THREE.Vector3(3, 5, 1),
    phase: new THREE.Vector3(0, 1, 0),

    knot: 0.0,

}, /*VERTEX*/`

uniform float time;

uniform vec3 amp;
uniform vec3 freq;
uniform vec3 phase;

uniform float knot;

attribute float t;

varying float vT;
varying vec3 vNormal;

void main() {
    vNormal = normal;
    vT = t;

    float tt = time*.7 + t*(2.0*3.14);
    vec3 pos = position + amp*(
        sin(freq*vec3(tt) + phase) + knot*vec3( sin(knot*tt), -cos(knot*tt), 0. )
    )/(1.+knot);

    gl_Position =
        projectionMatrix 
        * viewMatrix
        * modelMatrix
        * instanceMatrix
        * vec4(pos, 1.0);
}

`, /*FRAGMENT*/`

uniform float time;

varying float vT;
varying vec3 vNormal;

vec3 turbo(float x) {
    float r = 0.1357 + x * ( 4.5974 - x * ( 42.3277 - x * ( 130.5887 - x * ( 150.5666 - x * 58.1375 ))));
    float g = 0.0914 + x * ( 2.1856 + x * ( 4.8052 - x * ( 14.0195 - x * ( 4.2109 + x * 2.7747 ))));
    float b = 0.1067 + x * ( 12.5925 - x * ( 60.1097 - x * ( 109.0745 - x * ( 88.5066 - x * 26.8183 ))));
    return vec3(r,g,b);
}

void main() {
    vec3 light = normalize(vec3(.6,.8,1.));
    float p = max(0.5, dot(vNormal, light));
    gl_FragColor = vec4(vec3(turbo(vT)*p),1.);
}

`);

extend({ CoolMaterial });

function App() {
    useEffect(() => { console.log("rerender"); });

    const { num, speed, amp, n, m, phase, knot } = useControls({
        num: 500,
        speed: { value: .1, min: 0, max: 10 },
        amp: { x: 8, y: 8, z: 8 },
        n: { value: 3, min: -10, max: 10, step: 1 },
        m: { value: 2, min: -10, max: 10, step: 1 },
        phase: { x: 0, y: 1, z: 2 },
        knot: { value: 0, min: 0, max: 10 },
    });

    const nn = n < 0 ? 1 / -n : n;
    const mm = m < 0 ? 1 / -m : m;

    const matRef = useRef<typeof CoolMaterial>();
    useFrame(_state => {
        matRef.current!.time = .001 * speed * performance.now();
    });

    /*
    const ref = useRef();
    useEffect(() => {
        gui.current.add(ref.current, 'intensity', 0, 5, .01);
    }, []);
    const instancedMeshRef = useRef();
    */

    return (
        <>
            <StatsGl />
            <OrbitControls /> {/*autoRotate*/}
            <Grid
                infiniteGrid
                scale={[10, 10, 10]}
                cellSize={.1}
                sectionSize={1}
                fadeStrength={1}
                fadeDistance={100}
                fadeFrom={0}
            />


            {/*<ambientLight ref={ref} intensity={1} />*/}

            <Instances limit={100000}>
                <boxGeometry args={[.5, .5, .5]} />
                <coolMaterial
                    ref={matRef}
                    key={CoolMaterial.key}
                    amp={new THREE.Vector3(amp.x, amp.y, amp.z)}
                    freq={new THREE.Vector3(1, nn, nn * mm)}
                    phase={new THREE.Vector3(phase.x, phase.y, phase.z)}
                    knot={knot}
                />
                <InstancedAttribute name="t" defaultValue={0} />
                {Array.from({ length: num }, (_, i) => 
                    <Instance 
                        key={i}
                        t={i / num}
                        onPointerOver={(e) => console.log('hovered')}
                    />
                )}
            </Instances>

            {/*
                <meshStandardMaterial />
                <meshStandardMaterial />

            <instancedMesh ref={ref} count={100}>
                <boxGeometry args={[.5, .5, .5]} />
                <meshStandardMaterial color={'orange'} />
            </instancedMesh >

            <Box position={[1, 0, 0]} />
            <Box position={[0, 1, 0]} />
            <Box position={[-1, 0, 0]} />
            */}
        </>
    );
}

const canvas = document.querySelector('canvas') as HTMLCanvasElement;
const root = createRoot(canvas);
root.configure({ events, camera: { position: [10, 10, 10] } });
window.addEventListener('resize', () => {
    root.configure({
        size: {
            top: 0,
            left: 0,
            width: window.innerWidth,
            height: window.innerHeight,
        },
    });
});
setTimeout(() => window.dispatchEvent(new Event('resize')), 0);

root.render(<App />);