EffectHub.com: your best source for gaming

Recommendation

More Effects...

"use strict";"object"!=typeof window.CP&&(window.CP={}),window.CP.PenTimer={programNoLongerBeingMonitored:!1,timeOfFirstCallToShouldStopLoop:0,_loopExits:{},_loopTimers:{},START_MONITORING_AFTER:2e3,STOP_ALL_MONITORING_TIMEOUT:5e3,MAX_TIME_IN_LOOP_WO_EXIT:2200,exitedLoop:function(o){this._loopExits[o]=!0},shouldStopLoop:function(o){if(this.programKilledSoStopMonitoring)return!0;if(this.programNoLongerBeingMonitored)return!1;if(this._loopExits[o])return!1;var t=this._getTime();if(0===this.timeOfFirstCallToShouldStopLoop)return this.timeOfFirstCallToShouldStopLoop=t,!1;var i=t-this.timeOfFirstCallToShouldStopLoop;if(i<this.START_MONITORING_AFTER)return!1;if(i>this.STOP_ALL_MONITORING_TIMEOUT)return this.programNoLongerBeingMonitored=!0,!1;try{this._checkOnInfiniteLoop(o,t)}catch(o){return this._sendErrorMessageToEditor(),this.programKilledSoStopMonitoring=!0,!0}return!1},_sendErrorMessageToEditor:function(){try{if(this._shouldPostMessage()){var o={action:"infinite-loop",line:this._findAroundLineNumber()};parent.postMessage(JSON.stringify(o),"*")}else this._throwAnErrorToStopPen()}catch(o){this._throwAnErrorToStopPen()}},_shouldPostMessage:function(){return document.location.href.match(/boomerang/)},_throwAnErrorToStopPen:function(){throw"We found an infinite loop in your Pen. We've stopped the Pen from running. Please correct it or contact support@codepen.io."},_findAroundLineNumber:function(){var o=new Error,t=0;if(o.stack){var i=o.stack.match(/boomerang\S+:(\d+):\d+/);i&&(t=i[1])}return t},_checkOnInfiniteLoop:function(o,t){if(!this._loopTimers[o])return this._loopTimers[o]=t,!1;var i=t-this._loopTimers[o];if(i>this.MAX_TIME_IN_LOOP_WO_EXIT)throw"Infinite Loop found on loop: "+o},_getTime:function(){return+new Date}},window.CP.shouldStopExecution=function(o){var t=window.CP.PenTimer.shouldStopLoop(o);return t===!0&&console.warn("[CodePen]: An infinite loop (or a loop taking too long) was detected, so we stopped its execution. Sorry!"),t},window.CP.exitedLoop=function(o){window.CP.PenTimer.exitedLoop(o)};
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) {if (window.CP.shouldStopExecution(1)){break;} var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); }
window.CP.exitedLoop(1);
 } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var computeFaceNormal = function computeFaceNormal(v0, v1, v2) {
  var n = [];
  var v1a = [v1[0] - v0[0], v1[1] - v0[1], v1[2] - v0[2]];
  var v2a = [v2[0] - v0[0], v2[1] - v0[1], v2[2] - v0[2]];
  n[0] = v1a[1] * v2a[2] - v1a[2] * v2a[1];
  n[1] = v1a[2] * v2a[0] - v1a[0] * v2a[2];
  n[2] = v1a[0] * v2a[1] - v1a[1] * v2a[0];
  var l = Math.sqrt(n[0] * n[0] + n[1] * n[1] + n[2] * n[2], 2);
  for (var i = 0; i < n.length; i++) {if (window.CP.shouldStopExecution(2)){break;}
    n[i] = n[i] / l;
  }
window.CP.exitedLoop(2);

return n;
};

var SkyOctahedron = function () {
  function SkyOctahedron() {
    _classCallCheck(this, SkyOctahedron);

this.uniforms = {
      time: {
        type: 'f',
        value: 0
      }
    };
    this.obj = this.createObj();
  }

_createClass(SkyOctahedron, [{
    key: 'createObj',
    value: function createObj() {
      var geometry = new THREE.OctahedronBufferGeometry(90, 4);
      var positions = geometry.attributes.position.array;
      var faceNormalsBase = [];
      var centersBase = [];
      var delaysBase = [];
      for (var i = 0; i < positions.length; i += 9) {if (window.CP.shouldStopExecution(3)){break;}
        var n = computeFaceNormal([positions[i + 0], positions[i + 1], positions[i + 2]], [positions[i + 3], positions[i + 4], positions[i + 5]], [positions[i + 6], positions[i + 7], positions[i + 8]]);
        faceNormalsBase.push(n[0], n[1], n[2], n[0], n[1], n[2], n[0], n[1], n[2]);
        var c = [(positions[i + 0] + positions[i + 3] + positions[i + 6]) / 3, (positions[i + 1] + positions[i + 4] + positions[i + 7]) / 3, (positions[i + 2] + positions[i + 5] + positions[i + 8]) / 3];
        var delay = Math.random() * 0.5;
        centersBase.push(c[0], c[1], c[2], c[0], c[1], c[2], c[0], c[1], c[2]);
        delaysBase.push(delay, delay, delay);
      }
window.CP.exitedLoop(3);

return SkyOctahedron;
}();

var SkyOctahedronShell = function () {
  function SkyOctahedronShell() {
    _classCallCheck(this, SkyOctahedronShell);

this.uniforms = {
      time: {
        type: 'f',
        value: 0
      }
    };
    this.obj = this.createObj();
  }

_createClass(SkyOctahedronShell, [{
    key: 'createObj',
    value: function createObj() {
      var geometry = new THREE.OctahedronBufferGeometry(150, 4);
      return new THREE.Mesh(geometry, new THREE.RawShaderMaterial({
        uniforms: this.uniforms,
        vertexShader: document.getElementById('vs-shell').textContent,
        fragmentShader: document.getElementById('fs-shell').textContent,
        transparent: true,
        side: THREE.DoubleSide,
        depthWrite: false
      }));
    }
  }, {
    key: 'render',
    value: function render(time) {
      this.uniforms.time.value += time;
    }
  }]);

return SkyOctahedronShell;
}();

var canvas = document.getElementById('canvas-webgl');
var renderer = new THREE.WebGLRenderer({
  antialias: false,
  canvas: canvas
});
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);
var clock = new THREE.Clock();

var skyOctahedron = new SkyOctahedron();
var skyOctahedronShell = new SkyOctahedronShell();

var init = function init() {
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setClearColor(0x111111, 1.0);
  camera.position.set(0, 400, 600);
  camera.lookAt(new THREE.Vector3());

scene.add(skyOctahedron.obj);
  scene.add(skyOctahedronShell.obj);
  on();
  resizeWindow();
  renderLoop();
};
init();

CSS

HTML

Recommendation

Join Effecthub.com