diff --git a/index.html b/index.html index 9d92a50fb881a326af033d8b044e6b70347d5de9..1b6b195b646cf6c8ea6329aeffb3e1049cfc57d6 100644 --- a/index.html +++ b/index.html @@ -150,11 +150,38 @@ uniform float u_dt; + vec2 bilinearInterp(vec2 pos, sampler2D texture, vec2 size){ + //bilinear interp between nearest cells + + vec2 pxCenter = vec2(0.5, 0.5); + + vec2 ceiled = ceil(pos); + vec2 floored = floor(pos); + + vec2 n = texture2D(texture, (ceiled+pxCenter)/size).xy;//actually ne + vec2 s = texture2D(texture, (floored+pxCenter)/size).xy;//actually sw + if (ceiled.x != floored.x){ + vec2 se = texture2D(texture, (vec2(ceiled.x, floored.y)+pxCenter)/size).xy; + vec2 nw = texture2D(texture, (vec2(floored.x, ceiled.y)+pxCenter)/size).xy; + n = n*(pos.x-floored.x) + nw*(ceiled.x-pos.x); + s = se*(pos.x-floored.x) + s*(ceiled.x-pos.x); + } + vec2 materialVal = n; + if (ceiled.y != floored.y){ + materialVal = n*(pos.y-floored.y) + s*(ceiled.y-pos.y); + } + return materialVal; + } + void main() { vec2 fragCoord = gl_FragCoord.xy; - vec2 currentVelocity = u_scale*texture2D(u_velocity, fragCoord/u_textureSize).xy; + vec2 pxCenter = vec2(0.5, 0.5); + + vec2 currentVelocity; + if (u_scale == 1.0) currentVelocity = 1.0/u_scale*texture2D(u_velocity, fragCoord/u_textureSize).xy; + else currentVelocity = 1.0/u_scale*bilinearInterp((fragCoord-pxCenter)*u_scale + pxCenter, u_velocity, u_textureSize*u_scale); //implicitly solve advection @@ -163,37 +190,15 @@ return; } - vec2 pxCenter = vec2(0.5, 0.5); vec2 pos = fragCoord - pxCenter - u_dt*currentVelocity; - //if (pos.x < 0.0 || pos.x >= u_textureSize.x-1.0 || pos.y < 0.0 || pos.y >= u_textureSize.y-1.0){ - // //boundary - // gl_FragColor = vec4(0); - // return; - //} + //periodic boundary if (pos.x < 0.0) pos.x += u_textureSize.x-1.0; if (pos.x >= u_textureSize.x-1.0) pos.x -= u_textureSize.x-1.0; if (pos.y < 0.0) pos.y += u_textureSize.y-1.0; if (pos.y >= u_textureSize.y-1.0) pos.y -= u_textureSize.y-1.0; - //bilinear interp between nearest cells - vec2 ceiled = ceil(pos); - vec2 floored = floor(pos); - - vec2 n = texture2D(u_material, (ceiled+pxCenter)/u_textureSize).xy;//actually ne - vec2 s = texture2D(u_material, (floored+pxCenter)/u_textureSize).xy;//actually sw - if (ceiled.x != floored.x){ - vec2 se = texture2D(u_material, (vec2(ceiled.x, floored.y)+pxCenter)/u_textureSize).xy; - vec2 nw = texture2D(u_material, (vec2(floored.x, ceiled.y)+pxCenter)/u_textureSize).xy; - n = n*(pos.x-floored.x) + nw*(ceiled.x-pos.x); - s = se*(pos.x-floored.x) + s*(ceiled.x-pos.x); - } - vec2 materialVal = n; - if (ceiled.y != floored.y){ - materialVal = n*(pos.y-floored.y) + s*(ceiled.y-pos.y); - } - - gl_FragColor = vec4(materialVal, 0, 0); + gl_FragColor = vec4(bilinearInterp(pos, u_material, u_textureSize), 0, 0); } </script> diff --git a/main.js b/main.js index 86496f9a82e366ddf2076734986bd1a42550e18b..e87ba4484999ad384c2832ae6b7975aa7cb4f8e1 100755 --- a/main.js +++ b/main.js @@ -3,7 +3,7 @@ var width, height; var actualWidth, actualHeight; var body; -var scale = 3.5; +var scale = 1; var lastMouseCoordinates = [0,0]; var mouseCoordinates = [0,0]; @@ -96,9 +96,9 @@ function render(){ GPU.setProgram("force"); if (mouseEnable){ GPU.setUniformForProgram("force", "u_mouseEnable", 1.0, "1f"); - GPU.setUniformForProgram("force", "u_mouseCoord", [mouseCoordinates[0]/scale, mouseCoordinates[1]/scale], "2f"); - GPU.setUniformForProgram("force", "u_mouseDir", [2*(mouseCoordinates[0]-lastMouseCoordinates[0])/scale, - 2*(mouseCoordinates[1]-lastMouseCoordinates[1])/scale], "2f"); + GPU.setUniformForProgram("force", "u_mouseCoord", [mouseCoordinates[0]*scale, mouseCoordinates[1]*scale], "2f"); + GPU.setUniformForProgram("force", "u_mouseDir", [2*(mouseCoordinates[0]-lastMouseCoordinates[0])*scale, + 2*(mouseCoordinates[1]-lastMouseCoordinates[1])*scale], "2f"); } else { GPU.setUniformForProgram("force", "u_mouseEnable", 0.0, "1f"); } @@ -143,10 +143,12 @@ function resetWindow(){ actualHeight = body.clientHeight; var maxDim = Math.max(actualHeight, actualWidth); - var scale = maxDim/300; + var _scale = maxDim/200; - width = Math.floor(actualWidth/scale); - height = Math.floor(actualHeight/scale); + width = Math.floor(actualWidth/_scale); + height = Math.floor(actualHeight/_scale); + + scale = (width/actualWidth + height/actualHeight)/2; canvas.width = actualWidth; canvas.height = actualHeight; @@ -160,7 +162,7 @@ function resetWindow(){ GPU.setProgram("diverge"); GPU.setUniformForProgram("diverge" ,"u_textureSize", [width, height], "2f"); GPU.setProgram("force"); - GPU.setUniformForProgram("force", "u_reciprocalRadius", 0.1*scale, "1f"); + GPU.setUniformForProgram("force", "u_reciprocalRadius", 0.1/scale, "1f"); GPU.setUniformForProgram("force" ,"u_textureSize", [width, height], "2f"); GPU.setProgram("jacobi"); GPU.setUniformForProgram("jacobi" ,"u_textureSize", [width, height], "2f");