diff --git a/src/BrokenGlass.js b/src/BrokenGlass.js index 6ffe8e8..ba54dc6 100644 --- a/src/BrokenGlass.js +++ b/src/BrokenGlass.js @@ -273,12 +273,8 @@ if (utils.isInShellProcess()) { // the bin of the current shard. float shardGroup = floor(shardMap.g * SHARD_LAYERS * 0.999); - if (shardGroup == i) { - vec4 windowColor = texture2D(uTexture, coords); - - // Dissolve the shard by using distance information from the red channel. - float dissolve = (shardMap.x - pow(progress+0.1, 2)) > 0 ? 1 : 0; - cogl_color_out = mix(cogl_color_out, windowColor, dissolve); + if (shardGroup == i && (shardMap.x - pow(progress+0.1, 2)) > 0) { + cogl_color_out = texture2D(uTexture, coords); } } `; diff --git a/src/EnergizeA.js b/src/EnergizeA.js index 408ff38..aaafda9 100644 --- a/src/EnergizeA.js +++ b/src/EnergizeA.js @@ -221,7 +221,8 @@ if (utils.isInShellProcess()) { vec4 windowColor = texture2D(uTexture, cogl_tex_coord_in[0].st); // Dissolve window to effect color / transparency. - cogl_color_out = mix(vec4(uColor, 1.0) * windowColor.a, windowColor, 0.2 * masks.y + 0.8) * masks.y; + cogl_color_out.rgb = mix(uColor, windowColor.rgb, 0.2 * masks.y + 0.8); + cogl_color_out.a = windowColor.a * masks.y; vec2 scaledUV = (cogl_tex_coord_in[0].st-0.5) * (1.0 + 0.1*uProgress); scaledUV /= uScale; @@ -239,6 +240,7 @@ if (utils.isInShellProcess()) { } cogl_color_out.rgb += uColor * particles * masks.x; + cogl_color_out.a += particles * masks.x; // These are pretty useful for understanding how this works. // cogl_color_out = vec4(masks, 0.0, 1.0); diff --git a/src/EnergizeB.js b/src/EnergizeB.js index 43384b4..adb20cd 100644 --- a/src/EnergizeB.js +++ b/src/EnergizeB.js @@ -238,25 +238,29 @@ if (utils.isInShellProcess()) { vec4 windowColor = texture2D(uTexture, cogl_tex_coord_in[0].st); // Dissolve window to effect color / transparency. - cogl_color_out = mix(vec4(uColor, 1.0) * windowColor.a, windowColor, 0.5 * masks.w + 0.5) * masks.w; + cogl_color_out.rgb = mix(uColor, windowColor.rgb, 0.5 * masks.w + 0.5); + cogl_color_out.a = windowColor.a * masks.w; // Add leading shower particles. vec2 showerUV = cogl_tex_coord_in[0].st + vec2(0, -0.7*uProgress/SHOWER_TIME); showerUV *= 0.02 * vec2(uSizeX, uSizeY) / uScale; float shower = pow(simplex2D(showerUV), 10.0); cogl_color_out.rgb += uColor * shower * masks.x; + cogl_color_out.a += shower * masks.x; // Add trailing streak lines. vec2 streakUV = cogl_tex_coord_in[0].st + vec2(0, -uProgress/SHOWER_TIME); streakUV *= vec2(0.05 * uSizeX, 0.001 * uSizeY) / uScale; float streaks = simplex2DFractal(streakUV) * 0.5; cogl_color_out.rgb += uColor * streaks * masks.y; + cogl_color_out.a += streaks * masks.y; // Add glimmering atoms. vec2 atomUV = cogl_tex_coord_in[0].st + vec2(0, -0.025*uProgress/SHOWER_TIME); atomUV *= 0.2 * vec2(uSizeX, uSizeY) / uScale; float atoms = pow((simplex3D(vec3(atomUV, uTime))), 5.0); cogl_color_out.rgb += uColor * atoms * masks.z; + cogl_color_out.a += atoms * masks.z; // These are pretty useful for understanding how this works. // cogl_color_out = vec4(masks.rgb, 1.0); diff --git a/src/Fire.js b/src/Fire.js index c84bcd0..9e4dda3 100644 --- a/src/Fire.js +++ b/src/Fire.js @@ -299,6 +299,7 @@ if (utils.isInShellProcess()) { ${shaderSnippets.standardUniforms()} ${shaderSnippets.noise()} ${shaderSnippets.edgeMask()} + ${shaderSnippets.compositing()} uniform bool uForOpening; uniform bool u3DNoise; @@ -393,13 +394,13 @@ if (utils.isInShellProcess()) { // Map noise value to color. vec4 fire = getFireColor(noise); - fire.rgb *= fire.a; // Get the window texture and fade it according to the effect mask. - cogl_color_out = texture2D(uTexture, cogl_tex_coord_in[0].st) * effectMask.x; + cogl_color_out = texture2D(uTexture, cogl_tex_coord_in[0].st); + cogl_color_out.a *= effectMask.x; // Add the fire to the window. - cogl_color_out = cogl_color_out * (1.0 - fire.a) + fire; + cogl_color_out = alphaOver(cogl_color_out, fire); // These are pretty useful for understanding how this works. // cogl_color_out = vec4(vec3(noise), 1); diff --git a/src/Matrix.js b/src/Matrix.js index c4740aa..31977ef 100644 --- a/src/Matrix.js +++ b/src/Matrix.js @@ -204,6 +204,7 @@ if (utils.isInShellProcess()) { ${shaderSnippets.standardUniforms()} ${shaderSnippets.noise()} ${shaderSnippets.edgeMask()} + ${shaderSnippets.compositing()} uniform bool uForOpening; uniform sampler2D uFontTexture; @@ -270,24 +271,26 @@ if (utils.isInShellProcess()) { coords.y = coords.y * (uOverShoot + 1.0) - uOverShoot * 0.5; // Get a cool matrix effect. See comments for those methods above. - vec2 rain = getRain(coords); - float text = getText(coords); + vec2 rainMask = getRain(coords); + float textMask = getText(coords); // Get the window texture and fade it according to the effect mask. - cogl_color_out = texture2D(uTexture, coords) * rain.y; + cogl_color_out = texture2D(uTexture, coords); + cogl_color_out.a *= rainMask.y; // This is used to fade out the remaining trails in the end. float finalFade = 1-clamp((uProgress-FINAL_FADE_START_TIME)/ (1-FINAL_FADE_START_TIME), 0, 1); - float rainAlpha = finalFade * rain.x; + float rainAlpha = finalFade * rainMask.x; // Add the matrix effect to the window. - cogl_color_out.rgb += mix(uTrailColor, uTipColor, min(1, pow(rainAlpha+0.1, 4))) * rainAlpha * text; + vec4 text = vec4(mix(uTrailColor, uTipColor, min(1, pow(rainAlpha+0.1, 4))), rainAlpha * textMask); + cogl_color_out = alphaOver(cogl_color_out, text); // These are pretty useful for understanding how this works. - // cogl_color_out = vec4(vec3(text), 1); - // cogl_color_out = vec4(vec3(rain.x), 1); - // cogl_color_out = vec4(vec3(rain.y), 1); + // cogl_color_out = vec4(vec3(textMask), 1); + // cogl_color_out = vec4(vec3(rainMask.x), 1); + // cogl_color_out = vec4(vec3(rainMask.y), 1); `; this.add_glsl_snippet(Shell.SnippetHook.FRAGMENT, declarations, code, true); diff --git a/src/TRexAttack.js b/src/TRexAttack.js index 1d14378..d453a75 100644 --- a/src/TRexAttack.js +++ b/src/TRexAttack.js @@ -287,7 +287,7 @@ if (utils.isInShellProcess()) { cogl_color_out.a *= (scratchMap > progress ? 1 : 0); // Add flash color. - cogl_color_out = blendOver(flash, cogl_color_out); + cogl_color_out = alphaOver(cogl_color_out, flash); // Fade out the remaining shards. float fadeProgress = smoothstep(0, 1, (progress - 1.0 + FF_TIME)/FF_TIME); diff --git a/src/Wisps.js b/src/Wisps.js index a7c9037..bca8018 100644 --- a/src/Wisps.js +++ b/src/Wisps.js @@ -177,6 +177,7 @@ if (utils.isInShellProcess()) { ${shaderSnippets.standardUniforms()} ${shaderSnippets.noise()} ${shaderSnippets.edgeMask()} + ${shaderSnippets.compositing()} uniform bool uForOpening; uniform vec2 uSeed; @@ -222,7 +223,7 @@ if (utils.isInShellProcess()) { // Use distance to center of shifted / rotated UV coordinates to draw a glaring point. float dist = length(cellUV - 0.5) * gridSize / radius; if (dist < 1.0) { - return min(10, 0.01 / pow(dist, 2.0)); + return min(5, 0.01 / pow(dist, 2.0)); } return 0.0; @@ -233,7 +234,7 @@ if (utils.isInShellProcess()) { float progress = uForOpening ? 1.0-uProgress : uProgress; // Get the color of the window. - vec4 windowColor = texture2D(uTexture, cogl_tex_coord_in[0].st); + cogl_color_out = texture2D(uTexture, cogl_tex_coord_in[0].st); // Compute several layers of moving wisps. vec2 uv = (cogl_tex_coord_in[0].st-0.5) / mix(1.0, 0.5, progress) + 0.5; @@ -254,10 +255,11 @@ if (utils.isInShellProcess()) { // Use a noise function to dissolve the window. float noise = smoothstep(1.0, 0.0, abs(2.0 * simplex2DFractal(uv * vec2(uSizeX, uSizeY) / 250) - 1.0)); float windowMask = 1.0 - (windowOut < 0.5 ? mix(0.0, noise, windowOut * 2.0) : mix(noise, 1.0, windowOut * 2.0 - 1.0)); - cogl_color_out = windowColor * windowMask * mask; + cogl_color_out.a *= windowMask * mask; // Add the wisps. - cogl_color_out += min(wispsIn, 1.0 - wispsOut) * wisps * vec4(uColor, 1.0) * mask * windowColor.a; + vec4 wispColor = wisps * vec4(uColor, min(wispsIn, 1.0 - wispsOut)*mask); + cogl_color_out = alphaOver(cogl_color_out, wispColor); // These are pretty useful for understanding how this works. // cogl_color_out = vec4(vec3(windowMask), 1.0); diff --git a/src/shaderSnippets.js b/src/shaderSnippets.js index 40bc23f..275140e 100644 --- a/src/shaderSnippets.js +++ b/src/shaderSnippets.js @@ -55,7 +55,7 @@ function math2D() { // compositing color values in the shader in the same way. function compositing() { return ` - vec4 blendOver(vec4 over, vec4 under) { + vec4 alphaOver(vec4 under, vec4 over) { float alpha = over.a + under.a * (1.0 - over.a); return vec4((over.rgb * over.a + under.rgb * under.a * (1.0 - over.a)) / alpha, alpha); }