Pavel Dobryakov 2e0262c314 fix
2017-08-27 23:04:54 +03:00

113 lines
19 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Fluid Simulation</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta property="og:type" content="website">
<meta property="og:title" content="webgl fluid simulation">
<meta property="og:url" content="https://paveldogreat.github.io/WebGL-Fluid-Simulation/">
<meta property="og:image" content="https://paveldogreat.github.io/WebGL-Fluid-Simulation/logo.png">
<script type="text/javascript" src="dat.gui.min.js"></script>
<style>
* {
user-select: none;
}
html, body {
overflow: hidden;
}
body {
margin: 0;
position: absolute;
width: 100%;
height: 100%;
}
canvas {
width: 100%;
height: 100%;
}
.dg {
opacity: 0.9;
}
.dg .property-name {
overflow: visible;
}
@font-face {
font-family: 'iconfont';
src: url('iconfont.ttf') format('truetype');
}
.bigFont {
font-size: 150%;
color: #8C8C8C;
}
.icon {
font-family: 'iconfont';
font-size: 130%;
float: right;
}
.twitter:before {
content: 'a';
}
.github:before {
content: 'b';
}
</style>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-105392568-1', 'auto');
ga('send', 'pageview');
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
</head>
<body>
<canvas></canvas>
<script>
var canvas=document.getElementsByTagName("canvas")[0];canvas.width=canvas.clientWidth;canvas.height=canvas.clientHeight;var params={alpha:!1,depth:!1,stencil:!1,antialias:!1},gl=canvas.getContext("webgl2",params),isWebGL2=!!gl;isWebGL2||(gl=canvas.getContext("webgl",params)||canvas.getContext("experimental-webgl",params));gl.clearColor(0,0,0,1);gl.enable(gl.BLEND);var halfFloat=gl.getExtension("OES_texture_half_float"),support_linear_float=gl.getExtension("OES_texture_half_float_linear");
isWebGL2&&(gl.getExtension("EXT_color_buffer_float"),support_linear_float=gl.getExtension("OES_texture_float_linear"));var config={TEXTURE_DOWNSAMPLE:1,DENSITY_DISSIPATION:.98,VELOCITY_DISSIPATION:.99,PRESSURE_CONCENTRATION:.8,PRESSURE_ITERATIONS:25,CURL:30,SPLAT_RADIUS:.005},gui=new dat.GUI({width:270});gui.add(config,"TEXTURE_DOWNSAMPLE",{Full:0,Half:1,Quarter:2}).name("resolution").onFinishChange(initFramebuffers);gui.add(config,"DENSITY_DISSIPATION",.9,1).name("density diffusion");
gui.add(config,"VELOCITY_DISSIPATION",.9,1).name("velocity diffusion");gui.add(config,"PRESSURE_CONCENTRATION",0,1).name("jelly");gui.add(config,"PRESSURE_ITERATIONS",1,60).name("iterations");gui.add(config,"CURL",0,50).name("vorticity").step(1);gui.add(config,"SPLAT_RADIUS",1E-4,.01).name("splat radius");var github=gui.add({fun:function(){window.open("https://github.com/PavelDoGreat/WebGL-Fluid-Simulation")}},"fun").name("Github");github.__li.className="cr function bigFont";
github.__li.style.borderLeft="3px solid #8C8C8C";var githubIcon=document.createElement("span");github.domElement.parentElement.appendChild(githubIcon);githubIcon.className="icon github";var twitter=gui.add({fun:function(){window.open("https://twitter.com/PavelDoGreat")}},"fun").name("Twitter");twitter.__li.className="cr function bigFont";twitter.__li.style.borderLeft="3px solid #8C8C8C";var twitterIcon=document.createElement("span");twitter.domElement.parentElement.appendChild(twitterIcon);
twitterIcon.className="icon twitter";var GLProgram=function(a,b){this.uniforms={};this.program=gl.createProgram();gl.attachShader(this.program,a);gl.attachShader(this.program,b);gl.linkProgram(this.program);if(!gl.getProgramParameter(this.program,gl.LINK_STATUS))throw gl.getProgramInfoLog(this.program);a=gl.getProgramParameter(this.program,gl.ACTIVE_UNIFORMS);for(b=0;b<a;b++){var c=gl.getActiveUniform(this.program,b).name;this.uniforms[c]=gl.getUniformLocation(this.program,c)}};
GLProgram.prototype.bind=function(){gl.useProgram(this.program)};function compileShader(a,b){a=gl.createShader(a);gl.shaderSource(a,b);gl.compileShader(a);if(!gl.getShaderParameter(a,gl.COMPILE_STATUS))throw gl.getShaderInfoLog(a);return a}
var baseVertexShader=compileShader(gl.VERTEX_SHADER,"\n precision highp float;\n precision mediump sampler2D;\n\n attribute vec2 aPosition;\n varying vec2 vUv;\n varying vec2 vL;\n varying vec2 vR;\n varying vec2 vT;\n varying vec2 vB;\n uniform vec2 texelSize;\n\n void main () {\n vUv = aPosition * 0.5 + 0.5;\n vL = vUv - vec2(texelSize.x, 0.0);\n vR = vUv + vec2(texelSize.x, 0.0);\n vT = vUv + vec2(0.0, texelSize.y);\n vB = vUv - vec2(0.0, texelSize.y);\n gl_Position = vec4(aPosition, 0.0, 1.0);\n }\n"),clearShader=
compileShader(gl.FRAGMENT_SHADER,"\n precision highp float;\n precision mediump sampler2D;\n\n varying vec2 vUv;\n uniform sampler2D uTexture;\n uniform float value;\n\n void main () {\n gl_FragColor = value * texture2D(uTexture, vUv);\n }\n"),displayShader=compileShader(gl.FRAGMENT_SHADER,"\n precision highp float;\n precision mediump sampler2D;\n\n varying vec2 vUv;\n varying vec2 vL;\n varying vec2 vR;\n varying vec2 vT;\n varying vec2 vB;\n uniform sampler2D uTexture;\n\n void main () {\n gl_FragColor = texture2D(uTexture, vUv);\n }\n"),
splatShader=compileShader(gl.FRAGMENT_SHADER,"\n precision highp float;\n precision mediump sampler2D;\n\n varying vec2 vUv;\n uniform sampler2D uTarget;\n uniform float aspectRatio;\n uniform vec3 color;\n uniform vec2 point;\n uniform float radius;\n\n void main () {\n vec2 p = vUv - point.xy;\n p.x *= aspectRatio;\n vec3 splat = exp(-dot(p, p) / radius) * color;\n vec3 base = texture2D(uTarget, vUv).xyz;\n gl_FragColor = vec4(base + splat, 1.0);\n }\n"),
advectionManualFilteringShader=compileShader(gl.FRAGMENT_SHADER,"\n precision highp float;\n precision mediump sampler2D;\n\n varying vec2 vUv;\n uniform sampler2D uVelocity;\n uniform sampler2D uSource;\n uniform vec2 texelSize;\n uniform float dt;\n uniform float dissipation;\n\n vec4 bilerp (in sampler2D sam, in vec2 p) {\n vec4 st;\n st.xy = floor(p - 0.5) + 0.5;\n st.zw = st.xy + 1.0;\n vec4 uv = st * texelSize.xyxy;\n vec4 a = texture2D(sam, uv.xy);\n vec4 b = texture2D(sam, uv.zy);\n vec4 c = texture2D(sam, uv.xw);\n vec4 d = texture2D(sam, uv.zw);\n vec2 f = p - st.xy;\n return mix(mix(a, b, f.x), mix(c, d, f.x), f.y);\n }\n\n void main () {\n vec2 coord = gl_FragCoord.xy - dt * texture2D(uVelocity, vUv).xy;\n gl_FragColor = dissipation * bilerp(uSource, coord);\n gl_FragColor.a = 1.0;\n }\n"),
advectionShader=compileShader(gl.FRAGMENT_SHADER,"\n precision highp float;\n precision mediump sampler2D;\n\n varying vec2 vUv;\n uniform sampler2D uVelocity;\n uniform sampler2D uSource;\n uniform vec2 texelSize;\n uniform float dt;\n uniform float dissipation;\n\n void main () {\n vec2 coord = vUv - dt * texture2D(uVelocity, vUv).xy * texelSize;\n gl_FragColor = dissipation * texture2D(uSource, coord);\n }\n"),divergenceShader=compileShader(gl.FRAGMENT_SHADER,
"\n precision highp float;\n precision mediump sampler2D;\n\n varying vec2 vUv;\n varying vec2 vL;\n varying vec2 vR;\n varying vec2 vT;\n varying vec2 vB;\n uniform sampler2D uVelocity;\n\n vec2 sampleVelocity (in vec2 uv) {\n vec2 multiplier = vec2(1.0, 1.0);\n if (uv.x < 0.0) { uv.x = 0.0; multiplier.x = -1.0; }\n if (uv.x > 1.0) { uv.x = 1.0; multiplier.x = -1.0; }\n if (uv.y < 0.0) { uv.y = 0.0; multiplier.y = -1.0; }\n if (uv.y > 1.0) { uv.y = 1.0; multiplier.y = -1.0; }\n return multiplier * texture2D(uVelocity, uv).xy;\n }\n\n void main () {\n float L = sampleVelocity(vL).x;\n float R = sampleVelocity(vR).x;\n float T = sampleVelocity(vT).y;\n float B = sampleVelocity(vB).y;\n float div = 0.5 * (R - L + T - B);\n gl_FragColor = vec4(div, 0.0, 0.0, 1.0);\n }\n"),
curlShader=compileShader(gl.FRAGMENT_SHADER,"\n precision highp float;\n precision mediump sampler2D;\n\n varying vec2 vUv;\n varying vec2 vL;\n varying vec2 vR;\n varying vec2 vT;\n varying vec2 vB;\n uniform sampler2D uVelocity;\n\n void main () {\n float L = texture2D(uVelocity, vL).y;\n float R = texture2D(uVelocity, vR).y;\n float T = texture2D(uVelocity, vT).x;\n float B = texture2D(uVelocity, vB).x;\n float vorticity = R - L - T + B;\n gl_FragColor = vec4(vorticity, 0.0, 0.0, 1.0);\n }\n"),
vorticityShader=compileShader(gl.FRAGMENT_SHADER,"\n precision highp float;\n precision mediump sampler2D;\n\n varying vec2 vUv;\n varying vec2 vL;\n varying vec2 vR;\n varying vec2 vT;\n varying vec2 vB;\n uniform sampler2D uVelocity;\n uniform sampler2D uCurl;\n uniform float curl;\n uniform float dt;\n\n void main () {\n float L = texture2D(uCurl, vL).y;\n float R = texture2D(uCurl, vR).y;\n float T = texture2D(uCurl, vT).x;\n float B = texture2D(uCurl, vB).x;\n float C = texture2D(uCurl, vUv).x;\n vec2 force = vec2(abs(T) - abs(B), abs(R) - abs(L));\n force *= 1.0 / length(force + 0.00001) * curl * C;\n vec2 vel = texture2D(uVelocity, vUv).xy;\n gl_FragColor = vec4(vel + force * dt, 0.0, 1.0);\n }\n"),
pressureShader=compileShader(gl.FRAGMENT_SHADER,"\n precision highp float;\n precision mediump sampler2D;\n\n varying vec2 vUv;\n varying vec2 vL;\n varying vec2 vR;\n varying vec2 vT;\n varying vec2 vB;\n uniform sampler2D uPressure;\n uniform sampler2D uDivergence;\n\n vec2 boundary (in vec2 uv) {\n uv = min(max(uv, 0.0), 1.0);\n return uv;\n }\n\n void main () {\n float L = texture2D(uPressure, boundary(vL)).x;\n float R = texture2D(uPressure, boundary(vR)).x;\n float T = texture2D(uPressure, boundary(vT)).x;\n float B = texture2D(uPressure, boundary(vB)).x;\n float C = texture2D(uPressure, vUv).x;\n float divergence = texture2D(uDivergence, vUv).x;\n float pressure = (L + R + B + T - divergence) * 0.25;\n gl_FragColor = vec4(pressure, 0.0, 0.0, 1.0);\n }\n"),
gradientSubtractShader=compileShader(gl.FRAGMENT_SHADER,"\n precision highp float;\n precision mediump sampler2D;\n\n varying vec2 vUv;\n varying vec2 vL;\n varying vec2 vR;\n varying vec2 vT;\n varying vec2 vB;\n uniform sampler2D uPressure;\n uniform sampler2D uVelocity;\n\n vec2 boundary (in vec2 uv) {\n uv = min(max(uv, 0.0), 1.0);\n return uv;\n }\n\n void main () {\n float L = texture2D(uPressure, boundary(vL)).x;\n float R = texture2D(uPressure, boundary(vR)).x;\n float T = texture2D(uPressure, boundary(vT)).x;\n float B = texture2D(uPressure, boundary(vB)).x;\n vec2 velocity = texture2D(uVelocity, vUv).xy;\n velocity.xy -= vec2(R - L, T - B);\n gl_FragColor = vec4(velocity, 0.0, 1.0);\n }\n"),
blit=function(){gl.bindBuffer(gl.ARRAY_BUFFER,gl.createBuffer());gl.bufferData(gl.ARRAY_BUFFER,new Float32Array([-1,-1,-1,1,1,1,1,-1]),gl.STATIC_DRAW);gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER,gl.createBuffer());gl.bufferData(gl.ELEMENT_ARRAY_BUFFER,new Uint16Array([0,1,2,0,2,3]),gl.STATIC_DRAW);gl.vertexAttribPointer(0,2,gl.FLOAT,!1,0,0);gl.enableVertexAttribArray(0);return function(a){gl.bindFramebuffer(gl.FRAMEBUFFER,a);gl.drawElements(gl.TRIANGLES,6,gl.UNSIGNED_SHORT,0)}}();
function clear(a){gl.bindFramebuffer(gl.FRAMEBUFFER,a);gl.clear(gl.COLOR_BUFFER_BIT)}
function createFBO(a,b,c,d,e,h,g){gl.activeTexture(gl.TEXTURE0+a);var f=gl.createTexture();gl.bindTexture(gl.TEXTURE_2D,f);gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MIN_FILTER,g);gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MAG_FILTER,g);gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_WRAP_S,gl.CLAMP_TO_EDGE);gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_WRAP_T,gl.CLAMP_TO_EDGE);gl.texImage2D(gl.TEXTURE_2D,0,d,b,c,0,e,h,null);d=gl.createFramebuffer();gl.bindFramebuffer(gl.FRAMEBUFFER,d);gl.framebufferTexture2D(gl.FRAMEBUFFER,
gl.COLOR_ATTACHMENT0,gl.TEXTURE_2D,f,0);gl.viewport(0,0,b,c);gl.clear(gl.COLOR_BUFFER_BIT);return[f,d,a]}function createDoubleFBO(a,b,c,d,e,h,g){var f=createFBO(a,b,c,d,e,h,g),k=createFBO(a+1,b,c,d,e,h,g);return{get first(){return f},get second(){return k},swap:function(){var a=f;f=k;k=a}}}var textureWidth,textureHeight,density,velocity,divergence,curl,pressure;
function initFramebuffers(){textureWidth=gl.drawingBufferWidth>>config.TEXTURE_DOWNSAMPLE;textureHeight=gl.drawingBufferHeight>>config.TEXTURE_DOWNSAMPLE;var a=isWebGL2?gl.RG16F:gl.RGBA,b=isWebGL2?gl.RG:gl.RGBA,c=isWebGL2?gl.HALF_FLOAT:halfFloat.HALF_FLOAT_OES;density=createDoubleFBO(0,textureWidth,textureHeight,isWebGL2?gl.RGBA16F:gl.RGBA,gl.RGBA,c,support_linear_float?gl.LINEAR:gl.NEAREST);velocity=createDoubleFBO(2,textureWidth,textureHeight,a,b,c,support_linear_float?gl.LINEAR:gl.NEAREST);divergence=
createFBO(4,textureWidth,textureHeight,a,b,c,gl.NEAREST);curl=createFBO(5,textureWidth,textureHeight,a,b,c,gl.NEAREST);pressure=createDoubleFBO(6,textureWidth,textureHeight,a,b,c,gl.NEAREST)}initFramebuffers();
var clearProgram=new GLProgram(baseVertexShader,clearShader),displayProgram=new GLProgram(baseVertexShader,displayShader),splatProgram=new GLProgram(baseVertexShader,splatShader),advectionProgram=new GLProgram(baseVertexShader,support_linear_float?advectionShader:advectionManualFilteringShader),divergenceProgram=new GLProgram(baseVertexShader,divergenceShader),curlProgram=new GLProgram(baseVertexShader,curlShader),vorticityProgram=new GLProgram(baseVertexShader,vorticityShader),pressureProgram=new GLProgram(baseVertexShader,
pressureShader),gradienSubtractProgram=new GLProgram(baseVertexShader,gradientSubtractShader);function pointerPrototype(){this.id=-1;this.dy=this.dx=this.y=this.x=0;this.moved=this.down=!1;this.color=[30,0,300]}var pointers=[];pointers.push(new pointerPrototype);for(var i=0;10>i;i++){var color=[10*Math.random(),10*Math.random(),10*Math.random()],x=canvas.width*Math.random(),y=canvas.height*Math.random(),dx=1E3*(Math.random()-.5),dy=1E3*(Math.random()-.5);splat(x,y,dx,dy,color)}var lastTime=Date.now();
Update();
function Update(){resizeCanvas();var a=Math.min((Date.now()-lastTime)/1E3,.016);lastTime=Date.now();gl.viewport(0,0,textureWidth,textureHeight);advectionProgram.bind();gl.uniform2f(advectionProgram.uniforms.texelSize,1/textureWidth,1/textureHeight);gl.uniform1i(advectionProgram.uniforms.uVelocity,velocity.first[2]);gl.uniform1i(advectionProgram.uniforms.uSource,velocity.first[2]);gl.uniform1f(advectionProgram.uniforms.dt,a);gl.uniform1f(advectionProgram.uniforms.dissipation,config.VELOCITY_DISSIPATION);blit(velocity.second[1]);
velocity.swap();gl.uniform1i(advectionProgram.uniforms.uVelocity,velocity.first[2]);gl.uniform1i(advectionProgram.uniforms.uSource,density.first[2]);gl.uniform1f(advectionProgram.uniforms.dissipation,config.DENSITY_DISSIPATION);blit(density.second[1]);density.swap();for(var b=0;b<pointers.length;b++){var c=pointers[b];c.moved&&(splat(c.x,c.y,c.dx,c.dy,c.color),c.moved=!1)}curlProgram.bind();gl.uniform2f(curlProgram.uniforms.texelSize,1/textureWidth,1/textureHeight);gl.uniform1i(curlProgram.uniforms.uVelocity,
velocity.first[2]);blit(curl[1]);vorticityProgram.bind();gl.uniform2f(vorticityProgram.uniforms.texelSize,1/textureWidth,1/textureHeight);gl.uniform1i(vorticityProgram.uniforms.uVelocity,velocity.first[2]);gl.uniform1i(vorticityProgram.uniforms.uCurl,curl[2]);gl.uniform1f(vorticityProgram.uniforms.curl,config.CURL);gl.uniform1f(vorticityProgram.uniforms.dt,a);blit(velocity.second[1]);velocity.swap();divergenceProgram.bind();gl.uniform2f(divergenceProgram.uniforms.texelSize,1/textureWidth,1/textureHeight);
gl.uniform1i(divergenceProgram.uniforms.uVelocity,velocity.first[2]);blit(divergence[1]);clearProgram.bind();gl.uniform1i(clearProgram.uniforms.uTexture,pressure.first[2]);gl.uniform1f(clearProgram.uniforms.value,config.PRESSURE_CONCENTRATION);blit(pressure.second[1]);pressure.swap();pressureProgram.bind();gl.uniform2f(pressureProgram.uniforms.texelSize,1/textureWidth,1/textureHeight);gl.uniform1i(pressureProgram.uniforms.uDivergence,divergence[2]);for(a=0;a<config.PRESSURE_ITERATIONS;a++)gl.uniform1i(pressureProgram.uniforms.uPressure,
pressure.first[2]),blit(pressure.second[1]),pressure.swap();gradienSubtractProgram.bind();gl.uniform2f(gradienSubtractProgram.uniforms.texelSize,1/textureWidth,1/textureHeight);gl.uniform1i(gradienSubtractProgram.uniforms.uPressure,pressure.first[2]);gl.uniform1i(gradienSubtractProgram.uniforms.uVelocity,velocity.first[2]);blit(velocity.second[1]);velocity.swap();gl.viewport(0,0,gl.drawingBufferWidth,gl.drawingBufferHeight);displayProgram.bind();gl.uniform1i(displayProgram.uniforms.uTexture,density.first[2]);
blit(null);requestAnimationFrame(Update)}
function splat(a,b,c,d,e){splatProgram.bind();gl.uniform1i(splatProgram.uniforms.uTarget,velocity.first[2]);gl.uniform1f(splatProgram.uniforms.aspectRatio,canvas.width/canvas.height);gl.uniform2f(splatProgram.uniforms.point,a/canvas.width,1-b/canvas.height);gl.uniform3f(splatProgram.uniforms.color,c,-d,1);gl.uniform1f(splatProgram.uniforms.radius,config.SPLAT_RADIUS);blit(velocity.second[1]);velocity.swap();gl.uniform1i(splatProgram.uniforms.uTarget,density.first[2]);gl.uniform3f(splatProgram.uniforms.color,
.3*e[0],.3*e[1],.3*e[2]);blit(density.second[1]);density.swap()}function resizeCanvas(){if(canvas.width!=canvas.clientWidth||canvas.height!=canvas.clientHeight)canvas.width=canvas.clientWidth,canvas.height=canvas.clientHeight,initFramebuffers()}canvas.addEventListener("mousemove",function(a){pointers[0].moved=pointers[0].down;pointers[0].dx=10*(a.offsetX-pointers[0].x);pointers[0].dy=10*(a.offsetY-pointers[0].y);pointers[0].x=a.offsetX;pointers[0].y=a.offsetY});
canvas.addEventListener("touchmove",function(a){a.preventDefault();a=a.targetTouches;for(var b=0;b<a.length;b++){var c=pointers[b];c.moved=c.down;c.dx=10*(a[b].pageX-c.x);c.dy=10*(a[b].pageY-c.y);c.x=a[b].pageX;c.y=a[b].pageY}},!1);canvas.addEventListener("mousedown",function(){pointers[0].down=!0;pointers[0].color=[Math.random()+.2,Math.random()+.2,Math.random()+.2]});
canvas.addEventListener("touchstart",function(a){a.preventDefault();a=a.targetTouches;for(var b=0;b<a.length;b++)b>=pointers.length&&pointers.push(new pointerPrototype),pointers[b].id=a[b].identifier,pointers[b].down=!0,pointers[b].x=a[b].pageX,pointers[b].y=a[b].pageY,pointers[b].color=[Math.random()+.2,Math.random()+.2,Math.random()+.2]});window.addEventListener("mouseup",function(){pointers[0].down=!1});
window.addEventListener("touchend",function(a){a=a.changedTouches;for(var b=0;b<a.length;b++)for(var c=0;c<pointers.length;c++)a[b].identifier==pointers[c].id&&(pointers[c].down=!1)});
</script>
</body>
</html>