eric/matrix
1
0
Fork 0
mirror of https://github.com/Rezmason/matrix.git synced 2026-04-18 22:29:28 -07:00
Code Issues Packages Projects Releases Wiki Activity

Implemented matrix particle logic in a GPUComputationRender system.

Browse Source
This commit is contained in:
Rezmason
2018-09-05 03:46:02 -07:00
parent 515ee07b43
commit f954b1f8ab
2 changed files with 163 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files

134
gpgpu_example.html
View File

@@ -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
View 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>