From 4e9fe308ffd9d7babcb2f826d0b8ec75c920bd01 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bj=C3=B8rn=20Gunnar=20Staal?= Date: Sat, 21 Sep 2024 18:24:00 +0200 Subject: [PATCH] finished simulation --- GPUComputationRenderer.js | 347 +++++++++++++++++++++++++++++++++++ computeShaders.js | 136 ++++++++++++++ glslNoise.js | 376 ++++++++++++++++++++++++++++++++++++++ glslUtils.js | 113 ++++++++++++ main.js | 58 ++++-- materials.js | 93 ++++++++++ 6 files changed, 1112 insertions(+), 11 deletions(-) create mode 100644 GPUComputationRenderer.js create mode 100644 computeShaders.js create mode 100644 glslNoise.js create mode 100644 glslUtils.js create mode 100644 materials.js diff --git a/GPUComputationRenderer.js b/GPUComputationRenderer.js new file mode 100644 index 0000000..e323584 --- /dev/null +++ b/GPUComputationRenderer.js @@ -0,0 +1,347 @@ +/** + * 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 + * const gpuCompute = new GPUComputationRenderer( 1024, 1024, renderer ); + * + * // Create initial state float textures + * const pos0 = gpuCompute.createTexture(); + * const vel0 = gpuCompute.createTexture(); + * // and fill in here the texture data... + * + * // Add texture variables + * const velVar = gpuCompute.addVariable( "textureVelocity", fragmentShaderVel, pos0 ); + * const 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 + * const 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 THREE.ShaderMaterial and perform computations (rendering between textures) + * Note that the shaders can have multiple input textures. + * + * const myFilter1 = gpuCompute.createShaderMaterial( myFilterFragmentShader1, { theTexture: { value: null } } ); + * const myFilter2 = gpuCompute.createShaderMaterial( myFilterFragmentShader2, { theTexture: { value: null } } ); + * + * const inputTexture = gpuCompute.createTexture(); + * + * // Fill in here inputTexture... + * + * myFilter1.uniforms.theTexture.value = inputTexture; + * + * const myRenderTarget = gpuCompute.createRenderTarget(); + * myFilter2.uniforms.theTexture.value = myRenderTarget.texture; + * + * const 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 + */ + +class GPUComputationRenderer { + + constructor( sizeX, sizeY, renderer ) { + + this.variables = []; + this.currentTextureIndex = 0; + let dataType = THREE.FloatType; + const scene = new THREE.Scene(); + const camera = new THREE.Camera(); + camera.position.z = 1; + const passThruUniforms = { + passThruTexture: { + value: null + } + }; + const passThruShader = createShaderMaterial( getPassThroughFragmentShader(), passThruUniforms ); + const mesh = new THREE.Mesh( new THREE.PlaneGeometry( 2, 2 ), passThruShader ); + scene.add( mesh ); + + this.setDataType = function ( type ) { + + dataType = type; + return this; + + }; + + this.addVariable = function ( variableName, computeFragmentShader, initialValueTexture ) { + + const material = this.createShaderMaterial( computeFragmentShader ); + const 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.capabilities.isWebGL2 === false && renderer.extensions.has( 'OES_texture_float' ) === false ) { + return 'No OES_texture_float support for float textures.'; + + } + + if ( renderer.capabilities.maxVertexTextures === 0 ) { + return 'No support for vertex shader textures.'; + + } + + for ( let i = 0; i < this.variables.length; i ++ ) { + + const 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 THREE.ShaderMaterial + + const material = variable.material; + const uniforms = material.uniforms; + + if ( variable.dependencies !== null ) { + + for ( let d = 0; d < variable.dependencies.length; d ++ ) { + + const depVar = variable.dependencies[ d ]; + + if ( depVar.name !== variable.name ) { + + // Checks if variable exists + let found = false; + + for ( let 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 () { + + const currentTextureIndex = this.currentTextureIndex; + const nextTextureIndex = this.currentTextureIndex === 0 ? 1 : 0; + + for ( let i = 0, il = this.variables.length; i < il; i ++ ) { + + const variable = this.variables[ i ]; // Sets texture dependencies uniforms + + if ( variable.dependencies !== null ) { + + const uniforms = variable.material.uniforms; + + for ( let d = 0, dl = variable.dependencies.length; d < dl; d ++ ) { + + const 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 || {}; + const 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; + const renderTarget = new THREE.WebGLRenderTarget( sizeXTexture, sizeYTexture, { + wrapS: wrapS, + wrapT: wrapT, + minFilter: minFilter, + magFilter: magFilter, + format: THREE.RGBAFormat, + type: dataType, + depthBuffer: false + } ); + return renderTarget; + + }; + + this.createTexture = function () { + + const data = new Float32Array( sizeX * sizeY * 4 ); + return new THREE.DataTexture( data, sizeX, sizeY, THREE.RGBAFormat, THREE.FloatType ); + + }; + + this.renderTexture = function ( input, output ) { + + // Takes a texture, and render out in rendertarget + // input = Texture + // output = RenderTarget + passThruUniforms.passThruTexture.value = input; + this.doRenderTarget( passThruShader, output ); + passThruUniforms.passThruTexture.value = null; + + }; + + this.doRenderTarget = function ( material, output ) { + + const currentRenderTarget = renderer.getRenderTarget(); + mesh.material = material; + renderer.setRenderTarget( output ); + renderer.render( scene, camera ); + mesh.material = passThruShader; + renderer.setRenderTarget( currentRenderTarget ); + }; // Shaders + + + function getPassThroughVertexShader() { + + return 'void main() {\n' + '\n' + ' gl_Position = vec4( position, 1.0 );\n' + '\n' + '}\n'; + + } + + function getPassThroughFragmentShader() { + + return 'uniform sampler2D passThruTexture;\n' + '\n' + 'void main() {\n' + '\n' + ' vec2 uv = gl_FragCoord.xy / resolution.xy;\n' + '\n' + ' gl_FragColor = texture2D( passThruTexture, uv );\n' + '\n' + '}\n'; + } + } +} + +export default GPUComputationRenderer; \ No newline at end of file diff --git a/computeShaders.js b/computeShaders.js new file mode 100644 index 0000000..414e4d3 --- /dev/null +++ b/computeShaders.js @@ -0,0 +1,136 @@ +import {hash12, cnoise4} from './glslNoise.js'; +import {PI} from './glslUtils.js'; + +function createPosTargetShader () +{ + return ` + ${PI} + ${hash12} + + uniform float time; + + void main () + { + float nPoints = resolution.x * resolution.y; + float i = (gl_FragCoord.y * resolution.x) + gl_FragCoord.x; + vec2 uv = gl_FragCoord.xy / resolution.xy; + + vec3 pos = vec3(0.0); + float angle = (i / nPoints) * PI * 2.0; + float rad = sin(time * 0.0001) * 200.0; + rad = 80.0 + hash12(vec2(i * 0.123, i * 3.453)) * 80.0; + pos.x = cos(angle) * rad; + pos.y = sin(angle) * rad; + pos.z = 0.0; + + gl_FragColor = vec4(pos, 1.0); + } + `; +} + +function createAccShader () +{ + return ` + ${PI} + ${cnoise4} + ${hash12} + + uniform float time; + + void main () + { + float nPoints = resolution.x * resolution.y; + float i = (gl_FragCoord.y * resolution.x) + gl_FragCoord.x; + vec2 uv = gl_FragCoord.xy / resolution.xy; + + vec3 a = vec3(0.0); + vec4 p = texture2D(pos, uv); + vec4 tar = texture2D(posTarget, uv); + + vec3 turb; + float t = time * 0.0001; + float n = hash12(uv * 0.02 + i); + float s = .2; + + turb.x = cnoise(vec4(p.xyz * 0.006 + n * 35.4, t)); + turb.y = cnoise(vec4(p.xyz * 0.007 + n * 32.3, t)); + turb.z = cnoise(vec4(p.xyz * 0.006 + n * 43.3, t)); + turb *= pow(cnoise(vec4(p.xyz * 0.01, time * 0.0003)), 3.0) * s * 20.0; + a += turb; + + + vec3 back = tar.xyz - p.xyz; + //back *= 0.001; + back *= ((1.0 + pow(cnoise(vec4(tar.xyz * 0.002, time * 0.0001) ), 1.0)) / 2.0) * 0.003; + a += back; + + + + vec3 collect; + collect = p.xyz * -.0003; + + //a += collect; + + gl_FragColor = vec4(a, 1.0); + } + `; +} + +function createVelShader () +{ + return ` + + ${PI} + + uniform float time; + + void main () + { + float nPoints = resolution.x * resolution.y; + float i = (gl_FragCoord.y * resolution.x) + gl_FragCoord.x; + vec2 uv = gl_FragCoord.xy / resolution.xy; + + vec4 a = texture2D(acc, uv); + vec4 v = texture2D(vel, uv); + v += a; + v *= .97; + + gl_FragColor = vec4(v.xyz, 1.0); + } + `; +} + +function createPosShader () +{ + return ` + + ${PI} + + uniform float time; + uniform int frame; + + void main () + { + float nPoints = resolution.x * resolution.y; + float i = (gl_FragCoord.y * resolution.x) + gl_FragCoord.x; + vec2 uv = gl_FragCoord.xy / resolution.xy; + + vec4 p; + + if (frame < 2) + { + p = texture2D(posTarget, uv); + } + else + { + p = texture2D(pos, uv); + p += texture2D(vel, uv); + } + + gl_FragColor = vec4(p.xyz, 1.0); + } + `; +} + + +export {createPosTargetShader, createAccShader, createVelShader, createPosShader}; \ No newline at end of file diff --git a/glslNoise.js b/glslNoise.js new file mode 100644 index 0000000..9ab6923 --- /dev/null +++ b/glslNoise.js @@ -0,0 +1,376 @@ +let permute = 'vec4 permute(vec4 x){return mod(((x*34.0)+1.0)*x, 289.0);}'; + +// Classic Perlin 2D Noise +// by Stefan Gustavson +// +let cnoise2 = ` +${permute} +vec2 fade(vec2 t) {return t*t*t*(t*(t*6.0-15.0)+10.0);} + +float cnoise(vec2 P){ + vec4 Pi = floor(P.xyxy) + vec4(0.0, 0.0, 1.0, 1.0); + vec4 Pf = fract(P.xyxy) - vec4(0.0, 0.0, 1.0, 1.0); + Pi = mod(Pi, 289.0); // To avoid truncation effects in permutation + vec4 ix = Pi.xzxz; + vec4 iy = Pi.yyww; + vec4 fx = Pf.xzxz; + vec4 fy = Pf.yyww; + vec4 i = permute(permute(ix) + iy); + vec4 gx = 2.0 * fract(i * 0.0243902439) - 1.0; // 1/41 = 0.024... + vec4 gy = abs(gx) - 0.5; + vec4 tx = floor(gx + 0.5); + gx = gx - tx; + vec2 g00 = vec2(gx.x,gy.x); + vec2 g10 = vec2(gx.y,gy.y); + vec2 g01 = vec2(gx.z,gy.z); + vec2 g11 = vec2(gx.w,gy.w); + vec4 norm = 1.79284291400159 - 0.85373472095314 * + vec4(dot(g00, g00), dot(g01, g01), dot(g10, g10), dot(g11, g11)); + g00 *= norm.x; + g01 *= norm.y; + g10 *= norm.z; + g11 *= norm.w; + float n00 = dot(g00, vec2(fx.x, fy.x)); + float n10 = dot(g10, vec2(fx.y, fy.y)); + float n01 = dot(g01, vec2(fx.z, fy.z)); + float n11 = dot(g11, vec2(fx.w, fy.w)); + vec2 fade_xy = fade(Pf.xy); + vec2 n_x = mix(vec2(n00, n01), vec2(n10, n11), fade_xy.x); + float n_xy = mix(n_x.x, n_x.y, fade_xy.y); + return 2.3 * n_xy; +} +`; + +// Classic Perlin 3D Noise +// by Stefan Gustavson +// + +let cnoise3 = ` +${permute} +vec4 taylorInvSqrt(vec4 r){return 1.79284291400159 - 0.85373472095314 * r;} +vec3 fade(vec3 t) {return t*t*t*(t*(t*6.0-15.0)+10.0);} + +float cnoise(vec3 P){ + vec3 Pi0 = floor(P); // Integer part for indexing + vec3 Pi1 = Pi0 + vec3(1.0); // Integer part + 1 + Pi0 = mod(Pi0, 289.0); + Pi1 = mod(Pi1, 289.0); + vec3 Pf0 = fract(P); // Fractional part for interpolation + vec3 Pf1 = Pf0 - vec3(1.0); // Fractional part - 1.0 + vec4 ix = vec4(Pi0.x, Pi1.x, Pi0.x, Pi1.x); + vec4 iy = vec4(Pi0.yy, Pi1.yy); + vec4 iz0 = Pi0.zzzz; + vec4 iz1 = Pi1.zzzz; + + vec4 ixy = permute(permute(ix) + iy); + vec4 ixy0 = permute(ixy + iz0); + vec4 ixy1 = permute(ixy + iz1); + + vec4 gx0 = ixy0 / 7.0; + vec4 gy0 = fract(floor(gx0) / 7.0) - 0.5; + gx0 = fract(gx0); + vec4 gz0 = vec4(0.5) - abs(gx0) - abs(gy0); + vec4 sz0 = step(gz0, vec4(0.0)); + gx0 -= sz0 * (step(0.0, gx0) - 0.5); + gy0 -= sz0 * (step(0.0, gy0) - 0.5); + + vec4 gx1 = ixy1 / 7.0; + vec4 gy1 = fract(floor(gx1) / 7.0) - 0.5; + gx1 = fract(gx1); + vec4 gz1 = vec4(0.5) - abs(gx1) - abs(gy1); + vec4 sz1 = step(gz1, vec4(0.0)); + gx1 -= sz1 * (step(0.0, gx1) - 0.5); + gy1 -= sz1 * (step(0.0, gy1) - 0.5); + + vec3 g000 = vec3(gx0.x,gy0.x,gz0.x); + vec3 g100 = vec3(gx0.y,gy0.y,gz0.y); + vec3 g010 = vec3(gx0.z,gy0.z,gz0.z); + vec3 g110 = vec3(gx0.w,gy0.w,gz0.w); + vec3 g001 = vec3(gx1.x,gy1.x,gz1.x); + vec3 g101 = vec3(gx1.y,gy1.y,gz1.y); + vec3 g011 = vec3(gx1.z,gy1.z,gz1.z); + vec3 g111 = vec3(gx1.w,gy1.w,gz1.w); + + vec4 norm0 = taylorInvSqrt(vec4(dot(g000, g000), dot(g010, g010), dot(g100, g100), dot(g110, g110))); + g000 *= norm0.x; + g010 *= norm0.y; + g100 *= norm0.z; + g110 *= norm0.w; + vec4 norm1 = taylorInvSqrt(vec4(dot(g001, g001), dot(g011, g011), dot(g101, g101), dot(g111, g111))); + g001 *= norm1.x; + g011 *= norm1.y; + g101 *= norm1.z; + g111 *= norm1.w; + + float n000 = dot(g000, Pf0); + float n100 = dot(g100, vec3(Pf1.x, Pf0.yz)); + float n010 = dot(g010, vec3(Pf0.x, Pf1.y, Pf0.z)); + float n110 = dot(g110, vec3(Pf1.xy, Pf0.z)); + float n001 = dot(g001, vec3(Pf0.xy, Pf1.z)); + float n101 = dot(g101, vec3(Pf1.x, Pf0.y, Pf1.z)); + float n011 = dot(g011, vec3(Pf0.x, Pf1.yz)); + float n111 = dot(g111, Pf1); + + vec3 fade_xyz = fade(Pf0); + vec4 n_z = mix(vec4(n000, n100, n010, n110), vec4(n001, n101, n011, n111), fade_xyz.z); + vec2 n_yz = mix(n_z.xy, n_z.zw, fade_xyz.y); + float n_xyz = mix(n_yz.x, n_yz.y, fade_xyz.x); + return 2.2 * n_xyz; +}`; + + +let cnoise4 = ` +vec4 permute(vec4 x){return mod(((x*34.0)+1.0)*x, 289.0);} +vec4 taylorInvSqrt(vec4 r){return 1.79284291400159 - 0.85373472095314 * r;} +vec4 fade(vec4 t) {return t*t*t*(t*(t*6.0-15.0)+10.0);} + +float cnoise(vec4 P){ + vec4 Pi0 = floor(P); // Integer part for indexing + vec4 Pi1 = Pi0 + 1.0; // Integer part + 1 + Pi0 = mod(Pi0, 289.0); + Pi1 = mod(Pi1, 289.0); + vec4 Pf0 = fract(P); // Fractional part for interpolation + vec4 Pf1 = Pf0 - 1.0; // Fractional part - 1.0 + vec4 ix = vec4(Pi0.x, Pi1.x, Pi0.x, Pi1.x); + vec4 iy = vec4(Pi0.yy, Pi1.yy); + vec4 iz0 = vec4(Pi0.zzzz); + vec4 iz1 = vec4(Pi1.zzzz); + vec4 iw0 = vec4(Pi0.wwww); + vec4 iw1 = vec4(Pi1.wwww); + + vec4 ixy = permute(permute(ix) + iy); + vec4 ixy0 = permute(ixy + iz0); + vec4 ixy1 = permute(ixy + iz1); + vec4 ixy00 = permute(ixy0 + iw0); + vec4 ixy01 = permute(ixy0 + iw1); + vec4 ixy10 = permute(ixy1 + iw0); + vec4 ixy11 = permute(ixy1 + iw1); + + vec4 gx00 = ixy00 / 7.0; + vec4 gy00 = floor(gx00) / 7.0; + vec4 gz00 = floor(gy00) / 6.0; + gx00 = fract(gx00) - 0.5; + gy00 = fract(gy00) - 0.5; + gz00 = fract(gz00) - 0.5; + vec4 gw00 = vec4(0.75) - abs(gx00) - abs(gy00) - abs(gz00); + vec4 sw00 = step(gw00, vec4(0.0)); + gx00 -= sw00 * (step(0.0, gx00) - 0.5); + gy00 -= sw00 * (step(0.0, gy00) - 0.5); + + vec4 gx01 = ixy01 / 7.0; + vec4 gy01 = floor(gx01) / 7.0; + vec4 gz01 = floor(gy01) / 6.0; + gx01 = fract(gx01) - 0.5; + gy01 = fract(gy01) - 0.5; + gz01 = fract(gz01) - 0.5; + vec4 gw01 = vec4(0.75) - abs(gx01) - abs(gy01) - abs(gz01); + vec4 sw01 = step(gw01, vec4(0.0)); + gx01 -= sw01 * (step(0.0, gx01) - 0.5); + gy01 -= sw01 * (step(0.0, gy01) - 0.5); + + vec4 gx10 = ixy10 / 7.0; + vec4 gy10 = floor(gx10) / 7.0; + vec4 gz10 = floor(gy10) / 6.0; + gx10 = fract(gx10) - 0.5; + gy10 = fract(gy10) - 0.5; + gz10 = fract(gz10) - 0.5; + vec4 gw10 = vec4(0.75) - abs(gx10) - abs(gy10) - abs(gz10); + vec4 sw10 = step(gw10, vec4(0.0)); + gx10 -= sw10 * (step(0.0, gx10) - 0.5); + gy10 -= sw10 * (step(0.0, gy10) - 0.5); + + vec4 gx11 = ixy11 / 7.0; + vec4 gy11 = floor(gx11) / 7.0; + vec4 gz11 = floor(gy11) / 6.0; + gx11 = fract(gx11) - 0.5; + gy11 = fract(gy11) - 0.5; + gz11 = fract(gz11) - 0.5; + vec4 gw11 = vec4(0.75) - abs(gx11) - abs(gy11) - abs(gz11); + vec4 sw11 = step(gw11, vec4(0.0)); + gx11 -= sw11 * (step(0.0, gx11) - 0.5); + gy11 -= sw11 * (step(0.0, gy11) - 0.5); + + vec4 g0000 = vec4(gx00.x,gy00.x,gz00.x,gw00.x); + vec4 g1000 = vec4(gx00.y,gy00.y,gz00.y,gw00.y); + vec4 g0100 = vec4(gx00.z,gy00.z,gz00.z,gw00.z); + vec4 g1100 = vec4(gx00.w,gy00.w,gz00.w,gw00.w); + vec4 g0010 = vec4(gx10.x,gy10.x,gz10.x,gw10.x); + vec4 g1010 = vec4(gx10.y,gy10.y,gz10.y,gw10.y); + vec4 g0110 = vec4(gx10.z,gy10.z,gz10.z,gw10.z); + vec4 g1110 = vec4(gx10.w,gy10.w,gz10.w,gw10.w); + vec4 g0001 = vec4(gx01.x,gy01.x,gz01.x,gw01.x); + vec4 g1001 = vec4(gx01.y,gy01.y,gz01.y,gw01.y); + vec4 g0101 = vec4(gx01.z,gy01.z,gz01.z,gw01.z); + vec4 g1101 = vec4(gx01.w,gy01.w,gz01.w,gw01.w); + vec4 g0011 = vec4(gx11.x,gy11.x,gz11.x,gw11.x); + vec4 g1011 = vec4(gx11.y,gy11.y,gz11.y,gw11.y); + vec4 g0111 = vec4(gx11.z,gy11.z,gz11.z,gw11.z); + vec4 g1111 = vec4(gx11.w,gy11.w,gz11.w,gw11.w); + + vec4 norm00 = taylorInvSqrt(vec4(dot(g0000, g0000), dot(g0100, g0100), dot(g1000, g1000), dot(g1100, g1100))); + g0000 *= norm00.x; + g0100 *= norm00.y; + g1000 *= norm00.z; + g1100 *= norm00.w; + + vec4 norm01 = taylorInvSqrt(vec4(dot(g0001, g0001), dot(g0101, g0101), dot(g1001, g1001), dot(g1101, g1101))); + g0001 *= norm01.x; + g0101 *= norm01.y; + g1001 *= norm01.z; + g1101 *= norm01.w; + + vec4 norm10 = taylorInvSqrt(vec4(dot(g0010, g0010), dot(g0110, g0110), dot(g1010, g1010), dot(g1110, g1110))); + g0010 *= norm10.x; + g0110 *= norm10.y; + g1010 *= norm10.z; + g1110 *= norm10.w; + + vec4 norm11 = taylorInvSqrt(vec4(dot(g0011, g0011), dot(g0111, g0111), dot(g1011, g1011), dot(g1111, g1111))); + g0011 *= norm11.x; + g0111 *= norm11.y; + g1011 *= norm11.z; + g1111 *= norm11.w; + + float n0000 = dot(g0000, Pf0); + float n1000 = dot(g1000, vec4(Pf1.x, Pf0.yzw)); + float n0100 = dot(g0100, vec4(Pf0.x, Pf1.y, Pf0.zw)); + float n1100 = dot(g1100, vec4(Pf1.xy, Pf0.zw)); + float n0010 = dot(g0010, vec4(Pf0.xy, Pf1.z, Pf0.w)); + float n1010 = dot(g1010, vec4(Pf1.x, Pf0.y, Pf1.z, Pf0.w)); + float n0110 = dot(g0110, vec4(Pf0.x, Pf1.yz, Pf0.w)); + float n1110 = dot(g1110, vec4(Pf1.xyz, Pf0.w)); + float n0001 = dot(g0001, vec4(Pf0.xyz, Pf1.w)); + float n1001 = dot(g1001, vec4(Pf1.x, Pf0.yz, Pf1.w)); + float n0101 = dot(g0101, vec4(Pf0.x, Pf1.y, Pf0.z, Pf1.w)); + float n1101 = dot(g1101, vec4(Pf1.xy, Pf0.z, Pf1.w)); + float n0011 = dot(g0011, vec4(Pf0.xy, Pf1.zw)); + float n1011 = dot(g1011, vec4(Pf1.x, Pf0.y, Pf1.zw)); + float n0111 = dot(g0111, vec4(Pf0.x, Pf1.yzw)); + float n1111 = dot(g1111, Pf1); + + vec4 fade_xyzw = fade(Pf0); + vec4 n_0w = mix(vec4(n0000, n1000, n0100, n1100), vec4(n0001, n1001, n0101, n1101), fade_xyzw.w); + vec4 n_1w = mix(vec4(n0010, n1010, n0110, n1110), vec4(n0011, n1011, n0111, n1111), fade_xyzw.w); + vec4 n_zw = mix(n_0w, n_1w, fade_xyzw.z); + vec2 n_yzw = mix(n_zw.xy, n_zw.zw, fade_xyzw.y); + float n_xyzw = mix(n_yzw.x, n_yzw.y, fade_xyzw.x); + return 2.2 * n_xyzw; +}`; + +let fbm3 = ` + float fbm(vec3 x, int numOctaves) { + float v = 0.0; + float a = 0.5; + vec3 shift = vec3(100); + for (int i = 0; i < numOctaves; ++i) { + v += a * cnoise(x); + x = x * 2.0 + shift; + a *= 0.5; + } + return v; +} +` + +let fbm4 = ` + float fbm(vec4 x, int numOctaves) { + float v = 0.0; + float a = 0.5; + vec4 shift = vec4(100); + for (int i = 0; i < numOctaves; ++i) { + v += a * cnoise(x); + x = x * 2.0 + shift; + a *= 0.5; + } + return v; + } +` + +let voronoiNoise2 = `const mat2 myt = mat2(.12121212, .13131313, -.13131313, .12121212); + const vec2 mys = vec2(1e4, 1e6); + + vec2 rhash(vec2 uv) { + uv *= myt; + uv *= mys; + return fract(fract(uv / mys) * uv); + } + + vec3 hash(vec3 p) { + return fract(sin(vec3(dot(p, vec3(1.0, 57.0, 113.0)), + dot(p, vec3(57.0, 113.0, 1.0)), + dot(p, vec3(113.0, 1.0, 57.0)))) * + 43758.5453); + } + + float voronoiNoise(const in vec2 point) { + vec2 p = floor(point); + vec2 f = fract(point); + float res = 0.0; + for (int j = -1; j <= 1; j++) { + for (int i = -1; i <= 1; i++) { + vec2 b = vec2(i, j); + vec2 r = vec2(b) - f + rhash(p + b); + res += 1. / pow(dot(r, r), 8.); + } + } + return pow(1. / res, 0.0625); + } +`; + +let voronoiNoise3 = ` + const mat2 myt = mat2(.12121212, .13131313, -.13131313, .12121212); + const vec2 mys = vec2(1e4, 1e6); + + vec2 rhash(vec2 uv) { + uv *= myt; + uv *= mys; + return fract(fract(uv / mys) * uv); + } + + vec3 hash(vec3 p) { + return fract( + sin(vec3(dot(p, vec3(1.0, 57.0, 113.0)), dot(p, vec3(57.0, 113.0, 1.0)), + dot(p, vec3(113.0, 1.0, 57.0)))) * + 43758.5453); + } + + vec3 voronoiNoise(const in vec3 x) { + vec3 p = floor(x); + vec3 f = fract(x); + + float id = 0.0; + vec2 res = vec2(100.0); + for (int k = -1; k <= 1; k++) { + for (int j = -1; j <= 1; j++) { + for (int i = -1; i <= 1; i++) { + vec3 b = vec3(float(i), float(j), float(k)); + vec3 r = vec3(b) - f + hash(p + b); + float d = dot(r, r); + + float cond = max(sign(res.x - d), 0.0); + float nCond = 1.0 - cond; + + float cond2 = nCond * max(sign(res.y - d), 0.0); + float nCond2 = 1.0 - cond2; + + id = (dot(p + b, vec3(1.0, 57.0, 113.0)) * cond) + (id * nCond); + res = vec2(d, res.x) * cond + res * nCond; + + res.y = cond2 * d + nCond2 * res.y; + } + } + } + + return vec3(sqrt(res), abs(id)); + } +`; + +let hash12 = ` +float hash12(vec2 p) +{ + vec3 p3 = fract(vec3(p.xyx) * .1031); + p3 += dot(p3, p3.yzx + 33.33); + return fract((p3.x + p3.y) * p3.z); +} +`; + +export {cnoise2, cnoise3, cnoise4, fbm3, fbm4, voronoiNoise2, voronoiNoise3, hash12}; \ No newline at end of file diff --git a/glslUtils.js b/glslUtils.js new file mode 100644 index 0000000..b4e4578 --- /dev/null +++ b/glslUtils.js @@ -0,0 +1,113 @@ +let rotAxis = ` +vec3 rotAxis(vec3 v, vec3 axis, float angle) +{ + return (1.0 - cos(angle)) * dot(v, axis) * axis + cos(angle) * v + sin(angle) * cross(axis, v); +}`; + +let PI = "#define PI 3.1415926538"; + +let getFaceNormal = ` +vec3 getFaceNormal(vec3 position) +{ + vec3 dx = dFdx(position); + vec3 dy = dFdy(position); + return normalize(cross(dy, dx)); +} +`; + +let triangleIntersect = ` + // Triangle intersection. Returns { t, u, v } + vec3 triIntersect( in vec3 ro, in vec3 rd, in vec3 v0, in vec3 v1, in vec3 v2 ) + { + vec3 v1v0 = v1 - v0; + vec3 v2v0 = v2 - v0; + vec3 rov0 = ro - v0; + + #if 1 + // Cramer's rule for solcing p(t) = ro+t·rd = p(u,v) = vo + u·(v1-v0) + v·(v2-v1) + float d = 1.0/determinant(mat3(v1v0, v2v0, -rd )); + float u = d*determinant(mat3(rov0, v2v0, -rd )); + float v = d*determinant(mat3(v1v0, rov0, -rd )); + float t = d*determinant(mat3(v1v0, v2v0, rov0)); + #else + // The four determinants above have lots of terms in common. Knowing the changing + // the order of the columns/rows doesn't change the volume/determinant, and that + // the volume is dot(cross(a,b,c)), we can precompute some common terms and reduce + // it all to: + vec3 n = cross( v1v0, v2v0 ); + vec3 q = cross( rov0, rd ); + float d = 1.0/dot( rd, n ); + float u = d*dot( -q, v2v0 ); + float v = d*dot( q, v1v0 ); + float t = d*dot( -n, rov0 ); + #endif + + if( u<0.0 || v<0.0 || (u+v)>1.0 ) t = -1.0; + + return vec3( t, u, v ); + } +`; + + +let rgb2hsv = ` + vec3 rgb2hsv(vec3 c) + { + vec4 K = vec4(0.0, -1.0 / 3.0, 2.0 / 3.0, -1.0); + vec4 p = mix(vec4(c.bg, K.wz), vec4(c.gb, K.xy), step(c.b, c.g)); + vec4 q = mix(vec4(p.xyw, c.r), vec4(c.r, p.yzx), step(p.x, c.r)); + + float d = q.x - min(q.w, q.y); + float e = 1.0e-10; + return vec3(abs(q.z + (q.w - q.y) / (6.0 * d + e)), d / (q.x + e), q.x); + } +`; + +let hsv2rgb = ` + vec3 hsv2rgb(vec3 c) + { + vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0); + vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www); + return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y); + } +`; + +let rotationMatrix = ` + mat4 rotationMatrix(vec3 axis, float angle) + { + axis = normalize(axis); + float s = sin(angle); + float c = cos(angle); + float oc = 1.0 - c; + + return mat4(oc * axis.x * axis.x + c, oc * axis.x * axis.y - axis.z * s, oc * axis.z * axis.x + axis.y * s, 0.0, + oc * axis.x * axis.y + axis.z * s, oc * axis.y * axis.y + c, oc * axis.y * axis.z - axis.x * s, 0.0, + oc * axis.z * axis.x - axis.y * s, oc * axis.y * axis.z + axis.x * s, oc * axis.z * axis.z + c, 0.0, + 0.0, 0.0, 0.0, 1.0); + } +`; + +let map = ` + float map(float value, float min1, float max1, float min2, float max2) { + return min2 + (value - min1) * (max2 - min2) / (max1 - min1); + } +` + +let uvFromIndex = ` + vec2 uvFromIndex (int i, ivec2 s) + { + float y = floor(float(i) / float(s.x)); + float x = float(i) - (y * float(s.x)); + vec2 uv = vec2(x, y) / vec2(s); // add tiny epsilon to squash rounding bug on M1s + return uv; + } +`; + +let texture2DAtIndex = ` + vec4 texture2DAtIndex (sampler2D tex, int i, ivec2 s) + { + vec2 uv = uvFromIndex(i, s); + return texture2D(tex, uv); + } +`; + +export {rotAxis, PI, getFaceNormal, triangleIntersect, rgb2hsv, hsv2rgb, rotationMatrix, map, uvFromIndex, texture2DAtIndex}; \ No newline at end of file diff --git a/main.js b/main.js index e90a884..0dc1085 100644 --- a/main.js +++ b/main.js @@ -1,6 +1,6 @@ import {createPointsMaterial} from './materials.js'; import GPUComputationRenderer from './GPUComputationRenderer.js'; -import {createPosTargetShader} from './computeShaders.js'; +import {createPosTargetShader, createAccShader, createVelShader, createPosShader} from './computeShaders.js'; const NUM_POINTS = 1e6; const NUM_X = Math.ceil(Math.sqrt(NUM_POINTS)); @@ -13,12 +13,13 @@ let camera, scene, renderer, world; let points; let pixR = window.devicePixelRatio ? window.devicePixelRatio : 1; let time = new Date().getTime(); +let frame = 0; let internalTime = 0; let gpu; let posTargetTex, posTargetVar; - -console.log(NUM_X, NUM_Y); - +let accTex, accVar; +let velTex, velVar; +let posTex, posVar; (function init () { @@ -69,18 +70,32 @@ function createPoints () geometry.setAttribute( 'position', new THREE.BufferAttribute( new Float32Array(verts), 3 ) ); - let material = createPointsMaterial(); + let material = createPointsMaterial(NUM_X, NUM_Y); points = new THREE.Points(geometry, material); - //world.add(points); + world.add(points); } function setupGpuComputation () { gpu = new GPUComputationRenderer(NUM_X, NUM_Y, renderer); - let posTargetTex = gpu.createTexture(); - let posTargetVar = gpu.addVariable( "posTarget", createPosTargetShader(NUM_X, NUM_Y), posTargetTex); + posTargetTex = gpu.createTexture(); + posTargetVar = gpu.addVariable( "posTarget", createPosTargetShader(), posTargetTex); + + accTex = gpu.createTexture(); + accVar = gpu.addVariable( "acc", createAccShader(), posTargetTex); + + velTex = gpu.createTexture(); + velVar = gpu.addVariable( "vel", createVelShader(), posTargetTex); + + posTex = gpu.createTexture(); + posVar = gpu.addVariable( "pos", createPosShader(), posTargetTex); + + + gpu.setVariableDependencies(accVar, [posTargetVar, posVar, accVar]); + gpu.setVariableDependencies(velVar, [accVar, velVar]); + gpu.setVariableDependencies(posVar, [accVar, velVar, posVar, posTargetVar]); // Check for completeness var error = gpu.init(); @@ -90,7 +105,7 @@ function setupGpuComputation () } let debugPlane = new t.Mesh(new t.PlaneGeometry(200, 200), new t.MeshBasicMaterial({map: gpu.getCurrentRenderTarget( posTargetVar ).texture, color: 0xFFFFFF, side: THREE.DoubleSide})); - scene.add(debugPlane); + //scene.add(debugPlane); } function render () @@ -100,12 +115,33 @@ function render () internalTime += delta; time = t; + let u = posTargetVar.material.uniforms; + u.time = {value: internalTime}; + u.frame = {value: frame}; + + u = accVar.material.uniforms; + u.time = {value: internalTime}; + + u = posVar.material.uniforms; + u.time = {value: internalTime}; + u.frame = {value: frame}; + gpu.compute(); - renderer.render(scene, camera); - points.material.uniforms.time.value = internalTime; + let pu = points.material.uniforms; + pu.time.value = internalTime; + pu.posTarget = { value: gpu.getCurrentRenderTarget( posTargetVar ).texture }; + pu.acc = { value: gpu.getCurrentRenderTarget( accVar ).texture }; + pu.vel = { value: gpu.getCurrentRenderTarget( velVar ).texture }; + pu.pos = { value: gpu.getCurrentRenderTarget( posVar ).texture }; + world.rotation.y += .005; + world.rotation.x += .003; + + renderer.render(scene, camera); requestAnimationFrame(render); + + frame++; } function resize () diff --git a/materials.js b/materials.js new file mode 100644 index 0000000..ca30092 --- /dev/null +++ b/materials.js @@ -0,0 +1,93 @@ +import {cnoise3, hash12} from './glslNoise.js'; +import {uvFromIndex} from './glslUtils.js'; + +let t = THREE; +let dummyTex = new t.Texture(); + +function createPointsMaterial (nX, nY) +{ + let vert = ` + + ${cnoise3} + ${hash12} + ${uvFromIndex} + + uniform sampler2D posTarget; + uniform sampler2D acc; + uniform sampler2D vel; + uniform sampler2D pos; + uniform float time; + varying float alpha; + varying vec3 col; + + void main() + { + int i = gl_VertexID; + ivec2 size = ivec2(${nX}, ${nX}); + vec2 uv = uvFromIndex(i, size); + vec4 posTarget = texture2D(posTarget, uv); + vec4 pos = texture2D(pos, uv); + + vec3 p = position; + float t = time * 0.0003; + + float n = hash12(vec2(float(i), 0.0)); + float ps = pow(n, 2.0); + alpha = .2 + pow(n, 20.0) * .3; + ps *= 2.0; + + + if (n > .999) + { + ps *= 1.1; + alpha *= 2.0; + } + + + p = pos.xyz; + + + vec4 a = texture2D(vel, uv); + vec3 c1 = vec3(1.0, 0.0, 0.0); + vec3 c2 = vec3(1.0, .4, 0.2); + float s = pow(length(a) / 1.5, 5.0) * 1.5; + s = clamp(s, 0.0, 1.0); + col = mix(c1, c2, s); + + gl_PointSize = ps; + gl_Position = projectionMatrix * modelViewMatrix * vec4(p, 1.0); + } + `; + + let frag = ` + uniform float time; + varying float alpha; + varying vec3 col; + + void main() + { + gl_FragColor = vec4(col.rgb, alpha); + } + `; + + const material = new THREE.ShaderMaterial( + { + uniforms: + { + time: { value: 1.0 }, + /*posTargetTex: {value: dummyTex}*/ + }, + + vertexShader: vert, + fragmentShader: frag, + transparent: true, + depthWrite: false, + depthTest: false, + blending: THREE.AdditiveBlending + }); + + + return material; +} + +export {createPointsMaterial}; \ No newline at end of file