Flat Surface Shader Earth

Flat Surface Shader Earth.markdown

Flat Surface Shader Earth

Leveraging the incredible flat surface shader from Matthew Wagerfield (http://matthew.wagerfield.com/flat-surface-shader/), this demo uses simple image (for the time being) masks to create a low-poly earth with animated water. Looking forward to taking this idea and masking concept further.

A Pen by Daniel Yuschick on CodePen.

License.

index.html

<div id="container" class="container">
  <div class="planet-bg">
    <div class="planet-land"></div>
    <div class="planet-shadow"></div>
  </div>
  <div id="output" class="container">
  </div>
  <div id="controls" style="display: none;">
  </div>

script.js

/* 
Matthew Wagerfield http://matthew.wagerfield.com/flat-surface-shader/
*/

scripts

<script src="http://www.danyuschick.com/codepen/earth/js/prefixfree.min.js"></script>
<script src="http://www.danyuschick.com/codepen/earth/js/dat.gui.min.js"></script>
<script src="http://www.danyuschick.com/codepen/earth/js/fss.js"></script>
<script src="http://www.danyuschick.com/codepen/earth/js/example.js"></script>

style.css

body {
  -webkit-font-smoothing: antialiased;
    padding: 0;
    margin: 0;
}
.container {
  position: relative;
  height: 768px;
  width: 1024px;
}
.planet-bg {
    position: absolute;
    z-index: 2;
    height: 768px;
    width: 100%;
    background: url(http://www.danyuschick.com/codepen/earth/BG.png) no-repeat center center;
}
.planet-land {
    width: 100%;
    height: 768px;
    background: url(http://www.danyuschick.com/codepen/earth/landMass.png) no-repeat center center;
}
.planet-shadow {
    position: absolute;
    top: 0;
    z-index: 2;
    width: 100%;
    height: 768px;
    background: url(http://www.danyuschick.com/codepen/earth/shadow.png) no-repeat center center;
}