Flat Surface Shader Earth

Developer
Daniel Yuschick
Size
2,075 Kb
Views
24,288
  1. Flat Surface Shader Earth Previews
  2. Flat Surface Shader Earth HTML Codes
  3. Flat Surface Shader Earth CSS Codes
  4. Flat Surface Shader Earth JS Codes

How do I make an 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.. What is a flat surface shader earth? How do you make a flat surface shader earth? This script and codes were developed by Daniel Yuschick on 25 September 2022, Sunday.

Flat Surface Shader Earth Previews
IQ Test

Flat Surface Shader Earth - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Flat Surface Shader Earth</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <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 src='https://www.danyuschick.com/codepen/earth/js/prefixfree.min.js'></script>
<script src='https://www.danyuschick.com/codepen/earth/js/dat.gui.min.js'></script>
<script src='https://www.danyuschick.com/codepen/earth/js/fss.js'></script>
<script src='https://www.danyuschick.com/codepen/earth/js/example.js'></script> <script src="js/index.js"></script>
</body>
</html>

Flat Surface Shader Earth - Script Codes CSS Codes

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(https://www.danyuschick.com/codepen/earth/BG.png) no-repeat center center;
}
.planet-land { width: 100%; height: 768px; background: url(https://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(https://www.danyuschick.com/codepen/earth/shadow.png) no-repeat center center;
}

Flat Surface Shader Earth - Script Codes JS Codes

/*
Matthew Wagerfield http://matthew.wagerfield.com/flat-surface-shader/
*/
Flat Surface Shader Earth - Script Codes
Flat Surface Shader Earth - Script Codes
Home Page Home
Developer Daniel Yuschick
Username Yuschick
Uploaded September 25, 2022
Rating 4.5
Size 2,075 Kb
Views 24,288
Do you need developer help for Flat Surface Shader Earth?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Daniel Yuschick (Yuschick) Script Codes
Name
Pac Manufacturing Ghost Generator
IBM PureSystems - PureApp Emulator
Archer Pirate Virus - Snap SVG Demo
Ripples on the Water - Website Design
Perrelet Turbine in SVGs
Interactive HTML5 Video Demo
Responsive Diamond Navigation
SnapFoo v2 Demo - Loop a Group of Elements Along a Path
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!