\u201cWavy infinite carousel\u201d menggabungkan React Three Fiber<\/strong> (R3F) untuk render 3D\/WebGL dengan GLSL<\/strong> untuk mendistorsi kartu\/gambar secara dinamis sehingga terasa hidup saat bergerak tak-berujung. Inti tekniknya: instancing<\/em> untuk performa, vertex shader<\/em> untuk gelombang, fragment shader<\/em> untuk pewarnaan\/tekstur, dan loop wrap<\/em> untuk ilusi tak-berujung.<\/p>\n Shader berikut bersifat ilustratif (bukan salinan artikel sumber). Ubah sesuai kebutuhan produksi.<\/p>\n Contoh singkat: membuat baris panel instanced yang bergeser dan di-wrap. Gunakan loader tekstur sesuai kebutuhan (atlas\/array).<\/p>\n <img src="data:image\/svg+xml;utf8,Kontrol Shader\u2022 uAmplitude (tinggi gelombang)\u2022 uFrequency (kerapatan)\u2022 uSpeed (kecepatan fase)Guardrails Performa\u2022 Instancing \u2022 atlas \u2022 mipmaps\u2022 Batasi segmen geometry\u2022 Fallback mobileUX & A11y\u2022 Respek prefers-reduced-motion \u2022 Kontrol keyboard\u2022 SEO fallback (daftar gambar statis)” alt=”Panel parameter shader, guardrails performa, dan rekomendasi UX\/A11y” \/><\/p>\nKonsep Dasar<\/h2>\n
\n
uTime<\/code>, uAmplitude<\/code>, dan uFrequency<\/code>.<\/li>\naOffset<\/code> memberi variasi fase gelombang.<\/li>\nStruktur Arsitektur Mini<\/h2>\n
\n
useFrame<\/code> untuk animasi posisi dan waktu shader.<\/li>\nsetMatrixAt<\/code> + InstancedBufferAttribute<\/code> untuk offset\/fase.<\/li>\nContoh Shader (Ilustratif)<\/h2>\n
Vertex Shader (gelombang)<\/h3>\n
uniform float uTime;\r\nuniform float uAmplitude; \/\/ tinggi gelombang\r\nuniform float uFrequency; \/\/ kerapatan gelombang\r\nuniform float uSpeed; \/\/ kecepatan fase\r\nattribute float aOffset; \/\/ variasi per-instance\r\nvarying vec2 vUv;\r\n\r\nvoid main() {\r\n vec3 p = position;\r\n float phase = (aOffset + p.x) * uFrequency + uTime * uSpeed;\r\n p.y += sin(phase) * uAmplitude;\r\n vUv = uv;\r\n gl_Position = projectionMatrix * modelViewMatrix * vec4(p, 1.0);\r\n}\r\n<\/code><\/pre>\nFragment Shader (sampling & toning)<\/h3>\n
uniform sampler2D uMap;\r\nuniform float uTint; \/\/ 0.0..1.0 untuk efek toning ringan\r\nvarying vec2 vUv;\r\n\r\nvoid main() {\r\n vec4 tex = texture2D(uMap, vUv);\r\n vec3 tone = mix(tex.rgb, tex.rgb * vec3(0.95, 1.05, 1.10), uTint);\r\n gl_FragColor = vec4(tone, tex.a);\r\n}\r\n<\/code><\/pre>\nContoh R3F (Ilustratif)<\/h2>\n
\/\/ Carousel.tsx (ilustratif)\r\nimport * as THREE from \"three\";\r\nimport { Canvas, useFrame, useThree } from \"@react-three\/fiber\";\r\nimport { useMemo, useRef } from \"react\";\r\n\r\nfunction WavyCarousel({ count = 20, spacing = 1.2 }) {\r\n const meshRef = useRef<THREE.InstancedMesh>(null);\r\n const matRef = useRef<THREE.ShaderMaterial>(null);\r\n const { clock } = useThree();\r\n\r\n \/\/ Posisi awal per panel dan offset fase\r\n const { matrices, offsets } = useMemo(() => {\r\n const dummy = new THREE.Object3D();\r\n const m = new Array(count);\r\n const o = new Float32Array(count);\r\n for (let i = 0; i < count; i++) {\r\n dummy.position.set(i * spacing, 0, 0);\r\n dummy.rotation.set(0, 0, 0);\r\n dummy.updateMatrix();\r\n m[i] = dummy.matrix.clone();\r\n o[i] = i * 0.37; \/\/ fase unik agar gelombang tidak seragam\r\n }\r\n return { matrices: m, offsets: o };\r\n }, [count, spacing]);\r\n\r\n \/\/ Buat atribut offset untuk instancing\r\n const offsetAttr = useMemo(() => new THREE.InstancedBufferAttribute(offsets, 1), [offsets]);\r\n\r\n \/\/ Parameter loop\r\n const totalWidth = (count - 1) * spacing;\r\n const speed = 0.6; \/\/ unit per detik\r\n\r\n useFrame((state, dt) => {\r\n const t = clock.getElapsedTime();\r\n if (matRef.current) {\r\n matRef.current.uniforms.uTime.value = t;\r\n }\r\n \/\/ Geser semua panel ke kiri, wrap saat melewati batas\r\n const dummy = new THREE.Object3D();\r\n for (let i = 0; i < count; i++) {\r\n dummy.matrix.copy(matrices[i]);\r\n dummy.position.set(\r\n ((dummy.position.x - speed * dt) % (totalWidth + spacing) + (totalWidth + spacing)) % (totalWidth + spacing),\r\n 0,\r\n 0\r\n );\r\n dummy.updateMatrix();\r\n meshRef.current!.setMatrixAt(i, dummy.matrix);\r\n }\r\n meshRef.current!.instanceMatrix.needsUpdate = true;\r\n });\r\n\r\n return (\r\n <instancedMesh ref={meshRef} args={[undefined as any, undefined as any, count]}>\r\n <planeGeometry args={[1, 0.6, 16, 16]}>\r\n <instancedBufferAttribute attach='attributes-aOffset' args={[offsetAttr.array, 1]} \/>\r\n <\/planeGeometry>\r\n <shaderMaterial\r\n ref={matRef}\r\n uniforms={{\r\n uTime: { value: 0 },\r\n uAmplitude: { value: 0.08 },\r\n uFrequency: { value: 2.5 },\r\n uSpeed: { value: 2.0 },\r\n uTint: { value: 0.15 },\r\n uMap: { value: new THREE.TextureLoader().load('\/path\/to\/texture.jpg') }\r\n }}\r\n vertexShader={`uniform float uTime;uniform float uAmplitude;uniform float uFrequency;uniform float uSpeed;attribute float aOffset;varying vec2 vUv;void main(){vec3 p=position;float phase=(aOffset+p.x)*uFrequency+uTime*uSpeed;p.y+=sin(phase)*uAmplitude;vUv=uv;gl_Position=projectionMatrix*modelViewMatrix*vec4(p,1.0);}`}\r\n fragmentShader={`uniform sampler2D uMap;uniform float uTint;varying vec2 vUv;void main(){vec4 tex=texture2D(uMap,vUv);vec3 tone=mix(tex.rgb,tex.rgb*vec3(0.95,1.05,1.10),uTint);gl_FragColor=vec4(tone,tex.a);}`}\r\n transparent\r\n \/>\r\n <\/instancedMesh>\r\n );\r\n}\r\n\r\nexport default function Scene() {\r\n return (\r\n <Canvas camera={{ position: [0, 0, 3], fov: 50 }}>\r\n <ambientLight intensity={0.6} \/>\r\n <WavyCarousel count={24} spacing={1.1} \/>\r\n <\/Canvas>\r\n );\r\n}\r\n<\/code><\/pre>\nKontrol Interaksi<\/h2>\n
\n
uAmplitude<\/code> sementara lalu lerp kembali.<\/li>\nPerforma & Kualitas<\/h2>\n
\n
InstancedMesh<\/code> alih-alih banyak mesh terpisah.<\/li>\nAksesibilitas & UX<\/h2>\n
\n
prefers-reduced-motion<\/code> dengan menurunkan uAmplitude<\/code>\/speed<\/code>.<\/li>\nChecklist Implementasi Cepat<\/h2>\n
\n
InstancedMesh<\/code> panel (plane) + atribut aOffset<\/code>.<\/li>\nuTime<\/code>, uAmplitude<\/code>, uFrequency<\/code>, uSpeed<\/code>).<\/li>\nuseFrame<\/code> dan kontrol interaksi (drag\/hover).<\/li>\nSumber & Kredit<\/h2>\n