EffectHub.com: your best source for gaming

Recommendation

More Effects...

(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
var Util = require('./util');
var util = new Util();

return Camera;
};

module.exports = exports();

},{"./util":8}],2:[function(require,module,exports){
module.exports = function(object, eventType, callback){
  var timer;

object.addEventListener(eventType, function(event) {
    clearTimeout(timer);
    timer = setTimeout(function(){
      callback(event);
    }, 500);
  }, false);
};

},{}],3:[function(require,module,exports){
var Util = require('./util');
var util = new Util();

module.exports = exports();

},{"./util":8}],4:[function(require,module,exports){
/**
 * @author Eberhard Graether / http://egraether.com/
 * @author Mark Lundin  / http://mark-lundin.com
 * @author Simone Manini / http://daron1337.github.io
 * @author Luca Antiga  / http://lantiga.github.io
 */

THREE.TrackballControls = function ( object, domElement ) {

var _this = this;
  var STATE = { NONE: -1, ROTATE: 0, ZOOM: 1, PAN: 2, TOUCH_ROTATE: 3, TOUCH_ZOOM_PAN: 4 };

this.object = object;
  this.domElement = ( domElement !== undefined ) ? domElement : document;

// API

this.enabled = true;

this.screen = { left: 0, top: 0, width: 0, height: 0 };

this.rotateSpeed = 1.0;
  this.zoomSpeed = 1.2;
  this.panSpeed = 0.3;

this.noRotate = false;
  this.noZoom = false;
  this.noPan = false;

this.staticMoving = false;
  this.dynamicDampingFactor = 0.2;

this.minDistance = 0;
  this.maxDistance = Infinity;

this.keys = [ 65 /*A*/, 83 /*S*/, 68 /*D*/ ];

// internals

this.target = new THREE.Vector3();

var EPS = 0.000001;

var lastPosition = new THREE.Vector3();

var _state = STATE.NONE,
  _prevState = STATE.NONE,

_eye = new THREE.Vector3(),

_movePrev = new THREE.Vector2(),
  _moveCurr = new THREE.Vector2(),

_lastAxis = new THREE.Vector3(),
  _lastAngle = 0,

_zoomStart = new THREE.Vector2(),
  _zoomEnd = new THREE.Vector2(),

_touchZoomDistanceStart = 0,
  _touchZoomDistanceEnd = 0,

_panStart = new THREE.Vector2(),
  _panEnd = new THREE.Vector2();

// for reset

this.target0 = this.target.clone();
  this.position0 = this.object.position.clone();
  this.up0 = this.object.up.clone();

// events

var changeEvent = { type: 'change' };
  var startEvent = { type: 'start' };
  var endEvent = { type: 'end' };

// methods

this.handleResize = function () {

if ( this.domElement === document ) {

this.screen.left = 0;
      this.screen.top = 0;
      this.screen.width = window.innerWidth;
      this.screen.height = window.innerHeight;

} else {

var box = this.domElement.getBoundingClientRect();
      // adjustments come from similar code in the jquery offset() function
      var d = this.domElement.ownerDocument.documentElement;
      this.screen.left = box.left + window.pageXOffset - d.clientLeft;
      this.screen.top = box.top + window.pageYOffset - d.clientTop;
      this.screen.width = box.width;
      this.screen.height = box.height;

}

};

this.handleEvent = function ( event ) {

if ( typeof this[ event.type ] == 'function' ) {

this[ event.type ]( event );

}

};

var getMouseOnScreen = ( function () {

var vector = new THREE.Vector2();

return function ( pageX, pageY ) {

vector.set(
        ( pageX - _this.screen.left ) / _this.screen.width,
        ( pageY - _this.screen.top ) / _this.screen.height
      );

return vector;

};

}() );

var getMouseOnCircle = ( function () {

var vector = new THREE.Vector2();

return function ( pageX, pageY ) {

vector.set(
        ( ( pageX - _this.screen.width * 0.5 - _this.screen.left ) / ( _this.screen.width * 0.5 ) ),
        ( ( _this.screen.height + 2 * ( _this.screen.top - pageY ) ) / _this.screen.width ) // screen.width intentional
      );

return vector;
    };

}() );

this.rotateCamera = (function() {

var axis = new THREE.Vector3(),
      quaternion = new THREE.Quaternion(),
      eyeDirection = new THREE.Vector3(),
      objectUpDirection = new THREE.Vector3(),
      objectSidewaysDirection = new THREE.Vector3(),
      moveDirection = new THREE.Vector3(),
      angle;

return function () {

moveDirection.set( _moveCurr.x - _movePrev.x, _moveCurr.y - _movePrev.y, 0 );
      angle = moveDirection.length();

if ( angle ) {

_eye.copy( _this.object.position ).sub( _this.target );

eyeDirection.copy( _eye ).normalize();
        objectUpDirection.copy( _this.object.up ).normalize();
        objectSidewaysDirection.crossVectors( objectUpDirection, eyeDirection ).normalize();

objectUpDirection.setLength( _moveCurr.y - _movePrev.y );
        objectSidewaysDirection.setLength( _moveCurr.x - _movePrev.x );

moveDirection.copy( objectUpDirection.add( objectSidewaysDirection ) );

axis.crossVectors( moveDirection, _eye ).normalize();

angle *= _this.rotateSpeed;
        quaternion.setFromAxisAngle( axis, angle );

_eye.applyQuaternion( quaternion );
        _this.object.up.applyQuaternion( quaternion );

_lastAxis.copy( axis );
        _lastAngle = angle;

}

else if ( !_this.staticMoving && _lastAngle ) {

_lastAngle *= Math.sqrt( 1.0 - _this.dynamicDampingFactor );
        _eye.copy( _this.object.position ).sub( _this.target );
        quaternion.setFromAxisAngle( _lastAxis, _lastAngle );
        _eye.applyQuaternion( quaternion );
        _this.object.up.applyQuaternion( quaternion );

}

_movePrev.copy( _moveCurr );

};

}());

this.zoomCamera = function () {

var factor;

if ( _state === STATE.TOUCH_ZOOM_PAN ) {

factor = _touchZoomDistanceStart / _touchZoomDistanceEnd;
      _touchZoomDistanceStart = _touchZoomDistanceEnd;
      _eye.multiplyScalar( factor );

} else {

factor = 1.0 + ( _zoomEnd.y - _zoomStart.y ) * _this.zoomSpeed;

if ( factor !== 1.0 && factor > 0.0 ) {

_eye.multiplyScalar( factor );

if ( _this.staticMoving ) {

_zoomStart.copy( _zoomEnd );

} else {

_zoomStart.y += ( _zoomEnd.y - _zoomStart.y ) * this.dynamicDampingFactor;

}

};

this.panCamera = (function() {

var mouseChange = new THREE.Vector2(),
      objectUp = new THREE.Vector3(),
      pan = new THREE.Vector3();

return function () {

mouseChange.copy( _panEnd ).sub( _panStart );

if ( mouseChange.lengthSq() ) {

mouseChange.multiplyScalar( _eye.length() * _this.panSpeed );

pan.copy( _eye ).cross( _this.object.up ).setLength( mouseChange.x );
        pan.add( objectUp.copy( _this.object.up ).setLength( mouseChange.y ) );

_this.object.position.add( pan );
        _this.target.add( pan );

if ( _this.staticMoving ) {

_panStart.copy( _panEnd );

} else {

_panStart.add( mouseChange.subVectors( _panEnd, _panStart ).multiplyScalar( _this.dynamicDampingFactor ) );

}

}
    };

}());

this.checkDistances = function () {

if ( !_this.noZoom || !_this.noPan ) {

if ( _eye.lengthSq() > _this.maxDistance * _this.maxDistance ) {

_this.object.position.addVectors( _this.target, _eye.setLength( _this.maxDistance ) );

}

if ( _eye.lengthSq() < _this.minDistance * _this.minDistance ) {

_this.object.position.addVectors( _this.target, _eye.setLength( _this.minDistance ) );

}

};

this.update = function () {

_eye.subVectors( _this.object.position, _this.target );

if ( !_this.noRotate ) {

_this.rotateCamera();

}

if ( !_this.noZoom ) {

_this.zoomCamera();

}

if ( !_this.noPan ) {

_this.panCamera();

}

_this.object.position.addVectors( _this.target, _eye );

_this.checkDistances();

_this.object.lookAt( _this.target );

if ( lastPosition.distanceToSquared( _this.object.position ) > EPS ) {

_this.dispatchEvent( changeEvent );

lastPosition.copy( _this.object.position );

}

};

this.reset = function () {

_state = STATE.NONE;
    _prevState = STATE.NONE;

_this.target.copy( _this.target0 );
    _this.object.position.copy( _this.position0 );
    _this.object.up.copy( _this.up0 );

_eye.subVectors( _this.object.position, _this.target );

_this.object.lookAt( _this.target );

_this.dispatchEvent( changeEvent );

lastPosition.copy( _this.object.position );

};

// listeners

function keydown( event ) {

if ( _this.enabled === false ) return;

window.removeEventListener( 'keydown', keydown );

_prevState = _state;

if ( _state !== STATE.NONE ) {

return;

} else if ( event.keyCode === _this.keys[ STATE.ROTATE ] && !_this.noRotate ) {

_state = STATE.ROTATE;

} else if ( event.keyCode === _this.keys[ STATE.ZOOM ] && !_this.noZoom ) {

_state = STATE.ZOOM;

} else if ( event.keyCode === _this.keys[ STATE.PAN ] && !_this.noPan ) {

_state = STATE.PAN;

}

function keyup( event ) {

if ( _this.enabled === false ) return;

_state = _prevState;

window.addEventListener( 'keydown', keydown, false );

}

function mousedown( event ) {

if ( _this.enabled === false ) return;

event.preventDefault();
    event.stopPropagation();

if ( _state === STATE.NONE ) {

_state = event.button;

}

if ( _state === STATE.ROTATE && !_this.noRotate ) {

_moveCurr.copy( getMouseOnCircle( event.pageX, event.pageY ) );
      _movePrev.copy(_moveCurr);

} else if ( _state === STATE.ZOOM && !_this.noZoom ) {

_zoomStart.copy( getMouseOnScreen( event.pageX, event.pageY ) );
      _zoomEnd.copy(_zoomStart);

} else if ( _state === STATE.PAN && !_this.noPan ) {

_panStart.copy( getMouseOnScreen( event.pageX, event.pageY ) );
      _panEnd.copy(_panStart);

}

document.addEventListener( 'mousemove', mousemove, false );
    document.addEventListener( 'mouseup', mouseup, false );

_this.dispatchEvent( startEvent );

}

function mousemove( event ) {

if ( _this.enabled === false ) return;

event.preventDefault();
    event.stopPropagation();

if ( _state === STATE.ROTATE && !_this.noRotate ) {

_movePrev.copy(_moveCurr);
      _moveCurr.copy( getMouseOnCircle( event.pageX, event.pageY ) );

} else if ( _state === STATE.ZOOM && !_this.noZoom ) {

_zoomEnd.copy( getMouseOnScreen( event.pageX, event.pageY ) );

} else if ( _state === STATE.PAN && !_this.noPan ) {

_panEnd.copy( getMouseOnScreen( event.pageX, event.pageY ) );

}

function mouseup( event ) {

if ( _this.enabled === false ) return;

event.preventDefault();
    event.stopPropagation();

_state = STATE.NONE;

document.removeEventListener( 'mousemove', mousemove );
    document.removeEventListener( 'mouseup', mouseup );
    _this.dispatchEvent( endEvent );

}

function mousewheel( event ) {

if ( _this.enabled === false ) return;

event.preventDefault();
    event.stopPropagation();

var delta = 0;

if ( event.wheelDelta ) { // WebKit / Opera / Explorer 9

delta = event.wheelDelta / 40;

} else if ( event.detail ) { // Firefox

delta = - event.detail / 3;

}

_zoomStart.y += delta * 0.01;
    _this.dispatchEvent( startEvent );
    _this.dispatchEvent( endEvent );

}

function touchstart( event ) {

if ( _this.enabled === false ) return;

switch ( event.touches.length ) {

case 1:
        _state = STATE.TOUCH_ROTATE;
        _moveCurr.copy( getMouseOnCircle( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY ) );
        _movePrev.copy(_moveCurr);
        break;

case 2:
        _state = STATE.TOUCH_ZOOM_PAN;
        var dx = event.touches[ 0 ].pageX - event.touches[ 1 ].pageX;
        var dy = event.touches[ 0 ].pageY - event.touches[ 1 ].pageY;
        _touchZoomDistanceEnd = _touchZoomDistanceStart = Math.sqrt( dx * dx + dy * dy );

var x = ( event.touches[ 0 ].pageX + event.touches[ 1 ].pageX ) / 2;
        var y = ( event.touches[ 0 ].pageY + event.touches[ 1 ].pageY ) / 2;
        _panStart.copy( getMouseOnScreen( x, y ) );
        _panEnd.copy( _panStart );
        break;

default:
        _state = STATE.NONE;

}
    _this.dispatchEvent( startEvent );

}

function touchmove( event ) {

if ( _this.enabled === false ) return;

event.preventDefault();
    event.stopPropagation();

switch ( event.touches.length ) {

case 1:
        _movePrev.copy(_moveCurr);
        _moveCurr.copy( getMouseOnCircle(  event.touches[ 0 ].pageX, event.touches[ 0 ].pageY ) );
        break;

case 2:
        var dx = event.touches[ 0 ].pageX - event.touches[ 1 ].pageX;
        var dy = event.touches[ 0 ].pageY - event.touches[ 1 ].pageY;
        _touchZoomDistanceEnd = Math.sqrt( dx * dx + dy * dy );

var x = ( event.touches[ 0 ].pageX + event.touches[ 1 ].pageX ) / 2;
        var y = ( event.touches[ 0 ].pageY + event.touches[ 1 ].pageY ) / 2;
        _panEnd.copy( getMouseOnScreen( x, y ) );
        break;

default:
        _state = STATE.NONE;

}

function touchend( event ) {

if ( _this.enabled === false ) return;

switch ( event.touches.length ) {

case 1:
        _movePrev.copy(_moveCurr);
        _moveCurr.copy( getMouseOnCircle(  event.touches[ 0 ].pageX, event.touches[ 0 ].pageY ) );
        break;

case 2:
        _touchZoomDistanceStart = _touchZoomDistanceEnd = 0;

var x = ( event.touches[ 0 ].pageX + event.touches[ 1 ].pageX ) / 2;
        var y = ( event.touches[ 0 ].pageY + event.touches[ 1 ].pageY ) / 2;
        _panEnd.copy( getMouseOnScreen( x, y ) );
        _panStart.copy( _panEnd );
        break;

}

_state = STATE.NONE;
    _this.dispatchEvent( endEvent );

}

this.domElement.addEventListener( 'contextmenu', function ( event ) { event.preventDefault(); }, false );

this.domElement.addEventListener( 'mousedown', mousedown, false );

this.domElement.addEventListener( 'mousewheel', mousewheel, false );
  this.domElement.addEventListener( 'DOMMouseScroll', mousewheel, false ); // firefox

this.domElement.addEventListener( 'touchstart', touchstart, false );
  this.domElement.addEventListener( 'touchend', touchend, false );
  this.domElement.addEventListener( 'touchmove', touchmove, false );

window.addEventListener( 'keydown', keydown, false );
  window.addEventListener( 'keyup', keyup, false );

this.handleResize();

// force an update at start
  this.update();

};

THREE.TrackballControls.prototype = Object.create( THREE.EventDispatcher.prototype );
THREE.TrackballControls.prototype.constructor = THREE.TrackballControls;

},{}],5:[function(require,module,exports){
var Util = require('./util');
var util = new Util();
var debounce = require('./debounce');
var Camera = require('./camera');
var PointLight = require('./pointLight');
var HemiLight = require('./hemiLight');
var Mesh = require('./mesh');
var TrackBall = require('./lib/TrackballControls.js');

var body_width = document.body.clientWidth;
var body_height = document.body.clientHeight;
var fps = 60;
var last_time_render = Date.now();
var raycaster = new THREE.Raycaster();
var mouse_vector = new THREE.Vector2(-2, -2);
var intersects;

var canvas;
var renderer;
var scene;
var camera;
var light;

var controls;

var init = function() {
  initThree();
  
  camera = new Camera();
  camera.init(util.getRadian(40), util.getRadian(20), body_width, body_height);
  
  controls = new THREE.TrackballControls(camera.obj);
  controls.rotateSpeed = 2;
  
  light = new HemiLight();
  light.init(scene, util.getRadian(30), util.getRadian(60), 1000, 0xeeeeff, 0x777700, 1);
  
  var hannya_grid = 80;
  var hannya_text = '観自在菩薩 行深般若波羅蜜多時 照見五蘊皆空 度一切苦厄 舎利子 色不異空 空不異色 色即是空 空即是色 受想行識亦復如是 舎利子 是諸法空相 不生不滅 不垢不浄 不増不減 是故空中 無色無受想行識 無眼耳鼻舌身意 無色声香味触法 無眼界乃至無意識界 無無明亦無無明尽 乃至無老死 亦無老死尽 無苦集滅道 無智亦無得 以無所得故 菩提薩埵 依般若波羅蜜多故 心無罣礙 無罣礙故 無有恐怖 遠離一切顛倒夢想 究竟涅槃 三世諸仏 依般若波羅蜜多故 得阿耨多羅三藐三菩提 故知般若波羅蜜多 是大神呪 是大明呪 是無上呪 是無等等呪 能除一切苦 真実不虚 故説般若波羅蜜多呪 即説呪日 羯諦羯諦 波羅羯諦 波羅僧羯諦 菩提薩婆訶 般若心経';
  var hannya_length = hannya_text.length;
  var hannya_col_max = 15;
  var hannya_row_max = Math.ceil(hannya_length / hannya_col_max);
  var hannya_geometries = [];
  var hannya_materials = [];
  var hannya_particles = [];

for (var i = 0; i < hannya_row_max; i++) {
    var hannya_uniforms = {
      textures: {
        type: 'tv',
        value: []
      }
    };
    var hannya_attributes = {
      texture_index: {
        type: 'f',
        value: []
      },
      color: {
        type: 'c',
        value: []
      }
    };
    hannya_geometries[i] = new THREE.Geometry();
    hannya_materials[i] = new THREE.ShaderMaterial({
      uniforms: hannya_uniforms,
      attributes: hannya_attributes,
      vertexShader: document.getElementById('vertexShader').textContent,
      fragmentShader: document.getElementById('fragmentShader').textContent,
      transparent: true
    });
  }
  
  for (var i = 0; i < hannya_length; i++) {
    var row = Math.floor(i / hannya_col_max);
    var col = i % hannya_col_max;
    var geometry = hannya_geometries[row];
    var material = hannya_materials[row];
    var vertex = new THREE.Vector3();
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d', {alpha: false});
    var tex = new THREE.Texture(canvas);
    var str = hannya_text.substr(i, 1);
    var font_size = 100;
    
    canvas.width = font_size;
    canvas.height = font_size;
    ctx.fillStyle = '#ffffff';
    ctx.font = font_size + 'px "HG正楷書体-PRO"';
    ctx.fillText(str, 0, font_size - 10);
    tex = new THREE.Texture(canvas);
    tex.needsUpdate = true;
    
    vertex.x = col * hannya_grid - hannya_col_max * hannya_grid / 2;
    vertex.y = 0;
    vertex.z = row * hannya_grid - hannya_row_max * hannya_grid / 2;
    geometry.vertices.push(vertex);
    material.attributes.texture_index.value.push(Math.floor(i % hannya_col_max));
    material.attributes.color.value.push(new THREE.Color(0xeeeeee));
    material.uniforms.textures.value.push(tex);
    hannya_particles[row] = new THREE.PointCloud(geometry, material);
    scene.add(hannya_particles[row]);
  }
  
  renderloop();
  setEvent();
  debounce(window, 'resize', function(event){
    resizeRenderer();
  });
};

var setEvent = function () {
  var mouse_down = new THREE.Vector2();
  var mouse_move = new THREE.Vector2();

canvas.addEventListener('contextmenu', function (event) {
    event.preventDefault();
  });

canvas.addEventListener('selectstart', function (event) {
    event.preventDefault();
  });

canvas.addEventListener('mousedown', function (event) {
    event.preventDefault();
    eventTouchStart(event.clientX, event.clientY);
  });

canvas.addEventListener('mousemove', function (event) {
    event.preventDefault();
    eventTouchMove(event.clientX, event.clientY);
  });

canvas.addEventListener('mouseup', function (event) {
    event.preventDefault();
    eventTouchEnd();
  });

canvas.addEventListener('touchstart', function (event) {
    event.preventDefault();
    eventTouchStart(event.touches[0].clientX, event.touches[0].clientY);
  });

canvas.addEventListener('touchmove', function (event) {
    event.preventDefault();
    eventTouchMove(event.touches[0].clientX, event.touches[0].clientY);
  });

canvas.addEventListener('touchend', function (event) {
    event.preventDefault();
    eventTouchEnd();
  });
};

var render = function() {
  renderer.clear();
  controls.update(); 
  renderer.render(scene, camera.obj);
};

var renderloop = function() {
  var now = Date.now();
  requestAnimationFrame(renderloop);

if (now - last_time_render > 1000 / fps) {
    render();
    last_time_render = Date.now();
  }
};

var resizeRenderer = function() {
  body_width  = document.body.clientWidth;
  body_height = document.body.clientHeight;
  renderer.setSize(body_width, body_height);
  camera.init(util.getRadian(40), util.getRadian(20), body_width, body_height);
};

init();

},{"./camera":1,"./debounce":2,"./hemiLight":3,"./lib/TrackballControls.js":4,"./mesh":6,"./pointLight":7,"./util":8}],6:[function(require,module,exports){
var Util = require('./util');
var util = new Util();

var exports = function() {
  var Mesh = function() {
    this.id = 0;
    this.position = [0, 0, 0];
    this.geometry;
    this.material;
    this.mesh;
  };

Mesh.prototype.init = function(scene, geometry, material) {
    this.geometry = geometry;
    this.material = material;
    this.mesh = new THREE.Mesh(this.geometry, this.material);

this.id = this.mesh.id;
    this.setPosition();
  };

Mesh.prototype.setPosition = function() {
    this.mesh.position.set(this.position[0], this.position[1], this.position[2]);
  };
  
  return Mesh;
};

module.exports = exports();

},{"./util":8}],7:[function(require,module,exports){
var Util = require('./util');
var util = new Util();

module.exports = exports();

},{"./util":8}],8:[function(require,module,exports){
var exports = function(){
  var Util = function() {};
  
  Util.prototype.getRandomInt = function(min, max){
    return Math.floor(Math.random() * (max - min)) + min;
  };
  
  Util.prototype.getDegree = function(radian) {
    return radian / Math.PI * 180;
  };
  
  Util.prototype.getRadian = function(degrees) {
    return degrees * Math.PI / 180;
  };
  
  Util.prototype.getPointSphere = function(rad1, rad2, r) {
    var x = Math.cos(rad1) * Math.cos(rad2) * r;
    var z = Math.cos(rad1) * Math.sin(rad2) * r;
    var y = Math.sin(rad1) * r;
    return [x, y, z];
  };
  
  return Util;
};

module.exports = exports();

},{}]},{},[5])

CSS

HTML

<div id="canvas"></div>
  <script id="vertexShader" type="x-shader/x-vertex">
    attribute vec3 color;
    attribute float texture_index;

varying vec3 v_color;
    varying float v_texture_index;

void main() {
      v_color = color;
      v_texture_index = texture_index;

gl_PointSize = 50.0;
      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    }
  </script>
  <script id="fragmentShader" type="x-shader/x-fragment">
    uniform sampler2D textures[16];
    
    varying vec3 v_color;
    varying float v_texture_index;

void main() {
      vec4 color1 = vec4(v_color, 1.0);
      vec4 color2;
      vec2 point = vec2(gl_PointCoord.x, gl_PointCoord.y * -1.0 + 1.);
      
      if (v_texture_index < 0.1) {
        color2 = texture2D(textures[0], point);
      } else if (v_texture_index < 1.1) {
        color2 = texture2D(textures[1], point);
      } else if (v_texture_index < 2.1) {
        color2 = texture2D(textures[2], point);
      } else if (v_texture_index < 3.1) {
        color2 = texture2D(textures[3], point);
      } else if (v_texture_index < 4.1) {
        color2 = texture2D(textures[4], point);
      } else if (v_texture_index < 5.1) {
        color2 = texture2D(textures[5], point);
      } else if (v_texture_index < 6.1) {
        color2 = texture2D(textures[6], point);
      } else if (v_texture_index < 7.1) {
        color2 = texture2D(textures[7], point);
      } else if (v_texture_index < 8.1) {
        color2 = texture2D(textures[8], point);
      } else if (v_texture_index < 9.1) {
        color2 = texture2D(textures[9], point);
      } else if (v_texture_index < 10.1) {
        color2 = texture2D(textures[10], point);
      } else if (v_texture_index < 11.1) {
        color2 = texture2D(textures[11], point);
      } else if (v_texture_index < 12.1) {
        color2 = texture2D(textures[12], point);
      } else if (v_texture_index < 13.1) {
        color2 = texture2D(textures[13], point);
      } else if (v_texture_index < 14.1) {
        color2 = texture2D(textures[14], point);
      } else if (v_texture_index < 15.1) {
        color2 = texture2D(textures[15], point);
      }

gl_FragColor = color1 * color2;
    }
  </script>
<script src="//cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.min.js"></script>

Recommendation

Join Effecthub.com