docs: apply maxime article on particles

Author: nartc

apps/examples/src/app/misc/misc.routes.ts

@@ -37,6 +37,17 @@ const routes: Routes = [
 			},
 		},
 	},
+	{
+		path: 'particle-maxime',
+		loadComponent: () => import('./particle-maxime/particle-maxime'),
+		data: {
+			credits: {
+				title: 'The magical world of particles with React Three Fiber and shaders',
+				link: 'https://blog.maximeheckel.com/posts/the-magical-world-of-particles-with-react-three-fiber-and-shaders/',
+				class: 'text-white',
+			},
+		},
+	},
 	{
 		path: '',
 		redirectTo: 'basic',

apps/examples/src/app/misc/particle-maxime/fragment.glsl

@@ -0,0 +1,4 @@
+void main() {
+    vec3 color = vec3(0.34, 0.53, 0.96);
+    gl_FragColor = vec4(color, 1.0);
+}

apps/examples/src/app/misc/particle-maxime/particle-maxime.ts

@@ -0,0 +1,15 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { NgtCanvas } from 'angular-three/dom';
+import { SceneGraph } from './scene';
+
+@Component({
+	template: `
+		<ngt-canvas>
+			<app-scene-graph *canvasContent />
+		</ngt-canvas>
+	`,
+	imports: [NgtCanvas, SceneGraph],
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	host: { class: 'particle-maxime' },
+})
+export default class ParticleMaxime {}

apps/examples/src/app/misc/particle-maxime/scene.ts

@@ -0,0 +1,150 @@
+import { ChangeDetectionStrategy, Component, CUSTOM_ELEMENTS_SCHEMA, ElementRef, viewChild } from '@angular/core';
+import { extend, injectBeforeRender, NgtArgs, NgtPortal } from 'angular-three';
+import { NgtsPerspectiveCamera } from 'angular-three-soba/cameras';
+import { NgtsOrbitControls } from 'angular-three-soba/controls';
+import { injectFBO } from 'angular-three-soba/misc';
+import * as THREE from 'three';
+
+import { SimulationMaterial } from './simulation-material';
+
+import fragmentShader from './fragment.glsl' with { loader: 'text' };
+import vertexShader from './vertex.glsl' with { loader: 'text' };
+
+extend({ SimulationMaterial });
+
+@Component({
+	selector: 'app-fbo-particles',
+	template: `
+		<ngt-portal [container]="virtualScene">
+			<ng-template portalContent>
+				<ngt-mesh>
+					<ngt-simulation-material #simulationMaterial *args="[size]" />
+					<ngt-buffer-geometry>
+						<ngt-buffer-attribute
+							attach="attributes.position"
+							[count]="positions.length / 3"
+							[array]="positions"
+							[itemSize]="3"
+						/>
+						<ngt-buffer-attribute
+							attach="attributes.uv"
+							[count]="uvs.length / 2"
+							[array]="uvs"
+							[itemSize]="2"
+						/>
+					</ngt-buffer-geometry>
+				</ngt-mesh>
+			</ng-template>
+		</ngt-portal>
+
+		<ngt-points>
+			<ngt-buffer-geometry>
+				<ngt-buffer-attribute
+					attach="attributes.position"
+					[count]="particlePositions.length / 3"
+					[array]="particlePositions"
+					[itemSize]="3"
+				/>
+			</ngt-buffer-geometry>
+			<ngt-shader-material
+				[depthWrite]="false"
+				[uniforms]="uniforms"
+				[vertexShader]="vertexShader"
+				[fragmentShader]="fragmentShader"
+				[blending]="AdditiveBlending"
+			/>
+		</ngt-points>
+	`,
+	imports: [NgtArgs, NgtPortal],
+	schemas: [CUSTOM_ELEMENTS_SCHEMA],
+	changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FBOParticles {
+	protected readonly Math = Math;
+	protected readonly vertexShader = vertexShader;
+	protected readonly fragmentShader = fragmentShader;
+	protected readonly AdditiveBlending = THREE.AdditiveBlending;
+
+	protected size = 128;
+	protected virtualScene = new THREE.Scene();
+	protected virtualCamera = new THREE.OrthographicCamera(-1, 1, 1, -1, 1 / Math.pow(2, 53), 1);
+	protected positions = new Float32Array([-1, -1, 0, 1, -1, 0, 1, 1, 0, -1, -1, 0, 1, 1, 0, -1, 1, 0]);
+	protected uvs = new Float32Array([
+		0,
+		0, // bottom-left
+		1,
+		0, // bottom-right
+		1,
+		1, // top-right
+		0,
+		0, // bottom-left
+		1,
+		1, // top-right
+		0,
+		1, // top-left
+	]);
+	protected renderTarget = injectFBO(() => ({
+		width: this.size,
+		height: this.size,
+		settings: {
+			minFilter: THREE.NearestFilter,
+			magFilter: THREE.NearestFilter,
+			format: THREE.RGBAFormat,
+			stencilBuffer: false,
+			type: THREE.FloatType,
+		},
+	}));
+
+	protected particlePositions = (() => {
+		const length = this.size * this.size;
+		const particles = new Float32Array(length * 3);
+		for (let i = 0; i < length; i++) {
+			let i3 = i * 3;
+			particles[i3 + 0] = (i % this.size) / this.size;
+			particles[i3 + 1] = i / this.size / this.size;
+		}
+		return particles;
+	})();
+
+	protected uniforms: Record<string, THREE.IUniform> = {
+		uPositions: { value: null },
+	};
+
+	private simulationMaterialRef = viewChild<ElementRef<SimulationMaterial>>('simulationMaterial');
+
+	constructor() {
+		injectBeforeRender(({ gl, clock }) => {
+			gl.setRenderTarget(this.renderTarget());
+			gl.clear();
+			gl.render(this.virtualScene, this.virtualCamera);
+			gl.setRenderTarget(null);
+
+			const simulationMateria = this.simulationMaterialRef()?.nativeElement;
+
+			if (!simulationMateria) return;
+
+			this.uniforms['uPositions'].value = this.renderTarget().texture;
+			simulationMateria.uniforms['uTime'].value = clock.elapsedTime;
+		});
+	}
+}
+
+@Component({
+	selector: 'app-scene-graph',
+	template: `
+		<ngts-perspective-camera [options]="{ makeDefault: true, position: [1.5, 1.5, 2.5], fov: 75 }" />
+
+		<ngt-color *args="['#20222B']" attach="background" />
+		<ngt-ambient-light [intensity]="Math.PI * 0.5" />
+
+		<app-fbo-particles />
+
+		<ngts-orbit-controls [options]="{ autoRotate: true }" />
+	`,
+	imports: [NgtsPerspectiveCamera, NgtsOrbitControls, NgtArgs, FBOParticles],
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+export class SceneGraph {
+	protected readonly Math = Math;
+}

apps/examples/src/app/misc/particle-maxime/simulation-fragment.glsl

@@ -0,0 +1,151 @@
+uniform sampler2D positions;
+uniform float uTime;
+uniform float uFrequency;
+
+varying vec2 vUv;
+
+// Source: https://github.com/drcmda/glsl-curl-noise2
+// and: https://github.com/guoweish/glsl-noise-simplex/blob/master/3d.glsl
+
+//
+// Description : Array and textureless GLSL 2D/3D/4D simplex
+//               noise functions.
+//      Author : Ian McEwan, Ashima Arts.
+//  Maintainer : ijm
+//     Lastmod : 20110822 (ijm)
+//     License : Copyright (C) 2011 Ashima Arts. All rights reserved.
+//               Distributed under the MIT License. See LICENSE file.
+//               https://github.com/ashima/webgl-noise
+//
+
+vec3 mod289(vec3 x) {
+    return x - floor(x * (1.0 / 289.0)) * 289.0;
+}
+
+vec4 mod289(vec4 x) {
+    return x - floor(x * (1.0 / 289.0)) * 289.0;
+}
+
+vec4 permute(vec4 x) {
+    return mod289(((x * 34.0) + 1.0) * x);
+}
+
+vec4 taylorInvSqrt(vec4 r)
+{
+    return 1.79284291400159 - 0.85373472095314 * r;
+}
+
+float snoise(vec3 v)
+{
+    const vec2 C = vec2(1.0 / 6.0, 1.0 / 3.0);
+    const vec4 D = vec4(0.0, 0.5, 1.0, 2.0);
+
+    // First corner
+    vec3 i = floor(v + dot(v, C.yyy));
+    vec3 x0 = v - i + dot(i, C.xxx);
+
+    // Other corners
+    vec3 g = step(x0.yzx, x0.xyz);
+    vec3 l = 1.0 - g;
+    vec3 i1 = min(g.xyz, l.zxy);
+    vec3 i2 = max(g.xyz, l.zxy);
+
+    //   x0 = x0 - 0.0 + 0.0 * C.xxx;
+    //   x1 = x0 - i1  + 1.0 * C.xxx;
+    //   x2 = x0 - i2  + 2.0 * C.xxx;
+    //   x3 = x0 - 1.0 + 3.0 * C.xxx;
+    vec3 x1 = x0 - i1 + C.xxx;
+    vec3 x2 = x0 - i2 + C.yyy; // 2.0*C.x = 1/3 = C.y
+    vec3 x3 = x0 - D.yyy; // -1.0+3.0*C.x = -0.5 = -D.y
+
+    // Permutations
+    i = mod289(i);
+    vec4 p = permute(permute(permute(
+                    i.z + vec4(0.0, i1.z, i2.z, 1.0))
+                    + i.y + vec4(0.0, i1.y, i2.y, 1.0))
+                + i.x + vec4(0.0, i1.x, i2.x, 1.0));
+
+    // Gradients: 7x7 points over a square, mapped onto an octahedron.
+    // The ring size 17*17 = 289 is close to a multiple of 49 (49*6 = 294)
+    float n_ = 0.142857142857; // 1.0/7.0
+    vec3 ns = n_ * D.wyz - D.xzx;
+
+    vec4 j = p - 49.0 * floor(p * ns.z * ns.z); //  mod(p,7*7)
+
+    vec4 x_ = floor(j * ns.z);
+    vec4 y_ = floor(j - 7.0 * x_); // mod(j,N)
+
+    vec4 x = x_ * ns.x + ns.yyyy;
+    vec4 y = y_ * ns.x + ns.yyyy;
+    vec4 h = 1.0 - abs(x) - abs(y);
+
+    vec4 b0 = vec4(x.xy, y.xy);
+    vec4 b1 = vec4(x.zw, y.zw);
+
+    //vec4 s0 = vec4(lessThan(b0,0.0))*2.0 - 1.0;
+    //vec4 s1 = vec4(lessThan(b1,0.0))*2.0 - 1.0;
+    vec4 s0 = floor(b0) * 2.0 + 1.0;
+    vec4 s1 = floor(b1) * 2.0 + 1.0;
+    vec4 sh = -step(h, vec4(0.0));
+
+    vec4 a0 = b0.xzyw + s0.xzyw * sh.xxyy;
+    vec4 a1 = b1.xzyw + s1.xzyw * sh.zzww;
+
+    vec3 p0 = vec3(a0.xy, h.x);
+    vec3 p1 = vec3(a0.zw, h.y);
+    vec3 p2 = vec3(a1.xy, h.z);
+    vec3 p3 = vec3(a1.zw, h.w);
+
+    //Normalise gradients
+    vec4 norm = taylorInvSqrt(vec4(dot(p0, p0), dot(p1, p1), dot(p2, p2), dot(p3, p3)));
+    p0 *= norm.x;
+    p1 *= norm.y;
+    p2 *= norm.z;
+    p3 *= norm.w;
+
+    // Mix final noise value
+    vec4 m = max(0.6 - vec4(dot(x0, x0), dot(x1, x1), dot(x2, x2), dot(x3, x3)), 0.0);
+    m = m * m;
+    return 42.0 * dot(m * m, vec4(dot(p0, x0), dot(p1, x1),
+                dot(p2, x2), dot(p3, x3)));
+}
+
+vec3 snoiseVec3(vec3 x) {
+    float s = snoise(vec3(x));
+    float s1 = snoise(vec3(x.y - 19.1, x.z + 33.4, x.x + 47.2));
+    float s2 = snoise(vec3(x.z + 74.2, x.x - 124.5, x.y + 99.4));
+    vec3 c = vec3(s, s1, s2);
+    return c;
+}
+
+vec3 curlNoise(vec3 p) {
+    const float e = .1;
+    vec3 dx = vec3(e, 0.0, 0.0);
+    vec3 dy = vec3(0.0, e, 0.0);
+    vec3 dz = vec3(0.0, 0.0, e);
+
+    vec3 p_x0 = snoiseVec3(p - dx);
+    vec3 p_x1 = snoiseVec3(p + dx);
+    vec3 p_y0 = snoiseVec3(p - dy);
+    vec3 p_y1 = snoiseVec3(p + dy);
+    vec3 p_z0 = snoiseVec3(p - dz);
+    vec3 p_z1 = snoiseVec3(p + dz);
+
+    float x = p_y1.z - p_y0.z - p_z1.y + p_z0.y;
+    float y = p_z1.x - p_z0.x - p_x1.z + p_x0.z;
+    float z = p_x1.y - p_x0.y - p_y1.x + p_y0.x;
+
+    const float divisor = 1.0 / (2.0 * e);
+    return normalize(vec3(x, y, z) * divisor);
+}
+
+void main() {
+    vec3 pos = texture2D(positions, vUv).rgb;
+    vec3 curlPos = texture2D(positions, vUv).rgb;
+
+    pos = curlNoise(pos * uFrequency + uTime * 0.1);
+    curlPos = curlNoise(curlPos * uFrequency + uTime * 0.1);
+    curlPos += curlNoise(curlPos * uFrequency * 2.0) * 0.5;
+
+    gl_FragColor = vec4(mix(pos, curlPos, sin(uTime)), 1.0);
+}

apps/examples/src/app/misc/particle-maxime/simulation-material.ts

@@ -0,0 +1,51 @@
+import simulationFragmentShader from './simulation-fragment.glsl' with { loader: 'text' };
+import simulationVertexShader from './simulation-vertex.glsl' with { loader: 'text' };
+
+import * as THREE from 'three';
+
+function getRandomData(width: number, height: number) {
+	// we need to create a vec4 since we're passing the positions to the fragment shader
+	// data textures need to have 4 components, R, G, B, and A
+	const length = width * height * 4;
+	const data = new Float32Array(length);
+
+	for (let i = 0; i < length; i++) {
+		const stride = i * 4;
+
+		const distance = Math.sqrt(Math.random()) * 2.0;
+		const theta = THREE.MathUtils.randFloatSpread(360);
+		const phi = THREE.MathUtils.randFloatSpread(360);
+
+		data[stride] = distance * Math.sin(theta) * Math.cos(phi);
+		data[stride + 1] = distance * Math.sin(theta) * Math.sin(phi);
+		data[stride + 2] = distance * Math.cos(theta);
+		data[stride + 3] = 1.0; // this value will not have any impact
+	}
+
+	return data;
+}
+
+export class SimulationMaterial extends THREE.ShaderMaterial {
+	constructor(size: number) {
+		const positionsTexture = new THREE.DataTexture(
+			getRandomData(size, size),
+			size,
+			size,
+			THREE.RGBAFormat,
+			THREE.FloatType,
+		);
+		positionsTexture.needsUpdate = true;
+
+		const simulationUniforms = {
+			positions: { value: positionsTexture },
+			uFrequency: { value: 0.25 },
+			uTime: { value: 0 },
+		};
+
+		super({
+			uniforms: simulationUniforms,
+			vertexShader: simulationVertexShader,
+			fragmentShader: simulationFragmentShader,
+		});
+	}
+}