Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Possibly more efficient shader. Cleaned up ellipses image.

  • Loading branch information...
commit 6ec63ceac05c6aff9c60c813b228853ef7c25537 1 parent 6e08050
@njx authored
Showing with 18 additions and 21 deletions.
  1. BIN  ellipses.png
  2. +2 −5 shader.vs
  3. +16 −16 styles.css
View
BIN  ellipses.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
7 shader.vs
@@ -51,17 +51,14 @@ const float PI = 3.1415629;
void main()
{
vec4 pos = a_position;
- float ramp = a_meshCoord.y;
- if (ramp > 0.5) {
- ramp = 1.0 - ramp;
- }
+ float ramp = step(0.5, 1.0 - a_meshCoord.y) * a_meshCoord.y + step(0.5, a_meshCoord.y) * (1.0 - a_meshCoord.y);
float zOffset = ramp * -50.0;
float adjT = t * 0.999; // don't get to the end to avoid overlap
pos.z = zOffset * mapDepth * adjT - mapDepth * adjT / 2.0;
pos.y = (pos.y + 0.5) * (1.0 - adjT) - 0.5;
- v_lighting = 1.0 - (ramp * adjT * 1.5);
+ v_lighting = 1.0 - (ramp * adjT * 0.5);
gl_Position = u_projectionMatrix * transform * pos;
}
View
32 styles.css
@@ -28,49 +28,49 @@
}
.doFold {
- -webkit-animation-duration: 0.15s;
+ -webkit-animation-duration: 0.4s;
-webkit-animation-name: fold;
-webkit-animation-fill-mode: forwards;
- -webkit-animation-timing-function: linear;
+ -webkit-animation-timing-function: ease-in;
}
.doUnfold {
- -webkit-animation-duration: 0.15s;
+ -webkit-animation-duration: 0.4s;
-webkit-animation-name: unfold;
-webkit-animation-fill-mode: forwards;
- -webkit-animation-timing-function: linear;
+ -webkit-animation-timing-function: ease-in;
}
@-webkit-keyframes fold {
from {
- -webkit-filter: custom(url(shader.vs) mix(url(shader.fs) multiply source-atop), 4 4 border-box, transform perspective(1000) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg), t 0, mapDepth 10, useColoredBack 1, backColor 1 1 1 1, direction 0, shadow 0);
+ -webkit-filter: custom(url(shader.vs) mix(url(shader.fs) multiply source-atop), 2 2 border-box, transform perspective(1000) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg), t 0, mapDepth 5, useColoredBack 1, backColor 1 1 1 1, direction 0, shadow 0);
}
to {
- -webkit-filter: custom(url(shader.vs) mix(url(shader.fs) multiply source-atop), 4 4 border-box, transform perspective(1000) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg), t 1, mapDepth 10, useColoredBack 1, backColor 1 1 1 1, direction 0, shadow 0);
+ -webkit-filter: custom(url(shader.vs) mix(url(shader.fs) multiply source-atop), 2 2 border-box, transform perspective(1000) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg), t 1, mapDepth 5, useColoredBack 1, backColor 1 1 1 1, direction 0, shadow 0);
}
}
@-webkit-keyframes unfold {
from {
- -webkit-filter: custom(url(shader.vs) mix(url(shader.fs) multiply source-atop), 4 4 border-box, transform perspective(1000) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg), t 1, mapDepth 10, useColoredBack 1, backColor 1 1 1 1, direction 0, shadow 0);
+ -webkit-filter: custom(url(shader.vs) mix(url(shader.fs) multiply source-atop), 2 2 border-box, transform perspective(1000) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg), t 1, mapDepth 5, useColoredBack 1, backColor 1 1 1 1, direction 0, shadow 0);
}
to {
- -webkit-filter: custom(url(shader.vs) mix(url(shader.fs) multiply source-atop), 4 4 border-box, transform perspective(1000) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg), t 0, mapDepth 10, useColoredBack 1, backColor 1 1 1 1, direction 0, shadow 0);
+ -webkit-filter: custom(url(shader.vs) mix(url(shader.fs) multiply source-atop), 2 2 border-box, transform perspective(1000) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg), t 0, mapDepth 5, useColoredBack 1, backColor 1 1 1 1, direction 0, shadow 0);
}
}
.doBelowFold {
- -webkit-animation-duration: 0.15s;
+ -webkit-animation-duration: 0.4s;
-webkit-animation-name: slideUp;
-webkit-animation-fill-mode: forwards;
- -webkit-animation-timing-function: linear;
+ -webkit-animation-timing-function: ease-in;
}
.doBelowUnfold {
- -webkit-animation-duration: 0.15s;
+ -webkit-animation-duration: 0.4s;
-webkit-animation-name: slideDown;
-webkit-animation-fill-mode: forwards;
- -webkit-animation-timing-function: linear;
+ -webkit-animation-timing-function: ease-in;
}
@-webkit-keyframes slideUp {
@@ -105,17 +105,17 @@
}
.collapse {
- -webkit-animation-duration: 0.15s;
+ -webkit-animation-duration: 0.4s;
-webkit-animation-name: collapse;
-webkit-animation-fill-mode: forwards;
- -webkit-animation-timing-function: linear;
+ -webkit-animation-timing-function: ease-in;
}
.expand {
- -webkit-animation-duration: 0.15s;
+ -webkit-animation-duration: 0.4s;
-webkit-animation-name: expand;
-webkit-animation-fill-mode: forwards;
- -webkit-animation-timing-function: linear;
+ -webkit-animation-timing-function: ease-in;
}
@-webkit-keyframes collapse {
Please sign in to comment.
Something went wrong with that request. Please try again.