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

Adding GPUComputationRenderer to project. Adding gpgpu_example HTML as a reference.

Browse Source
This commit is contained in:
Rezmason
2018-09-05 00:47:46 -07:00
parent 7bf43539c1
commit 515ee07b43
4 changed files with 520 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
TODO.txt
View File

@@ -11,6 +11,9 @@ Much later:
Dissolve threejs project into webgl project Dissolve threejs project into webgl project
Maybe webgl2 project? Maybe webgl2 project?
Deluxe Deluxe
Raindrop sound
https://youtu.be/KoQOKq1C3O4?t=30
https://youtu.be/h1vLZeVAp5o?t=28
Flashing row effect? Flashing row effect?
https://youtu.be/z_KmNZNT5xw?t=16 https://youtu.be/z_KmNZNT5xw?t=16
Square event? Square event?
@@ -18,3 +21,10 @@ Much later:
https://youtu.be/721sG2D_9-U?t=67 https://youtu.be/721sG2D_9-U?t=67
More patterns? More patterns?
Symbol duplication is common Symbol duplication is common
Also interesting:
The Matrix code for the Zion Control construct is sparser, slower, bluer, and annotated
https://www.youtube.com/watch?v=Jt5z3OEjDzU

134
gpgpu_example.html Normal file
View File

@@ -0,0 +1,134 @@
<!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>

9
index.html
View File

@@ -1,4 +1,10 @@
<html><body style="height: 100vh; margin: 0; overflow: hidden; position: fixed; padding: 0; width: 100vw;"> <html>
<head>
<title>Matrix digital rain</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body style="height: 100vh; margin: 0; overflow: hidden; position: fixed; padding: 0; width: 100vw;">
<script src="./lib/three.js"></script> <script src="./lib/three.js"></script>
<script src="./js/CopyShader.js"></script> <script src="./js/CopyShader.js"></script>
@@ -12,6 +18,7 @@
<script src="./js/LuminosityHighPassShader.js"></script> <script src="./js/LuminosityHighPassShader.js"></script>
<script src="./js/UnrealBloomPass.js"></script> <script src="./js/UnrealBloomPass.js"></script>
<script src="./js/ImageOverlayPass.js"></script> <script src="./js/ImageOverlayPass.js"></script>
<script src="./js/GPUComputationRenderer.js"></script>
<script src="./js/MatrixMaterial.js"></script> <script src="./js/MatrixMaterial.js"></script>
<script src="./js/MatrixGeometry.js"></script> <script src="./js/MatrixGeometry.js"></script>

368
js/GPUComputationRenderer.js Normal file
View File

@@ -0,0 +1,368 @@
/**
* @author yomboprime https://github.com/yomboprime
*
* GPUComputationRenderer, based on SimulationRenderer by zz85
*
* The GPUComputationRenderer uses the concept of variables. These variables are RGBA float textures that hold 4 floats
* for each compute element (texel)
*
* Each variable has a fragment shader that defines the computation made to obtain the variable in question.
* You can use as many variables you need, and make dependencies so you can use textures of other variables in the shader
* (the sampler uniforms are added automatically) Most of the variables will need themselves as dependency.
*
* The renderer has actually two render targets per variable, to make ping-pong. Textures from the current frame are used
* as inputs to render the textures of the next frame.
*
* The render targets of the variables can be used as input textures for your visualization shaders.
*
* Variable names should be valid identifiers and should not collide with THREE GLSL used identifiers.
* a common approach could be to use 'texture' prefixing the variable name; i.e texturePosition, textureVelocity...
*
* The size of the computation (sizeX * sizeY) is defined as 'resolution' automatically in the shader. For example:
* #DEFINE resolution vec2( 1024.0, 1024.0 )
*
* -------------
*
* Basic use:
*
* // Initialization...
*
* // Create computation renderer
* var gpuCompute = new GPUComputationRenderer( 1024, 1024, renderer );
*
* // Create initial state float textures
* var pos0 = gpuCompute.createTexture();
* var vel0 = gpuCompute.createTexture();
* // and fill in here the texture data...
*
* // Add texture variables
* var velVar = gpuCompute.addVariable( "textureVelocity", fragmentShaderVel, pos0 );
* var posVar = gpuCompute.addVariable( "texturePosition", fragmentShaderPos, vel0 );
*
* // Add variable dependencies
* gpuCompute.setVariableDependencies( velVar, [ velVar, posVar ] );
* gpuCompute.setVariableDependencies( posVar, [ velVar, posVar ] );
*
* // Add custom uniforms
* velVar.material.uniforms.time = { value: 0.0 };
*
* // Check for completeness
* var error = gpuCompute.init();
* if ( error !== null ) {
* console.error( error );
* }
*
*
* // In each frame...
*
* // Compute!
* gpuCompute.compute();
*
* // Update texture uniforms in your visualization materials with the gpu renderer output
* myMaterial.uniforms.myTexture.value = gpuCompute.getCurrentRenderTarget( posVar ).texture;
*
* // Do your rendering
* renderer.render( myScene, myCamera );
*
* -------------
*
* Also, you can use utility functions to create ShaderMaterial and perform computations (rendering between textures)
* Note that the shaders can have multiple input textures.
*
* var myFilter1 = gpuCompute.createShaderMaterial( myFilterFragmentShader1, { theTexture: { value: null } } );
* var myFilter2 = gpuCompute.createShaderMaterial( myFilterFragmentShader2, { theTexture: { value: null } } );
*
* var inputTexture = gpuCompute.createTexture();
*
* // Fill in here inputTexture...
*
* myFilter1.uniforms.theTexture.value = inputTexture;
*
* var myRenderTarget = gpuCompute.createRenderTarget();
* myFilter2.uniforms.theTexture.value = myRenderTarget.texture;
*
* var outputRenderTarget = gpuCompute.createRenderTarget();
*
* // Now use the output texture where you want:
* myMaterial.uniforms.map.value = outputRenderTarget.texture;
*
* // And compute each frame, before rendering to screen:
* gpuCompute.doRenderTarget( myFilter1, myRenderTarget );
* gpuCompute.doRenderTarget( myFilter2, outputRenderTarget );
*
*
*
* @param {int} sizeX Computation problem size is always 2d: sizeX * sizeY elements.
* @param {int} sizeY Computation problem size is always 2d: sizeX * sizeY elements.
* @param {WebGLRenderer} renderer The renderer
*/
function GPUComputationRenderer( sizeX, sizeY, renderer ) {
this.variables = [];
this.currentTextureIndex = 0;
var scene = new THREE.Scene();
var camera = new THREE.Camera();
camera.position.z = 1;
var passThruUniforms = {
texture: { value: null }
};
var passThruShader = createShaderMaterial( getPassThroughFragmentShader(), passThruUniforms );
var mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2, 2 ), passThruShader );
scene.add( mesh );
this.addVariable = function( variableName, computeFragmentShader, initialValueTexture ) {
var material = this.createShaderMaterial( computeFragmentShader );
var variable = {
name: variableName,
initialValueTexture: initialValueTexture,
material: material,
dependencies: null,
renderTargets: [],
wrapS: null,
wrapT: null,
minFilter: THREE.NearestFilter,
magFilter: THREE.NearestFilter
};
this.variables.push( variable );
return variable;
};
this.setVariableDependencies = function( variable, dependencies ) {
variable.dependencies = dependencies;
};
this.init = function() {
if ( ! renderer.extensions.get( "OES_texture_float" ) ) {
return "No OES_texture_float support for float textures.";
}
if ( renderer.capabilities.maxVertexTextures === 0 ) {
return "No support for vertex shader textures.";
}
for ( var i = 0; i < this.variables.length; i++ ) {
var variable = this.variables[ i ];
// Creates rendertargets and initialize them with input texture
variable.renderTargets[ 0 ] = this.createRenderTarget( sizeX, sizeY, variable.wrapS, variable.wrapT, variable.minFilter, variable.magFilter );
variable.renderTargets[ 1 ] = this.createRenderTarget( sizeX, sizeY, variable.wrapS, variable.wrapT, variable.minFilter, variable.magFilter );
this.renderTexture( variable.initialValueTexture, variable.renderTargets[ 0 ] );
this.renderTexture( variable.initialValueTexture, variable.renderTargets[ 1 ] );
// Adds dependencies uniforms to the ShaderMaterial
var material = variable.material;
var uniforms = material.uniforms;
if ( variable.dependencies !== null ) {
for ( var d = 0; d < variable.dependencies.length; d++ ) {
var depVar = variable.dependencies[ d ];
if ( depVar.name !== variable.name ) {
// Checks if variable exists
var found = false;
for ( var j = 0; j < this.variables.length; j++ ) {
if ( depVar.name === this.variables[ j ].name ) {
found = true;
break;
}
}
if ( ! found ) {
return "Variable dependency not found. Variable=" + variable.name + ", dependency=" + depVar.name;
}
}
uniforms[ depVar.name ] = { value: null };
material.fragmentShader = "\nuniform sampler2D " + depVar.name + ";\n" + material.fragmentShader;
}
}
}
this.currentTextureIndex = 0;
return null;
};
this.compute = function() {
var currentTextureIndex = this.currentTextureIndex;
var nextTextureIndex = this.currentTextureIndex === 0 ? 1 : 0;
for ( var i = 0, il = this.variables.length; i < il; i++ ) {
var variable = this.variables[ i ];
// Sets texture dependencies uniforms
if ( variable.dependencies !== null ) {
var uniforms = variable.material.uniforms;
for ( var d = 0, dl = variable.dependencies.length; d < dl; d++ ) {
var depVar = variable.dependencies[ d ];
uniforms[ depVar.name ].value = depVar.renderTargets[ currentTextureIndex ].texture;
}
}
// Performs the computation for this variable
this.doRenderTarget( variable.material, variable.renderTargets[ nextTextureIndex ] );
}
this.currentTextureIndex = nextTextureIndex;
};
this.getCurrentRenderTarget = function( variable ) {
return variable.renderTargets[ this.currentTextureIndex ];
};
this.getAlternateRenderTarget = function( variable ) {
return variable.renderTargets[ this.currentTextureIndex === 0 ? 1 : 0 ];
};
function addResolutionDefine( materialShader ) {
materialShader.defines.resolution = 'vec2( ' + sizeX.toFixed( 1 ) + ', ' + sizeY.toFixed( 1 ) + " )";
}
this.addResolutionDefine = addResolutionDefine;
// The following functions can be used to compute things manually
function createShaderMaterial( computeFragmentShader, uniforms ) {
uniforms = uniforms || {};
var material = new THREE.ShaderMaterial( {
uniforms: uniforms,
vertexShader: getPassThroughVertexShader(),
fragmentShader: computeFragmentShader
} );
addResolutionDefine( material );
return material;
}
this.createShaderMaterial = createShaderMaterial;
this.createRenderTarget = function( sizeXTexture, sizeYTexture, wrapS, wrapT, minFilter, magFilter ) {
sizeXTexture = sizeXTexture || sizeX;
sizeYTexture = sizeYTexture || sizeY;
wrapS = wrapS || THREE.ClampToEdgeWrapping;
wrapT = wrapT || THREE.ClampToEdgeWrapping;
minFilter = minFilter || THREE.NearestFilter;
magFilter = magFilter || THREE.NearestFilter;
var renderTarget = new THREE.WebGLRenderTarget( sizeXTexture, sizeYTexture, {
wrapS: wrapS,
wrapT: wrapT,
minFilter: minFilter,
magFilter: magFilter,
format: THREE.RGBAFormat,
type: ( /(iPad|iPhone|iPod)/g.test( navigator.userAgent ) ) ? THREE.HalfFloatType : THREE.FloatType,
stencilBuffer: false,
depthBuffer: false
} );
return renderTarget;
};
this.createTexture = function() {
var a = new Float32Array( sizeX * sizeY * 4 );
var texture = new THREE.DataTexture( a, sizeX, sizeY, THREE.RGBAFormat, THREE.FloatType );
texture.needsUpdate = true;
return texture;
};
this.renderTexture = function( input, output ) {
// Takes a texture, and render out in rendertarget
// input = Texture
// output = RenderTarget
passThruUniforms.texture.value = input;
this.doRenderTarget( passThruShader, output);
passThruUniforms.texture.value = null;
};
this.doRenderTarget = function( material, output ) {
mesh.material = material;
renderer.render( scene, camera, output );
mesh.material = passThruShader;
};
// Shaders
function getPassThroughVertexShader() {
return "void main() {\n" +
"\n" +
" gl_Position = vec4( position, 1.0 );\n" +
"\n" +
"}\n";
}
function getPassThroughFragmentShader() {
return "uniform sampler2D texture;\n" +
"\n" +
"void main() {\n" +
"\n" +
" vec2 uv = gl_FragCoord.xy / resolution.xy;\n" +
"\n" +
" gl_FragColor = texture2D( texture, uv );\n" +
"\n" +
"}\n";
}
}