[sun-sky] add sunSky shader and <a-sun-sky>

vinutv · Sep 20, 2016 · 10df598 · 10df598
1 parent d816dcc
commit 10df598
Show file tree

Hide file tree

Showing 31 changed files with 469 additions and 20 deletions.
diff --git a/README.md b/README.md
@@ -19,6 +19,7 @@ Kevin's collection of A-Frame components and scenes.
 - [mountain](https:/github.com/ngokevin/kframe/tree/master/components/mountain/) - Mountain terrain in A-Frame using randomly-generated height maps
 - [randomizer](https:/github.com/ngokevin/kframe/tree/master/components/randomizer/) - Randomize color, position, rotation, and scale in A-Frame
 - [redux](https:/github.com/ngokevin/kframe/tree/master/components/redux/) - Hook in Redux reducers, data bindings, and action dispatches for A-Frame
+- [sun-sky](https:/github.com/ngokevin/kframe/tree/master/components/sun-sky/) - Gradient sky with adjustable sun in A-Frame
 - [template](https:/github.com/ngokevin/kframe/tree/master/components/template/) - Encapsulate groups of entities, use templating engines, and do string interpolations in A-Frame
 - [text](https:/github.com/ngokevin/kframe/tree/master/components/text/) - Geometry-based text in A-Frame
 
@@ -35,6 +36,7 @@ K-Frame bundles some components together to `kframe.js` for convenience:
 - look-at
 - mountain
 - randomizer
+- sun-sky
 - template
 - text
 

diff --git a/components/animation/index.html b/components/animation/index.html
@@ -1,6 +1,6 @@
 <html>
   <head>
-    <title>A-Frame  Component</title>
+    <title>A-Frame animation Component</title>
     <meta name="description" content=""></meta>
     <style>
       html {

diff --git a/components/audio-visualizer/index.html b/components/audio-visualizer/index.html
@@ -1,6 +1,6 @@
 <html>
   <head>
-    <title>A-Frame  Component</title>
+    <title>A-Frame audio-visualizer Component</title>
     <meta name="description" content=""></meta>
     <style>
       html {

diff --git a/components/broadcast/index.html b/components/broadcast/index.html
@@ -1,6 +1,6 @@
 <html>
   <head>
-    <title>A-Frame  Component</title>
+    <title>A-Frame broadcast Component</title>
     <meta name="description" content=""></meta>
     <style>
       html {

diff --git a/components/entity-generator/index.html b/components/entity-generator/index.html
@@ -1,6 +1,6 @@
 <html>
   <head>
-    <title>A-Frame  Component</title>
+    <title>A-Frame entity-generator Component</title>
     <meta name="description" content=""></meta>
     <style>
       html {

diff --git a/components/event-set/index.html b/components/event-set/index.html
@@ -1,6 +1,6 @@
 <html>
   <head>
-    <title>A-Frame  Component</title>
+    <title>A-Frame event-set Component</title>
     <meta name="description" content=""></meta>
     <style>
       html {

diff --git a/components/firebase/index.html b/components/firebase/index.html
@@ -1,6 +1,6 @@
 <html>
   <head>
-    <title>A-Frame  Component</title>
+    <title>A-Frame firebase Component</title>
     <meta name="description" content=""></meta>
     <style>
       html {

diff --git a/components/layout/index.html b/components/layout/index.html
@@ -1,6 +1,6 @@
 <html>
   <head>
-    <title>A-Frame  Component</title>
+    <title>A-Frame layout Component</title>
     <meta name="description" content=""></meta>
     <style>
       html {

diff --git a/components/look-at/index.html b/components/look-at/index.html
@@ -1,6 +1,6 @@
 <html>
   <head>
-    <title>A-Frame  Component</title>
+    <title>A-Frame look-at Component</title>
     <meta name="description" content=""></meta>
     <style>
       html {

diff --git a/components/mountain/index.html b/components/mountain/index.html
@@ -1,6 +1,6 @@
 <html>
   <head>
-    <title>A-Frame  Component</title>
+    <title>A-Frame mountain Component</title>
     <meta name="description" content=""></meta>
     <style>
       html {

diff --git a/components/randomizer/index.html b/components/randomizer/index.html
@@ -1,6 +1,6 @@
 <html>
   <head>
-    <title>A-Frame  Component</title>
+    <title>A-Frame randomizer Component</title>
     <meta name="description" content=""></meta>
     <style>
       html {

diff --git a/components/redux/index.html b/components/redux/index.html
@@ -1,6 +1,6 @@
 <html>
   <head>
-    <title>A-Frame  Component</title>
+    <title>A-Frame redux Component</title>
     <meta name="description" content=""></meta>
     <style>
       html {

diff --git a/components/sun-sky/README.md b/components/sun-sky/README.md
@@ -0,0 +1,36 @@
+## aframe-sky-shader
+
+### Usage
+
+#### Browser Installation
+
+Install and use by directly including the [browser files](dist):
+
+```html
+<head>
+  <title>My A-Frame Scene</title>
+  <script src="https://aframe.io/releases/0.3.0/aframe.min.js"></script>
+  <script src="https://rawgit.com/ngokevin/kframe/tree/master/components/sun-sky/dist/aframe-sun-sky.min.js"></script>
+</head>
+
+<body>
+  <a-scene>
+    <a-sun-sky></a-sun-sky>
+  </a-scene>
+</body>
+```
+
+#### NPM Installation
+
+Install via NPM:
+
+```bash
+npm install aframe-sun-sky
+```
+
+Then register and use.
+
+```js
+require('aframe');
+require('aframe-sun-sky');
+```
diff --git a/components/sun-sky/examples/basic/index.html b/components/sun-sky/examples/basic/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Basic</title>
+    <meta name="description" content="Basic <a-sun-sky>">
+    <script src="../build.js"></script>
+  </head>
+  <body>
+    <a-scene>
+      <a-sun-sky></a-sun-sky>
+    </a-scene>
+  </body>
+</html>
diff --git a/components/sun-sky/examples/build.js b/components/sun-sky/examples/build.js
diff --git a/components/sun-sky/examples/main.js b/components/sun-sky/examples/main.js
@@ -0,0 +1,2 @@
+require('aframe');
+require('../index.js');
diff --git a/components/sun-sky/examples/sun-position/index.html b/components/sun-sky/examples/sun-position/index.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Sun Position</title>
+    <meta name="description" content="Animating sun position">
+    <script src="../build.js"></script>
+  </head>
+  <body>
+    <script>
+      AFRAME.registerComponent('sun-position-setter', {
+        init: function () {
+          var skyEl = this.el;
+          var orbitEl = this.el.sceneEl.querySelector('#orbit');
+
+          orbitEl.addEventListener('componentchanged', function changeSun (evt) {
+            var sunPosition;
+            var phi;
+            var theta;
+
+            if (evt.detail.name !== 'rotation') { return; }
+
+            sunPosition = orbitEl.getComputedAttribute('rotation');
+
+            if(sunPosition === null) { return; }
+
+            theta = Math.PI * (- 0.5);
+            phi = 2 * Math.PI * (sunPosition.y / 360 - 0.5);
+            skyEl.setAttribute('material', 'sunPosition', {
+              x: Math.cos(phi),
+              y: Math.sin(phi) * Math.sin(theta),
+              z: -1
+            });
+          });
+        }
+      });
+    </script>
+
+    <a-scene>
+      <a-sun-sky sun-position-setter>
+        <a-entity id="orbit">
+          <a-animation attribute="rotation" from="0 0 0" to="0 360 0" dur="5000"
+                       repeat="indefinite" easing="linear"></a-animation>
+        </a-entity>
+      </a-sun-sky>
+    </a-scene>
+  </body>
+</html>
diff --git a/components/sun-sky/index.html b/components/sun-sky/index.html
@@ -0,0 +1,67 @@
+<html>
+  <head>
+    <title>A-Frame sun-sky Component</title>
+    <meta name="description" content=""></meta>
+    <style>
+      html {
+        background: #497285;
+        color: #DFEBED;
+        font-family: monospace;
+        font-size: 20px;
+        padding: 10px 20px;
+      }
+      h1, h2 {
+        font-weight: 300;
+      }
+      h1 a {
+        color: #DFEBED;
+        text-decoration: none;
+      }
+      ul {
+        list-style: none;
+      }
+      a {
+        color: #F78536;
+        display: inline-block;
+        padding: 5px 0;
+        transition: all .1s;
+      }
+      a:hover {
+        color: #2B4450;
+      }
+    </style>
+  </head>
+  <body>
+    <h1><i>sun-sky</i> Component for <a href="https://aframe.io">A-Frame</a></h1>
+
+    <p>Gradient sky with adjustable sun in A-Frame</p>
+
+    <h2>Examples</h2>
+
+    <ul>
+
+        <li>
+          <a href="examples/basic/">Basic</a>
+          <span>Basic &lt;a-sun-sky&gt;</span>
+        </li>
+
+        <li>
+          <a href="examples/sun-position/">Sun Position</a>
+          <span>Animating sun position</span>
+        </li>
+
+    </ul>
+
+    <p class="back">
+      <a href="https://ngokevin.github.io/kframe/">&laquo; Back to K-Frame</a>
+    </p>
+
+    <!-- GitHub Corner. -->
+    <a href="https:/github.com/ngokevin/kframe/tree/master/components/sun-sky/" class="github-corner">
+      <svg width="80" height="80" viewBox="0 0 250 250" style="fill:#2B4450; color:#DFEBED; position: absolute; top: 0; border: 0; right: 0;">
+        <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path>
+      </svg>
+    </a>
+    <style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}
+  </body>
+</html>
diff --git a/components/sun-sky/index.js b/components/sun-sky/index.js
@@ -0,0 +1,39 @@
+var vertexShader = require('./shaders/vertex.glsl');
+var fragmentShader = require('./shaders/fragment.glsl');
+
+AFRAME.registerShader('sunSky', {
+  schema: {
+    luminance: {default: 1, max: 0, min: 2, is: 'uniform'},
+    mieCoefficient: {default: 0.005, min: 0, max: 0.1, is: 'uniform'},
+    mieDirectionalG: {default: 0.8, min: 0, max: 1, is: 'uniform'},
+    reileigh: {default: 1, max: 0, min: 4, is: 'uniform'},
+    sunPosition: {type: 'vec3', default: '0 0 -1', is: 'uniform'},
+    turbidity: {default: 2, max: 0, min: 20, is: 'uniform'}
+  },
+  vertexShader: vertexShader,
+  fragmentShader: fragmentShader
+});
+
+AFRAME.registerPrimitive('a-sun-sky', {
+  defaultComponents: {
+    geometry: {
+      primitive: 'sphere',
+      radius: 5000,
+      segmentsWidth: 64,
+      segmentsHeight: 20
+    },
+    material: {
+      shader: 'sunSky'
+    },
+    scale: '-1 1 1'
+  },
+
+  mappings: {
+    luminance: 'material.luminance',
+    mieCoefficient: 'material.mieCoefficient',
+    mieDirectionalG: 'material.mieDirectionalG',
+    reileigh: 'material.reileigh',
+    sunPosition: 'material.sunPosition',
+    turbidity: 'material.turbidity'
+  }
+});
diff --git a/components/sun-sky/package.json b/components/sun-sky/package.json
@@ -0,0 +1,31 @@
+{
+  "name": "aframe-sun-sky",
+  "version": "3.0.0",
+  "description": "Gradient sky with adjustable sun in A-Frame",
+  "main": "index.js",
+  "scripts": {
+    "postpublish": "npm run dist"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ngokevin/kframe.git"
+  },
+  "keywords": [
+    "aframe",
+    "aframe-component",
+    "aframe-shader",
+    "aframe-vr",
+    "vr",
+    "mozvr",
+    "webvr"
+  ],
+  "author": "Kevin Ngo <[email protected]>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/ngokevin/kframe/issues"
+  },
+  "homepage": "https://github.com/ngokevin/kframe/tree/components/sun-sky#readme",
+  "devDependencies": {
+    "aframe": "^0.3.0"
+  }
+}