mirror of
https://github.com/Rezmason/matrix.git
synced 2026-04-14 12:29:30 -07:00
Implemented matrix particle logic in a GPUComputationRender system.
This commit is contained in:
Rezmason
@@ -1,134 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<body style="height: 100vh; margin: 0; overflow: hidden; position: fixed; padding: 0; width: 100vw;">
|
||||
<script src="./lib/three.js"></script>
|
||||
<script src="./js/GPUComputationRenderer.js"></script>
|
||||
<script>
|
||||
const WIDTH = 64;
|
||||
const NUM_TEXELS = WIDTH * WIDTH;
|
||||
const BOUNDS = 512;
|
||||
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 3000 );
|
||||
camera.position.set( 0, 200, 350 );
|
||||
camera.rotation.set(Math.PI * -0.25, 0, 0);
|
||||
const scene = new THREE.Scene();
|
||||
const renderer = new THREE.WebGLRenderer();
|
||||
renderer.setClearColor(new THREE.Color(1, 1, 1), 1);
|
||||
renderer.setPixelRatio( window.devicePixelRatio );
|
||||
renderer.setSize( window.innerWidth, window.innerHeight );
|
||||
document.body.appendChild( renderer.domElement );
|
||||
|
||||
const material = new THREE.MeshBasicMaterial( { map: null, flatShading: false, transparent:false } );
|
||||
const plane = new THREE.Mesh( new THREE.PlaneBufferGeometry( BOUNDS, BOUNDS ), material );
|
||||
plane.rotation.x = - Math.PI / 2;
|
||||
scene.add( plane );
|
||||
|
||||
// Creates the gpu computation class and sets it up
|
||||
const gpuCompute = new GPUComputationRenderer( WIDTH, WIDTH, renderer );
|
||||
const heightmap0 = gpuCompute.createTexture();
|
||||
const waterMaxHeight = 10;
|
||||
const pixels = heightmap0.image.data;
|
||||
let p = 0;
|
||||
for ( let j = 0; j < WIDTH; j++ ) {
|
||||
for ( let i = 0; i < WIDTH; i++ ) {
|
||||
pixels[ p + 0 ] = 0;
|
||||
pixels[ p + 1 ] = 0;
|
||||
pixels[ p + 2 ] = 0;
|
||||
pixels[ p + 3 ] = 1;
|
||||
p += 4;
|
||||
}
|
||||
}
|
||||
const heightmapVariable = gpuCompute.addVariable(
|
||||
"heightmap",
|
||||
`
|
||||
#include <common>
|
||||
uniform vec2 mousePos;
|
||||
uniform float mouseSize;
|
||||
uniform float viscosityConstant;
|
||||
#define deltaTime ( 1.0 / 60.0 )
|
||||
#define GRAVITY_CONSTANT ( resolution.x * deltaTime * 3.0 )
|
||||
void main() {
|
||||
vec2 cellSize = 1.0 / resolution.xy;
|
||||
vec2 uv = gl_FragCoord.xy * cellSize;
|
||||
// heightmapValue.x == height
|
||||
// heightmapValue.y == velocity
|
||||
// heightmapValue.z, heightmapValue.w not used
|
||||
vec4 heightmapValue = texture2D( heightmap, uv );
|
||||
// Get neighbours
|
||||
vec4 north = texture2D( heightmap, uv + vec2( 0.0, cellSize.y ) );
|
||||
vec4 south = texture2D( heightmap, uv + vec2( 0.0, - cellSize.y ) );
|
||||
vec4 east = texture2D( heightmap, uv + vec2( cellSize.x, 0.0 ) );
|
||||
vec4 west = texture2D( heightmap, uv + vec2( - cellSize.x, 0.0 ) );
|
||||
float sump = north.x + south.x + east.x + west.x - 4.0 * heightmapValue.x;
|
||||
float accel = sump * GRAVITY_CONSTANT;
|
||||
// Dynamics
|
||||
heightmapValue.y += accel;
|
||||
heightmapValue.x += heightmapValue.y * deltaTime;
|
||||
// Viscosity
|
||||
heightmapValue.x += sump * viscosityConstant;
|
||||
// Mouse influence
|
||||
float mousePhase = clamp( length( ( uv - vec2( 0.5 ) ) * BOUNDS - vec2( mousePos.x, - mousePos.y ) ) * PI / mouseSize, 0.0, PI );
|
||||
heightmapValue.x += cos( mousePhase ) + 1.0;
|
||||
gl_FragColor = heightmapValue;
|
||||
}
|
||||
`
|
||||
,
|
||||
heightmap0
|
||||
);
|
||||
gpuCompute.setVariableDependencies( heightmapVariable, [ heightmapVariable ] );
|
||||
heightmapVariable.material.uniforms.mousePos = { value: new THREE.Vector2( 10000, 10000 ) };
|
||||
heightmapVariable.material.uniforms.mouseSize = { value: 20.0 };
|
||||
heightmapVariable.material.uniforms.viscosityConstant = { value: 0.03 };
|
||||
heightmapVariable.material.defines.BOUNDS = BOUNDS.toFixed( 1 );
|
||||
const error = gpuCompute.init();
|
||||
if ( error !== null ) {
|
||||
console.error( error );
|
||||
}
|
||||
const smoothShader = gpuCompute.createShaderMaterial(
|
||||
`
|
||||
uniform sampler2D texture;
|
||||
void main() {
|
||||
vec2 cellSize = 1.0 / resolution.xy;
|
||||
vec2 uv = gl_FragCoord.xy * cellSize;
|
||||
// Computes the mean of texel and 4 neighbours
|
||||
vec4 textureValue = texture2D( texture, uv );
|
||||
textureValue += texture2D( texture, uv + vec2( 0.0, cellSize.y ) );
|
||||
textureValue += texture2D( texture, uv + vec2( 0.0, - cellSize.y ) );
|
||||
textureValue += texture2D( texture, uv + vec2( cellSize.x, 0.0 ) );
|
||||
textureValue += texture2D( texture, uv + vec2( - cellSize.x, 0.0 ) );
|
||||
textureValue /= 5.0;
|
||||
gl_FragColor = textureValue;
|
||||
}
|
||||
`,
|
||||
{ texture: { value: null } }
|
||||
);
|
||||
|
||||
const smoothWater = () => {
|
||||
const currentRenderTarget = gpuCompute.getCurrentRenderTarget( heightmapVariable );
|
||||
const alternateRenderTarget = gpuCompute.getAlternateRenderTarget( heightmapVariable );
|
||||
for ( const i = 0; i < 10; i++ ) {
|
||||
smoothShader.uniforms.texture.value = currentRenderTarget.texture;
|
||||
gpuCompute.doRenderTarget( smoothShader, alternateRenderTarget );
|
||||
smoothShader.uniforms.texture.value = alternateRenderTarget.texture;
|
||||
gpuCompute.doRenderTarget( smoothShader, currentRenderTarget );
|
||||
}
|
||||
}
|
||||
|
||||
setInterval(() => {
|
||||
heightmapVariable.material.uniforms.mousePos.value.set(
|
||||
(Math.random() - 0.5) * BOUNDS,
|
||||
(Math.random() - 0.5) * BOUNDS
|
||||
);
|
||||
}, 1000);
|
||||
|
||||
const animate = () => {
|
||||
requestAnimationFrame( animate );
|
||||
gpuCompute.compute(); // Do the gpu computation
|
||||
material.map = gpuCompute.getCurrentRenderTarget( heightmapVariable ).texture; // Get compute output in custom uniform
|
||||
renderer.render( scene, camera );
|
||||
heightmapVariable.material.uniforms.mousePos.value.set( 10000, 10000 );
|
||||
}
|
||||
|
||||
animate();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
163
gpgpu_matrix.html
Normal file
163
gpgpu_matrix.html
Normal file
@@ -0,0 +1,163 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<body style="height: 100vh; margin: 0; overflow: hidden; position: fixed; padding: 0; width: 100vw;">
|
||||
<script src="./lib/three.js"></script>
|
||||
<script src="./js/GPUComputationRenderer.js"></script>
|
||||
<script>
|
||||
const camera = new THREE.OrthographicCamera( -0.5, 0.5, 0.5, -0.5, 0.0001, 10000 );
|
||||
const scene = new THREE.Scene();
|
||||
const renderer = new THREE.WebGLRenderer();
|
||||
renderer.setClearColor(new THREE.Color(1, 1, 1), 1);
|
||||
renderer.setPixelRatio( window.devicePixelRatio );
|
||||
renderer.setSize( window.innerWidth, window.innerHeight );
|
||||
document.body.appendChild( renderer.domElement );
|
||||
|
||||
|
||||
|
||||
const NUM_ROWS = 80;
|
||||
|
||||
// Creates the gpu computation class and sets it up
|
||||
const gpuCompute = new GPUComputationRenderer( NUM_ROWS, NUM_ROWS, renderer );
|
||||
const glyphValue = gpuCompute.createTexture();
|
||||
// This is how one might initialize data
|
||||
|
||||
const pixels = glyphValue.image.data;
|
||||
for (let i = 0; i < NUM_ROWS * NUM_ROWS; i++) {
|
||||
pixels[i * 4 + 0] = Math.random();
|
||||
pixels[i * 4 + 1] = Math.random();
|
||||
pixels[i * 4 + 2] = 0;
|
||||
pixels[i * 4 + 3] = 0;
|
||||
}
|
||||
|
||||
const glyphVariable = gpuCompute.addVariable(
|
||||
"glyph",
|
||||
`
|
||||
// #include <common>
|
||||
#define PI 3.14159265359
|
||||
#define SQRT_2 1.4142135623730951
|
||||
#define SQRT_5 2.23606797749979
|
||||
uniform float now;
|
||||
uniform float delta;
|
||||
uniform float animationSpeed;
|
||||
uniform float fallSpeed;
|
||||
uniform float cycleSpeed;
|
||||
uniform float a;
|
||||
uniform float b;
|
||||
uniform float c;
|
||||
uniform float brightnessChangeBias;
|
||||
uniform float glyphSequenceLength;
|
||||
uniform float numGlyphRows;
|
||||
|
||||
highp float rand( const in vec2 uv ) {
|
||||
const highp float a = 12.9898, b = 78.233, c = 43758.5453;
|
||||
highp float dt = dot( uv.xy, vec2( a,b ) ), sn = mod( dt, PI );
|
||||
return fract(sin(sn) * c);
|
||||
}
|
||||
|
||||
void main() {
|
||||
|
||||
vec2 cellSize = 1.0 / resolution.xy;
|
||||
vec2 uv = (gl_FragCoord.xy) * cellSize;
|
||||
|
||||
float columnTimeOffset = rand(vec2(gl_FragCoord.x, 0.0));
|
||||
float columnSpeedOffset = rand(vec2(gl_FragCoord.x + 0.1, 0.0));
|
||||
|
||||
vec4 data = texture2D( glyph, uv );
|
||||
|
||||
float brightness = data.r;
|
||||
float cycle = data.g;
|
||||
|
||||
float simTime = now * 0.0005 * animationSpeed * fallSpeed;
|
||||
float columnTime = (columnTimeOffset * 1000.0 + simTime) * (0.5 + columnSpeedOffset * 0.5) + (sin(simTime * 2.0 * columnSpeedOffset) * 0.2);
|
||||
float glyphTime = gl_FragCoord.y * 0.01 + columnTime;
|
||||
|
||||
float value = 1.0 - fract((glyphTime + 0.3 * sin(SQRT_2 * glyphTime) + 0.2 * sin(SQRT_5 * glyphTime)));
|
||||
|
||||
float newBrightness = clamp(a + b * log(c * (value - 0.5)), 0.0, 1.0);
|
||||
|
||||
brightness = mix(brightness, newBrightness, brightnessChangeBias);
|
||||
|
||||
|
||||
float glyphCycleSpeed = delta * cycleSpeed * 0.2 * pow(1.0 - brightness, 4.0);
|
||||
cycle = fract(cycle + glyphCycleSpeed);
|
||||
float symbol = floor(glyphSequenceLength * cycle);
|
||||
float symbolX = mod(symbol, numGlyphRows);
|
||||
float symbolY = (numGlyphRows - 1.0 - (symbol - symbolX) / numGlyphRows);
|
||||
|
||||
gl_FragColor = vec4(0.5);
|
||||
gl_FragColor.r = brightness;
|
||||
gl_FragColor.g = cycle;
|
||||
gl_FragColor.b = symbolX / numGlyphRows;
|
||||
gl_FragColor.a = symbolY / numGlyphRows;
|
||||
}
|
||||
`
|
||||
,
|
||||
glyphValue
|
||||
);
|
||||
gpuCompute.setVariableDependencies( glyphVariable, [ glyphVariable ] );
|
||||
const animationSpeed = 1;
|
||||
const brightnessChangeBias = animationSpeed == 0 ? 1 : Math.min(1, Math.abs(animationSpeed));
|
||||
const glyphSequenceLength = 57;
|
||||
Object.assign(glyphVariable.material.uniforms, {
|
||||
now: { type: "f", value: 0 },
|
||||
delta: { type: "f", value: 0.01 },
|
||||
animationSpeed: { type: "f", value: animationSpeed },
|
||||
fallSpeed: { type: "f", value: 1 },
|
||||
cycleSpeed: {type: "f", value: 1 },
|
||||
glyphSequenceLength: { type: "f", value: glyphSequenceLength },
|
||||
numGlyphRows: {type: "f", value: 8},
|
||||
|
||||
a: { type: "f", value: 1.125 },
|
||||
b: { type: "f", value: 1.125 },
|
||||
c: { type: "f", value: 1.25 },
|
||||
brightnessChangeBias: { type: "f", value: brightnessChangeBias },
|
||||
});
|
||||
// This is how one might initialize a const
|
||||
/*
|
||||
Object.assign(glyphVariable.material.defines, {
|
||||
BOUNDS: BOUNDS.toFixed( 1 ),
|
||||
});
|
||||
*/
|
||||
|
||||
const error = gpuCompute.init();
|
||||
if ( error !== null ) {
|
||||
console.error( error );
|
||||
}
|
||||
|
||||
const plane = new THREE.Mesh(
|
||||
new THREE.PlaneBufferGeometry(),
|
||||
new THREE.MeshBasicMaterial({
|
||||
map: gpuCompute.getCurrentRenderTarget( glyphVariable ).texture
|
||||
// map: new THREE.TextureLoader().load( './matrixcode_msdf.png' )
|
||||
})
|
||||
);
|
||||
plane.geometry.computeVertexNormals();
|
||||
scene.add( plane );
|
||||
|
||||
const start = Date.now();
|
||||
let last = 0;
|
||||
|
||||
const animate = () => {
|
||||
requestAnimationFrame( animate );
|
||||
|
||||
const now = Date.now() - start;
|
||||
|
||||
if (now - last > 50) {
|
||||
last = now;
|
||||
return;
|
||||
}
|
||||
|
||||
const delta = ((now - last > 1000) ? 0 : now - last) / 1000 * animationSpeed;
|
||||
last = now;
|
||||
|
||||
glyphVariable.material.uniforms.now.value = now;
|
||||
glyphVariable.material.uniforms.delta.value = delta;
|
||||
|
||||
gpuCompute.compute(); // Do the gpu computation
|
||||
renderer.render( scene, camera );
|
||||
}
|
||||
|
||||
animate();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user