├── Makefile ├── README.md ├── REVISION ├── css └── main.css ├── images ├── .gitignore ├── ash_uvgrid01.jpg └── water.jpg ├── index.html ├── js └── .gitignore └── vendor ├── DragPanControls.js ├── three.js ├── Detector.js ├── RequestAnimationFrame.js ├── Stats.js └── Three.js └── threex ├── Makefile ├── README.md ├── THREEx.CelShader.js ├── THREEx.DeviceOrientationState.js ├── THREEx.FullScreen.js ├── THREEx.GeometryUtils.js ├── THREEx.GeometryWobble.js ├── THREEx.KeyboardState.js ├── THREEx.LogoTurtle.js ├── THREEx.PlasmaShader.js ├── THREEx.SkyMap.js ├── THREEx.WindowResize.js ├── THREEx.glCapability.js ├── THREEx.requestAnimationFrame.js ├── THREEx.screenshot.js ├── docs ├── THREEx.CelShader.html ├── THREEx.CubeMap.html ├── THREEx.DeviceOrientationState.html ├── THREEx.FullScreen.html ├── THREEx.GeometryUtils.html ├── THREEx.GeometryWobble.html ├── THREEx.KeyboardState.html ├── THREEx.LogoTurtle.html ├── THREEx.PlasmaShader.html ├── THREEx.SkyMap.html ├── THREEx.WindowResize.html ├── THREEx.glCapability.html ├── THREEx.requestAnimationFrame.html ├── THREEx.screenshot.html └── docco.css ├── examples ├── THREEx.DeviceOrientationState.html ├── THREEx.KeyboardState.html ├── threex.embedded │ ├── noshield-host.html │ ├── noshield-iframe.html │ ├── withshield-host.html │ └── withshield-iframe.html └── threex.fullscreen.html ├── threex.chromeWebStoreInstall.js ├── threex.embedded.js ├── threex.sparks.js └── threex.texturePoolBall.js /Makefile: -------------------------------------------------------------------------------- 1 | # makefile to automatize simple operations 2 | 3 | server: 4 | python -m SimpleHTTPServer 5 | 6 | deploy: 7 | # assume there is something to commit 8 | # use "git diff --exit-code HEAD" to know if there is something to commit 9 | # so two lines: one if no commit, one if something to commit 10 | git commit -a -m "New deploy" && git push -f origin HEAD:gh-pages && git reset HEAD~ 11 | 12 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | [boilerplate for three.js](https://github.com/jeromeetienne/threejsboilerplate) 2 | is a template to get you started. You download it and modify it until it fits your needs. 3 | It is a fast way to start a clean project with [three.js](https://github.com/mrdoob/three.js/). 4 | It avoids repetitive tasks, following DRY principles. 5 | It includes various good practices and compatibilities features. 6 | More details [here](http://learningthreejs.com/blog/2011/12/20/boilerplate-for-three-js/). 7 | 8 | # Get Started 9 | ``` 10 | git clone https://github.com/jeromeetienne/threejsboilerplate.git 11 | ``` 12 | 13 | And start updating ```index.html``` until it fits yours need. 14 | -------------------------------------------------------------------------------- /REVISION: -------------------------------------------------------------------------------- 1 | 0 2 | -------------------------------------------------------------------------------- /css/main.css: -------------------------------------------------------------------------------- 1 | body { 2 | overflow : hidden; 3 | padding : 0; 4 | margin : 0; 5 | 6 | color : #222; 7 | background-color: #BBB; 8 | font-family : arial; 9 | font-size : 100%; 10 | } 11 | #info { 12 | position : absolute; 13 | top : 0px; 14 | width : 100%; 15 | padding : 5px; 16 | text-align : center; 17 | } 18 | #info a { 19 | color : #66F; 20 | text-decoration : none; 21 | } 22 | #info a:hover { 23 | text-decoration : underline; 24 | } 25 | #inlineDoc { 26 | position : absolute; 27 | bottom : 0px; 28 | right : 5px; 29 | padding : 5px; 30 | } 31 | -------------------------------------------------------------------------------- /images/.gitignore: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jeromeetienne/tunnelgl/d392e7ae66a3725c738152340acccd8ba165eb25/images/.gitignore -------------------------------------------------------------------------------- /images/ash_uvgrid01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jeromeetienne/tunnelgl/d392e7ae66a3725c738152340acccd8ba165eb25/images/ash_uvgrid01.jpg -------------------------------------------------------------------------------- /images/water.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jeromeetienne/tunnelgl/d392e7ae66a3725c738152340acccd8ba165eb25/images/water.jpg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 | THREEx.CelShader.js | |
---|---|
define namespaces | var THREEx = THREEx || {};
2 | THREEx.ShaderLib = THREEx.ShaderLib || {};
3 | THREEx.UniformsLib = THREEx.UniformsLib || {}; |
cel shader from ro.me - http://www.ro.me/tech/cel-shader - Apache License 2.0 | THREEx.UniformsLib['cel'] = {
4 | "uDirLightPos" : { type: "v3", value: new THREE.Vector3(1,0,0) },
5 | "uDirLightColor" : { type: "c" , value: new THREE.Color( 0xeeeeee ) },
6 | "uAmbientLightColor" : { type: "c" , value: new THREE.Color( 0x050505 ) },
7 | "uBaseColor" : { type: "c" , value: new THREE.Color( 0xff0000 ) }
8 | };
9 |
10 | THREEx.ShaderLib['cel'] = {
11 | vertexShader: [
12 | "varying vec3 vNormal;",
13 | "varying vec3 vRefract;",
14 |
15 | "void main() {",
16 |
17 | "vec4 mPosition = objectMatrix * vec4( position, 1.0 );",
18 | "vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );",
19 | "vec3 nWorld = normalize ( mat3( objectMatrix[0].xyz, objectMatrix[1].xyz, objectMatrix[2].xyz ) * normal );",
20 |
21 | "vNormal = normalize( normalMatrix * normal );",
22 |
23 | "vec3 I = mPosition.xyz - cameraPosition;",
24 | "vRefract = refract( normalize( I ), nWorld, 1.02 );",
25 |
26 | "gl_Position = projectionMatrix * mvPosition;",
27 |
28 | "}"
29 | ].join( "\n" ),
30 | fragmentShader: [
31 | "uniform vec3 uBaseColor;",
32 |
33 | "uniform vec3 uDirLightPos;",
34 | "uniform vec3 uDirLightColor;",
35 |
36 | "uniform vec3 uAmbientLightColor;",
37 |
38 | "varying vec3 vNormal;",
39 |
40 | "varying vec3 vRefract;",
41 |
42 | "void main() {",
43 |
44 | "float directionalLightWeighting = max( dot( normalize( vNormal ), uDirLightPos ), 0.0);",
45 | "vec3 lightWeighting = uAmbientLightColor + uDirLightColor * directionalLightWeighting;",
46 |
47 | "float intensity = smoothstep( - 0.5, 1.0, pow( length(lightWeighting), 20.0 ) );",
48 | "intensity += length(lightWeighting) * 0.2;",
49 |
50 | "float cameraWeighting = dot( normalize( vNormal ), vRefract );",
51 | "intensity += pow( 1.0 - length( cameraWeighting ), 6.0 );",
52 | "intensity = intensity * 0.2 + 0.3;",
53 |
54 | "if ( intensity < 0.50 ) {",
55 |
56 | "gl_FragColor = vec4( 2.0 * intensity * uBaseColor, 1.0 );",
57 |
58 | "} else {",
59 |
60 | "gl_FragColor = vec4( 1.0 - 2.0 * ( 1.0 - intensity ) * ( 1.0 - uBaseColor ), 1.0 );",
61 |
62 | "}",
63 |
64 | "}"
65 | ].join( "\n" )
66 | };
67 |
68 | |
THREEx.CubeMap.js | |
---|---|
var THREEx = THREEx || {};
2 |
3 | THREEx.Cubemap = {};
4 |
5 | THREEx.Cubemap.center = function(geometry, noX, noY, noZ)
6 | {
7 | }
8 |
9 | |
THREEx.DeviceOrientationState.js | |
---|---|
/** @namespace */
2 | var THREEx = THREEx || {};
3 |
4 | THREEx.DeviceOrientationState = function()
5 | { | |
to store the current state | this._state = { x: 0, y: 0, z: 0 };
6 |
7 | this._$callback = function(event){ this._onDeviceOrientation(event); }.bind(this);
8 | |
bind events 9 | - spec http://dev.w3.org/geo/api/spec-source-orientation.html | window.addEventListener('deviceorientation', this._$callback);
10 | }
11 |
12 | /**
13 | * To stop listening of the keyboard events
14 | */
15 | THREEx.DeviceOrientationState.prototype.destroy = function()
16 | { |
unbind events | window.removeEventListener('deviceorientation', this._$callback);
17 | }
18 |
19 | /**
20 | * to process the keyboard dom event
21 | */
22 | THREEx.DeviceOrientationState.prototype._onDeviceOrientation = function(event)
23 | {
24 | this._state.x = (!event.alpha ? 0 : event.alpha) * Math.PI / 180;
25 | this._state.y = (!event.beta ? 0 : event.beta ) * Math.PI / 180;
26 | this._state.z = (!event.gamma ? 0 : event.gamma) * Math.PI / 180;
27 | }
28 |
29 |
30 | THREEx.DeviceOrientationState.prototype.angleX = function()
31 | {
32 | return this._state.x;
33 | }
34 |
35 | THREEx.DeviceOrientationState.prototype.angleY = function()
36 | {
37 | return this._state.y;
38 | }
39 |
40 | THREEx.DeviceOrientationState.prototype.angleZ = function()
41 | {
42 | return this._state.z;
43 | }
44 |
45 | |
THREEx.FullScreen.js | |
---|---|
This THREEx helper makes it easy to handle the fullscreen API 2 | * it hides the prefix for each browser 3 | * it hides the little discrepencies of the various vendor API 4 | * at the time of this writing (nov 2011) it is available in 5 | firefox nightly, 6 | webkit nightly and 7 | chrome stable. | |
Code | |
/** @namespace */
8 | var THREEx = THREEx || {};
9 | THREEx.FullScreen = THREEx.FullScreen || {};
10 |
11 | /**
12 | * test if it is possible to have fullscreen
13 | *
14 | * @returns {Boolean} true if fullscreen API is available, false otherwise
15 | */
16 | THREEx.FullScreen.available = function()
17 | {
18 | return this._hasWebkitFullScreen || this._hasMozFullScreen;
19 | }
20 |
21 | /**
22 | * test if fullscreen is currently activated
23 | *
24 | * @returns {Boolean} true if fullscreen is currently activated, false otherwise
25 | */
26 | THREEx.FullScreen.activated = function()
27 | {
28 | if( this._hasWebkitFullScreen ){
29 | return document.webkitIsFullScreen;
30 | }else if( this._hasMozFullScreen ){
31 | return document.mozFullScreen;
32 | }else{
33 | console.assert(false);
34 | }
35 | }
36 |
37 | /**
38 | * Request fullscreen on a given element
39 | * @param {DomElement} element to make fullscreen. optional. default to document.body
40 | */
41 | THREEx.FullScreen.request = function(element)
42 | {
43 | element = element || document.body;
44 | if( this._hasWebkitFullScreen ){
45 | element.webkitRequestFullScreen();
46 | }else if( this._hasMozFullScreen ){
47 | element.mozRequestFullScreen();
48 | }else{
49 | console.assert(false);
50 | }
51 | }
52 |
53 | /**
54 | * Cancel fullscreen
55 | */
56 | THREEx.FullScreen.cancel = function()
57 | {
58 | if( this._hasWebkitFullScreen ){
59 | document.webkitCancelFullScreen();
60 | }else if( this._hasMozFullScreen ){
61 | document.mozCancelFullScreen();
62 | }else{
63 | console.assert(false);
64 | }
65 | } | |
internal functions to know which fullscreen API implementation is available | THREEx.FullScreen._hasWebkitFullScreen = 'webkitCancelFullScreen' in document ? true : false;
66 | THREEx.FullScreen._hasMozFullScreen = 'mozCancelFullScreen' in document ? true : false;
67 |
68 | |
THREEx.GeometryWobble.js | |
---|---|
var THREEx = THREEx || {};
2 |
3 | THREEx.GeometryWobble = {}; | |
Geometry Wobble 4 | based on paul lewis / areotwist - http://lab.aerotwist.com/webgl/undulating-monkey/ | THREEx.GeometryWobble.init = function(geometry)
5 | {
6 | for(var i = 0; i < geometry.vertices.length; i++){
7 | var vertex = geometry.vertices[i];
8 | vertex.originalPosition = vertex.position.clone();
9 | vertex.dirVector = vertex.position.clone().normalize();
10 | }
11 | geometry.dynamic = true;
12 |
13 | this.cpuAxis(geometry, 'y')
14 | }
15 |
16 | THREEx.GeometryWobble.cpuAxis = function(geometry, type, factor)
17 | {
18 | if( type === undefined ) type = 'x';
19 | if( factor === undefined ) factor = 0.2;
20 |
21 | for(var i = 0; i < geometry.vertices.length; i++) {
22 | var vertex = geometry.vertices[i]; |
Note: may need more axis ? | if( type === 'x' ) vertex.axisValue = vertex.originalPosition.x * factor;
23 | else if( type === 'y' ) vertex.axisValue = vertex.originalPosition.y * factor;
24 | else if( type === 'z' ) vertex.axisValue = vertex.originalPosition.z * factor;
25 | else console.assert(false);
26 | }
27 | }
28 |
29 | THREEx.GeometryWobble.Animate = function(geometry, phase, magnitude)
30 | {
31 | if( phase === undefined ) phase = 0;
32 | if( magnitude === undefined ) magnitude = 0.2;
33 |
34 | if( typeof magnitude === "number" ) magnitude = new THREE.Vector3(magnitude, magnitude, magnitude)
35 |
36 |
37 | for(var i = 0; i < geometry.vertices.length; i++) {
38 | var vertex = geometry.vertices[i];
39 | var vertexPhase = Math.cos(phase + vertex.axisValue);
40 |
41 | vertex.position.x = vertex.originalPosition.x + vertexPhase * vertex.dirVector.x * magnitude.x;
42 | vertex.position.y = vertex.originalPosition.y + vertexPhase * vertex.dirVector.y * magnitude.y;
43 | vertex.position.z = vertex.originalPosition.z + vertexPhase * vertex.dirVector.z * magnitude.z;
44 | }
45 |
46 | geometry.__dirtyVertices = true;
47 | }
48 |
49 | |
THREEx.KeyboardState.js | |
---|---|
THREEx.KeyboardState.js keep the current state of the keyboard. 2 | It is possible to query it at any time. No need of an event. 3 | This is particularly convenient in loop driven case, like in 4 | 3D demos or games. 5 | 6 |Usage7 | 8 |Step 1: Create the object 9 | 10 |
Step 2: Query the keyboard state 13 | 14 |This will return true if shift and A are pressed, false otherwise 15 | 16 |
Step 3: Stop listening to the keyboard 19 | 20 |
NOTE: this library may be nice as standaline. independant from three.js 23 | - rename it keyboardForGame 24 | 25 |Code | /** @namespace */
26 | var THREEx = THREEx || {};
27 |
28 | /**
29 | * - NOTE: it would be quite easy to push event-driven too
30 | * - microevent.js for events handling
31 | * - in this._onkeyChange, generate a string from the DOM event
32 | * - use this as event name
33 | */
34 | THREEx.KeyboardState = function()
35 | { |
to store the current state | this.keyCodes = {};
36 | this.modifiers = {};
37 | |
create callback to bind/unbind keyboard events | var self = this;
38 | this._onKeyDown = function(event){ self._onKeyChange(event, true); };
39 | this._onKeyUp = function(event){ self._onKeyChange(event, false);}; |
bind keyEvents | document.addEventListener("keydown", this._onKeyDown, false);
40 | document.addEventListener("keyup", this._onKeyUp, false);
41 | }
42 |
43 | /**
44 | * To stop listening of the keyboard events
45 | */
46 | THREEx.KeyboardState.prototype.destroy = function()
47 | { |
unbind keyEvents | document.removeEventListener("keydown", this._onKeyDown, false);
48 | document.removeEventListener("keyup", this._onKeyUp, false);
49 | }
50 |
51 | THREEx.KeyboardState.MODIFIERS = ['shift', 'ctrl', 'alt', 'meta'];
52 | THREEx.KeyboardState.ALIAS = {
53 | 'left' : 37,
54 | 'up' : 38,
55 | 'right' : 39,
56 | 'down' : 40,
57 | 'space' : 32,
58 | 'pageup' : 33,
59 | 'pagedown' : 34,
60 | 'tab' : 9
61 | };
62 |
63 | /**
64 | * to process the keyboard dom event
65 | */
66 | THREEx.KeyboardState.prototype._onKeyChange = function(event, pressed)
67 | { |
log to debug 68 | console.log("onKeyChange", event, pressed, event.keyCode, event.shiftKey, event.ctrlKey, event.altKey, event.metaKey) | |
update this.keyCodes | var keyCode = event.keyCode;
69 | this.keyCodes[keyCode] = pressed; |
update this.modifiers | this.modifiers['shift']= event.shiftKey;
70 | this.modifiers['ctrl'] = event.ctrlKey;
71 | this.modifiers['alt'] = event.altKey;
72 | this.modifiers['meta'] = event.metaKey;
73 | }
74 |
75 | /**
76 | * query keyboard state to know if a key is pressed of not
77 | *
78 | * @param {String} keyDesc the description of the key. format : modifiers+key e.g shift+A
79 | * @returns {Boolean} true if the key is pressed, false otherwise
80 | */
81 | THREEx.KeyboardState.prototype.pressed = function(keyDesc)
82 | {
83 | var keys = keyDesc.split("+");
84 | for(var i = 0; i < keys.length; i++){
85 | var key = keys[i];
86 | var pressed;
87 | if( THREEx.KeyboardState.MODIFIERS.indexOf( key ) !== -1 ){
88 | pressed = this.modifiers[key];
89 | }else if( Object.keys(THREEx.KeyboardState.ALIAS).indexOf( key ) != -1 ){
90 | pressed = this.keyCodes[ THREEx.KeyboardState.ALIAS[key] ];
91 | }else {
92 | pressed = this.keyCodes[key.toUpperCase().charCodeAt(0)]
93 | }
94 | if( !pressed) return false;
95 | };
96 | return true;
97 | }
98 |
99 | |
THREEx.LogoTurtle.js | |
---|---|
/** @namespace */
2 | var THREEx = THREEx || {}; | |
TODO should those relative polar coord function be INSIDE path already ? | THREEx.LogoTurtle = function()
3 | {
4 | this._penX = 0;
5 | this._penY = 0;
6 | this._angle = 0;
7 | this._vectors = [];
8 | }
9 |
10 | THREEx.LogoTurtle.create = function()
11 | {
12 | return new THREEx.LogoTurtle()
13 | }
14 |
15 | THREEx.LogoTurtle.prototype.turn = function(rotation)
16 | {
17 | this._angle += rotation;
18 | return this;
19 | }
20 |
21 | THREEx.LogoTurtle.prototype.moveTo = function(x, y)
22 | {
23 | this._penX = x * Math.cos(this._angle) - y * Math.sin(this._angle);
24 | this._penY = x * Math.sin(this._angle) + y * Math.cos(this._angle);
25 | this._vectors.push( new THREE.Vector2(this._penX, this._penY) );
26 | return this;
27 | }
28 |
29 | THREEx.LogoTurtle.prototype.forward = function(distance)
30 | {
31 | this._penX += Math.cos(this._angle) * distance;
32 | this._penY += Math.sin(this._angle) * distance;
33 |
34 | this._vectors.push( new THREE.Vector2(this._penX, this._penY) );
35 |
36 | return this;
37 | }
38 |
39 | THREEx.LogoTurtle.prototype.points = function()
40 | {
41 | return this._vectors;
42 | }
43 |
44 | |
THREEx.PlasmaShader.js | |
---|---|
define namespaces | var THREEx = THREEx || {};
2 | THREEx.ShaderLib = THREEx.ShaderLib || {};
3 | THREEx.UniformsLib = THREEx.UniformsLib || {};
4 |
5 | THREEx.UniformsLib['plasma'] = {
6 | time : { type : "f", value: 0.0 },
7 | scale : { type : "f", value: 1.0 },
8 | rotation: { type : "f", value: 0.0 },
9 | opacity : { type : "f", value: 1.0 },
10 |
11 | c0 : { type : "f", value: 5.0 },
12 | c1 : { type : "f", value: 3.0 },
13 | c2 : { type : "f", value: 11.0 },
14 | c3 : { type : "f", value: 7.0 },
15 | c4 : { type : "f", value: 9.0 },
16 | c5 : { type : "f", value: 3.0 }
17 | };
18 |
19 | THREEx.ShaderLib['plasma'] = {
20 | vertexShader: [
21 | "#ifdef GL_ES",
22 | "precision highp float;",
23 | "#endif",
24 | "varying vec2 vUv;",
25 | "void main(){",
26 | "vUv = uv;",
27 | "gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);",
28 | "}"
29 | ].join( "\n" ),
30 | fragmentShader: [
31 | "#ifdef GL_ES",
32 | "precision highp float;",
33 | "#endif",
34 |
35 | "varying vec2 vUv;",
36 | "uniform float time;",
37 | "uniform float scale;",
38 | "uniform float rotation;",
39 | "uniform float opacity;",
40 | "uniform float c0, c1, c2, c3, c4, c5;", |
todo zoom and rotation of vec2 point | "vec2 rotoZoom(const vec2 point, const float scale, const float rotation){",
41 | "vec2 tmp;",
42 | "tmp.x = point.x * cos(rotation) - point.y * sin(rotation);",
43 | "tmp.y = point.x * sin(rotation) + point.y * cos(rotation);",
44 | "tmp = tmp * scale;",
45 | "return tmp;",
46 | "}",
47 | |
based on THREE.Color.setHSV() 48 | based on Mads Elvheim / Madsy http://code.google.com/p/opengl3-freenode/wiki/ColorSpaceConversions | "vec3 HSVtoRGB(const vec3 color){",
49 | "float h = color.r;",
50 | "float s = color.g;",
51 | "float v = color.b;",
52 |
53 | "float i = floor(h * 6.0);",
54 | "float f = (h * 6.0) - i;",
55 | "float p = v * (1.0 - s);",
56 | "float q = v * (1.0 - f * s);",
57 | "float t = v * (1.0 - (1.0 - f) * s);",
58 |
59 | "vec3 result;",
60 | "if( i < 1.0 ) result = vec3(v,t,p);",
61 | "else if( i < 2.0 ) result = vec3(q,v,p);",
62 | "else if( i < 3.0 ) result = vec3(p,v,t);",
63 | "else if( i < 4.0 ) result = vec3(p,q,v);",
64 | "else if( i < 5.0 ) result = vec3(t,p,v);",
65 | "else if( i < 6.0 ) result = vec3(v,p,q);",
66 | "else result = vec3(v,t,p);",
67 |
68 | "return result;",
69 | "}", |
default value | "#ifndef ROTOZOOM",
70 | "#define ROTOZOOM 1",
71 | "#endif",
72 | "#ifndef USEHSV",
73 | "#define USEHSV 1",
74 | "#endif",
75 |
76 | "void main(){",
77 | "vec2 p = -1.0 + 2.0 * vUv;",
78 | "#if ROTOZOOM",
79 | "p = rotoZoom(p, scale, rotation);",
80 | "#endif",
81 |
82 | "float cossin1 = cos(p.x*c0+sin(time*1.3)) - sin(p.y*c3-cos(time)) + sin(time);",
83 | "float cossin2 = cos(p.y*c1+cos(c1*time/c4)) * sin(p.x*c4*sin(time)) - cos(time);",
84 | "float cossin3 = cos(p.x*c2+sin(c2*time/c5)) + sin(p.y*c5+cos(time)) + cos(time);", |
"vec3 color = vec3(abs(cossin1sin(p.x)), cossin2sin(p.y), cossin3*sin(p.x));", | "vec3 color = vec3(abs(cossin1*sin(p.x)), 0.6 - 0.4* abs(cossin2*sin(p.y)), 0.5 - 0.3*(cossin3*sin(p.x)));",
85 |
86 | "#if USEHSV",
87 | "color = HSVtoRGB(color);",
88 | "#endif",
89 |
90 | "gl_FragColor = vec4(color, opacity);", |
"gl_FragColor = vec4(cossin1sin(p.x), cossin2sin(p.y), cossin3*sin(p.x), opacity);", | "}"
91 | ].join( "\n" )
92 | };
93 |
94 | |
THREEx.SkyMap.js | |
---|---|
var THREEx = THREEx || {};
2 |
3 | THREEx.SkyMap = {};
4 |
5 | THREEx.SkyMap.buildMesh = function(urls, opts)
6 | { | |
get parameters | opts = opts || {}
7 | var cubeSize = opts.cubeSize !== undefined ? opts.cubeSize : 100000; |
load the cube textures | var texture = THREE.ImageUtils.loadTextureCube( urls );
8 | |
init the cube shadder | var shader = THREE.ShaderUtils.lib["cube"];
9 | var uniforms = THREE.UniformsUtils.clone( shader.uniforms );
10 | uniforms['tCube'].texture= textureCube;
11 | var material = new THREE.MeshShaderMaterial({
12 | fragmentShader : shader.fragmentShader,
13 | vertexShader : shader.vertexShader,
14 | uniforms : uniforms
15 | }); |
build the geometry | var geometry = new THREE.CubeGeometry( cubeSize, cubeSize, cubeSize, 1, 1, 1, null, true ); |
build the skybox Mesh | var mesh = new THREE.Mesh( geometry, material );
16 | return mesh;
17 | }
18 |
19 | /**
20 | * Build the urls array for THREEx.SkyMap.buildMesh()
21 | */
22 | THREEx.SkyMap.UrlsPosx = function(prefix, extension)
23 | {
24 | return [
25 | prefix + "posx" + extension,
26 | prefix + "negx" + extension,
27 | prefix + "posy" + extension,
28 | prefix + "negy" + extension,
29 | prefix + "posz" + extension,
30 | prefix + "negz" + extension
31 | ];
32 | return urls;
33 | }
34 |
35 | /**
36 | * Build the urls array for THREEx.SkyMap.buildMesh()
37 | */
38 | THREEx.SkyMap.UrlsPx = function(prefix, extension)
39 | {
40 | return [
41 | prefix + "px" + extension,
42 | prefix + "nx" + extension,
43 | prefix + "py" + extension,
44 | prefix + "ny" + extension,
45 | prefix + "pz" + extension,
46 | prefix + "nz" + extension
47 | ];
48 | return urls;
49 | }
50 |
51 | |
THREEx.WindowResize.js | |
---|---|
This THREEx helper makes it easy to handle window resize. 2 | It will update renderer and camera when window is resized. 3 | 4 |Usage5 | 6 |Step 1: Start updating renderer and camera 7 | 8 |
Step 2: Start updating renderer and camera 11 | 12 |
Code | |
/** @namespace */
15 | var THREEx = THREEx || {};
16 |
17 | /**
18 | * Update renderer and camera when the window is resized
19 | *
20 | * @param {Object} renderer the renderer to update
21 | * @param {Object} Camera the camera to update
22 | */
23 | THREEx.WindowResize = function(renderer, camera){
24 | var callback = function(){ | |
notify the renderer of the size change | renderer.setSize( window.innerWidth, window.innerHeight ); |
update the camera | camera.aspect = window.innerWidth / window.innerHeight;
25 | camera.updateProjectionMatrix();
26 | } |
bind the resize event | window.addEventListener('resize', callback, false); |
return .stop() the function to stop watching window resize | return {
27 | /**
28 | * Stop watching window resize
29 | */
30 | stop : function(){
31 | window.removeEventListener('resize', callback);
32 | }
33 | };
34 | }
35 |
36 | |
THREEx.glCapability.js | |
---|---|
/**
2 | * Define namespace
3 | */
4 | if(typeof THREEx === "undefined") var THREEx = {};
5 |
6 |
7 | /**
8 | * return the capability of a WebGl context
9 | *
10 | * TODO to rewrite
11 | * - heavily wased on webglreport on sourceforge
12 | * - is there other/better properties
13 | * - should i get a more readable output ?
14 | * - another function ?
15 | *
16 | * @param {WebGLRenderingContext} webgl context
17 | * @returns {Object} capabilities
18 | */
19 | THREEx.glCapability = function(gl)
20 | { | |
sanity check - gl context MUST BE WebGLRenderingContext | console.assert(gl instanceof WebGLRenderingContext) |
TODO find better names | var prout = ['VERSION', 'SHADING_LANGUAGE_VERSION', 'VENDOR', 'RENDERER'];
21 | var pixDepth = ['RED_BITS', 'GREEN_BITS', 'BLUE_BITS', 'ALPHA_BITS', 'DEPTH_BITS', 'STENCIL_BITS'];
22 | var slota = ['MAX_RENDERBUFFER_SIZE', 'MAX_COMBINED_TEXTURE_IMAGE_UNITS', 'MAX_CUBE_MAP_TEXTURE_SIZE'
23 | , 'MAX_FRAGMENT_UNIFORM_VECTORS', 'MAX_TEXTURE_IMAGE_UNITS'
24 | , 'MAX_TEXTURE_SIZE', 'MAX_VERTEX_ATTRIBS'
25 | , 'MAX_VERTEX_ATTRIBS', 'MAX_VERTEX_TEXTURE_IMAGE_UNITS'
26 | , 'MAX_VERTEX_UNIFORM_VECTORS'];
27 | var sloti = ['ALIASED_LINE_WIDTH_RANGE', 'ALIASED_POINT_SIZE_RANGE', 'MAX_VIEWPORT_DIMS'];
28 |
29 | var info = {};
30 | var collect = function(arr){
31 | arr.forEach(function(parameter){ |
console.log('parameter', parameter) | info[parameter] = gl.getParameter(gl[parameter])
32 | })
33 | }
34 |
35 | collect(prout);
36 | collect(pixDepth);
37 | collect(slota);
38 | collect(sloti)
39 | |
special case to get the extensions | info['SUPPORTED_EXTENSIONS'] = gl.getSupportedExtensions()
40 | |
console.log("info"); 41 | console.dir(info) | return info;
42 | }
43 |
44 | |
THREEx.requestAnimationFrame.js | |
---|---|
/**
2 | * Provides requestAnimationFrame/cancelRequestAnimation in a cross browser way.
3 | * from paul irish + jerome etienne
4 | * - http://paulirish.com/2011/requestanimationframe-for-smart-animating/
5 | * - http://notes.jetienne.com/2011/05/18/cancelRequestAnimFrame-for-paul-irish-requestAnimFrame.html
6 | */
7 |
8 | if ( !window.requestAnimationFrame ) {
9 |
10 | window.requestAnimationFrame = ( function() {
11 |
12 | return window.webkitRequestAnimationFrame ||
13 | window.mozRequestAnimationFrame ||
14 | window.oRequestAnimationFrame ||
15 | window.msRequestAnimationFrame ||
16 | function( /* function FrameRequestCallback */ callback, /* DOMElement Element */ element ) {
17 |
18 | return window.setTimeout( callback, 1000 / 60 );
19 |
20 | };
21 |
22 | } )();
23 |
24 | }
25 |
26 | if ( !window.cancelRequestAnimationFrame ) {
27 |
28 | window.cancelRequestAnimationFrame = ( function() {
29 |
30 | return window.webkitCancelRequestAnimationFrame ||
31 | window.mozCancelRequestAnimationFrame ||
32 | window.oCancelRequestAnimationFrame ||
33 | window.msCancelRequestAnimationFrame ||
34 | clearTimeout
35 |
36 | } )();
37 |
38 | }
39 |
40 | |