Skip to content

Commit 495de75

Browse files
alteredqalteredq
committedAug 29, 2011
Added OrthoCamera.
Modified examples to use it, hacking projection matrix started to feel a bit dirty.
·
r52r44
1 parent 7c7d442 commit 495de75

20 files changed

+281
-278
lines changed
 

‎build/Three.js

+7-6
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎build/custom/ThreeCanvas.js

+3-2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎build/custom/ThreeDOM.js

+3-2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎build/custom/ThreeExtras.js

+4-4
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎build/custom/ThreeSVG.js

+3-2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎build/custom/ThreeWebGL.js

+3-2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/canvas_camera_orthographic.html

+1-2
Original file line numberDiff line numberDiff line change
@@ -42,8 +42,7 @@
4242
info.innerHTML = '<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - orthographic view';
4343
container.appendChild( info );
4444

45-
camera = new THREE.Camera( 45, window.innerWidth / window.innerHeight, - 2000, 1000 );
46-
camera.projectionMatrix = THREE.Matrix4.makeOrtho( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, - 2000, 1000 );
45+
camera = new THREE.OrthoCamera( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, - 2000, 1000 );
4746
camera.position.x = 200;
4847
camera.position.y = 100;
4948
camera.position.z = 200;

‎examples/webgl_flycamera_earth.html

+1-2
Original file line numberDiff line numberDiff line change
@@ -282,8 +282,7 @@
282282

283283
postprocessing.scene = new THREE.Scene();
284284

285-
postprocessing.camera = new THREE.Camera();
286-
postprocessing.camera.projectionMatrix = THREE.Matrix4.makeOrtho( SCREEN_WIDTH / - 2, SCREEN_WIDTH / 2, SCREEN_HEIGHT / 2, SCREEN_HEIGHT / - 2, -10000, 10000 );
285+
postprocessing.camera = new THREE.OrthoCamera( SCREEN_WIDTH / - 2, SCREEN_WIDTH / 2, SCREEN_HEIGHT / 2, SCREEN_HEIGHT / - 2, -10000, 10000 );
287286
postprocessing.camera.position.z = 100;
288287

289288
var pars = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBAFormat };

‎examples/webgl_geometry_text.html

+1-2
Original file line numberDiff line numberDiff line change
@@ -565,8 +565,7 @@
565565

566566
postprocessing.scene = new THREE.Scene();
567567

568-
postprocessing.camera = new THREE.Camera();
569-
postprocessing.camera.projectionMatrix = THREE.Matrix4.makeOrtho( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, -10000, 10000 );
568+
postprocessing.camera = new THREE.OrthoCamera( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, -10000, 10000 );
570569
postprocessing.camera.position.z = 100;
571570

572571
var pars = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat };

‎examples/webgl_materials_normalmap.html

+14-29
Original file line numberDiff line numberDiff line change
@@ -33,26 +33,19 @@
3333

3434
#vt { display:none }
3535
#vt, #vt a { color:orange; }
36-
.code { }
37-
38-
#log { position:absolute; top:50px; text-align:left; display:block; z-index:100 }
3936
</style>
4037
</head>
4138

4239
<body>
43-
<pre id="log"></pre>
4440

4541
<div id="info">
4642
<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - webgl (<span id="description">normal + ao + displacement</span>) map demo.
4743
ninja head from <a href="http://developer.amd.com/archive/gpu/MeshMapper/pages/default.aspx" target="_blank">AMD GPU MeshMapper</a>
4844

49-
<div id="vt">displacement mapping needs vertex textures (GPU with Shader Model 3.0)<br/>
50-
on Windows use <span class="code">Chrome --use-gl=desktop</span> <br/>
51-
or Firefox 4 (about:config => webgl.mochitest_native_gl=true)<br/>
52-
please star this <a href="http://code.google.com/p/chromium/issues/detail?id=52497">Chrome issue</a> to get ANGLE support
53-
</div>
45+
<div id="vt">displacement mapping needs vertex textures (GPU with Shader Model 3.0)</div>
5446
</div>
5547

48+
5649
<script type="text/javascript" src="../build/Three.js"></script>
5750
<script type="text/javascript" src="js/Detector.js"></script>
5851
<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
@@ -66,7 +59,7 @@
6659

6760
var container, stats, loader;
6861

69-
var camera, scene, webglRenderer;
62+
var camera, scene, renderer;
7063

7164
var mesh, zmesh, lightMesh, geometry;
7265
var mesh1, mesh2;
@@ -91,8 +84,7 @@
9184
container = document.createElement( 'div' );
9285
document.body.appendChild( container );
9386

94-
camera = new THREE.Camera( 60, window.innerWidth / window.innerHeight, 1, 100000 );
95-
camera.projectionMatrix = THREE.Matrix4.makeOrtho( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, -10000, 10000 );
87+
camera = new THREE.OrthoCamera( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, -10000, 10000 );
9688
camera.position.z = 6200;
9789

9890
scene = new THREE.Scene();
@@ -116,7 +108,7 @@
116108
// light representation
117109

118110
var sphere = new THREE.SphereGeometry( 100, 16, 8 );
119-
lightMesh = new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color:0xffaa00 } ) );
111+
lightMesh = new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0xffaa00 } ) );
120112
lightMesh.position = pointLight.position;
121113
lightMesh.scale.x = lightMesh.scale.y = lightMesh.scale.z = 0.05;
122114
scene.addObject(lightMesh);
@@ -140,7 +132,7 @@
140132
uniforms[ "tDisplacement" ].texture = THREE.ImageUtils.loadTexture( "textures/normal/ninja/displacement.jpg" );
141133
uniforms[ "uDisplacementBias" ].value = - 0.428408 * scale;
142134
uniforms[ "uDisplacementScale" ].value = 2.436143 * scale;
143-
135+
144136
uniforms[ "uDiffuseColor" ].value.setHex( diffuse );
145137
uniforms[ "uSpecularColor" ].value.setHex( specular );
146138
uniforms[ "uAmbientColor" ].value.setHex( ambient );
@@ -157,13 +149,13 @@
157149

158150
loader.load( { model: "obj/ninja/NinjaLo_bin.js", callback: function( geometry ) { createScene( geometry, scale, material1, material2 ) } } );
159151

160-
webglRenderer = new THREE.WebGLRenderer();
161-
webglRenderer.setSize( window.innerWidth, window.innerHeight );
162-
container.appendChild( webglRenderer.domElement );
152+
renderer = new THREE.WebGLRenderer();
153+
renderer.setSize( window.innerWidth, window.innerHeight );
154+
container.appendChild( renderer.domElement );
163155

164-
var description = "normal + ao" + ( webglRenderer.supportsVertexTextures() ? " + displacement" : " + <strike>displacement</strike>" );
156+
var description = "normal + ao" + ( renderer.supportsVertexTextures() ? " + displacement" : " + <strike>displacement</strike>" );
165157
document.getElementById( "description" ).innerHTML = description;
166-
document.getElementById( "vt" ).style.display = webglRenderer.supportsVertexTextures() ? "none" : "block";
158+
document.getElementById( "vt" ).style.display = renderer.supportsVertexTextures() ? "none" : "block";
167159

168160
if ( statsEnabled ) {
169161

@@ -183,12 +175,12 @@
183175

184176
mesh1 = new THREE.Mesh( geometry, material1 );
185177
mesh1.position.x = - scale * 12;
186-
mesh1.scale.x = mesh1.scale.y = mesh1.scale.z = scale;
178+
mesh1.scale.set( scale, scale, scale );
187179
scene.addObject( mesh1 );
188180

189181
mesh2 = new THREE.Mesh( geometry, material2 );
190182
mesh2.position.x = scale * 12;
191-
mesh2.scale.x = mesh2.scale.y = mesh2.scale.z = scale;
183+
mesh2.scale.set( scale, scale, scale );
192184
scene.addObject( mesh2 );
193185

194186
loader.statusDomElement.style.display = "none";
@@ -236,14 +228,7 @@
236228

237229
r += 0.01;
238230

239-
webglRenderer.render( scene, camera );
240-
241-
}
242-
243-
function log( text ) {
244-
245-
var e = document.getElementById("log");
246-
e.innerHTML = text + "<br/>" + e.innerHTML;
231+
renderer.render( scene, camera );
247232

248233
}
249234

‎examples/webgl_materials_video.html

+1-2
Original file line numberDiff line numberDiff line change
@@ -199,8 +199,7 @@
199199

200200
postprocessing.scene = new THREE.Scene();
201201

202-
postprocessing.camera = new THREE.Camera();
203-
postprocessing.camera.projectionMatrix = THREE.Matrix4.makeOrtho( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, -10000, 10000 );
202+
postprocessing.camera = new THREE.OrthoCamera( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, -10000, 10000 );
204203
postprocessing.camera.position.z = 100;
205204

206205
var pars = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat };

‎examples/webgl_particles_dynamic.html

+141-143
Large diffs are not rendered by default.

‎examples/webgl_postprocessing.html

+21-23
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@
4343
<script type="text/javascript" src="js/Stats.js"></script>
4444

4545
<!-- Time modulated procedural color fragment shader -->
46+
4647
<script id="fs-colors" type="x-shader/x-fragment">
4748
varying vec2 vUv;
4849
uniform float time;
@@ -55,6 +56,7 @@
5556
</script>
5657

5758
<!-- Generic vertex shader -->
59+
5860
<script id="vs-generic" type="x-shader/x-vertex">
5961
varying vec2 vUv;
6062

@@ -89,8 +91,7 @@
8991

9092
container = document.getElementById( 'container' );
9193

92-
cameraOrtho = new THREE.Camera();
93-
cameraOrtho.projectionMatrix = THREE.Matrix4.makeOrtho( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, -10000, 10000 );
94+
cameraOrtho = new THREE.OrthoCamera( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, -10000, 10000 );
9495
cameraOrtho.position.z = 100;
9596

9697
cameraPerspective = new THREE.Camera( 50, window.innerWidth / window.innerHeight, 1, 10000 );
@@ -101,9 +102,7 @@
101102
sceneBG = new THREE.Scene();
102103

103104
directionalLight = new THREE.DirectionalLight( 0xffffff );
104-
directionalLight.position.x = 0;
105-
directionalLight.position.y = 0;
106-
directionalLight.position.z = 1;
105+
directionalLight.position.set( 0, 0, 1 );
107106
directionalLight.position.normalize();
108107
sceneModel.addLight( directionalLight );
109108

@@ -122,11 +121,11 @@
122121

123122
} );
124123

125-
var screen_shader = THREE.ShaderUtils.lib["screen"];
124+
var screen_shader = THREE.ShaderUtils.lib[ "screen" ];
126125
var screen_uniforms = THREE.UniformsUtils.clone( screen_shader.uniforms );
127126

128-
screen_uniforms["tDiffuse"].texture = rtTexture1;
129-
screen_uniforms["opacity"].value = 0.4;
127+
screen_uniforms[ "tDiffuse" ].texture = rtTexture1;
128+
screen_uniforms[ "opacity" ].value = 0.4;
130129

131130
materialScreen = new THREE.MeshShaderMaterial( {
132131

@@ -141,9 +140,9 @@
141140
var film_shader = THREE.ShaderUtils.lib["film"];
142141
var film_uniforms = THREE.UniformsUtils.clone( film_shader.uniforms );
143142

144-
film_uniforms["tDiffuse"].texture = rtTexture1;
145-
film_uniforms["nIntensity"].value = 0.25;
146-
film_uniforms["sIntensity"].value = 0.5;
143+
film_uniforms[ "tDiffuse" ].texture = rtTexture1;
144+
film_uniforms[ "nIntensity" ].value = 0.25;
145+
film_uniforms[ "sIntensity" ].value = 0.5;
147146

148147
materialFilm = new THREE.MeshShaderMaterial( {
149148

@@ -158,12 +157,12 @@
158157
blurx = new THREE.Vector2( increment, 0.0 ),
159158
blury = new THREE.Vector2( 0.0, increment );
160159

161-
var convolution_shader = THREE.ShaderUtils.lib["convolution"];
160+
var convolution_shader = THREE.ShaderUtils.lib[ "convolution" ];
162161
var convolution_uniforms = THREE.UniformsUtils.clone( convolution_shader.uniforms );
163162

164-
convolution_uniforms["tDiffuse"].texture = rtTexture1;
165-
convolution_uniforms["uImageIncrement"].value = blurx;
166-
convolution_uniforms["cKernel"].value = THREE.ShaderUtils.buildKernel( 4.0 );
163+
convolution_uniforms[ "tDiffuse" ].texture = rtTexture1;
164+
convolution_uniforms[ "uImageIncrement" ].value = blurx;
165+
convolution_uniforms[ "cKernel" ].value = THREE.ShaderUtils.buildKernel( 4.0 );
167166

168167
materialConvolution = new THREE.MeshShaderMaterial( {
169168

@@ -190,6 +189,7 @@
190189
renderer = new THREE.WebGLRenderer( { antialias: false } );
191190
renderer.setSize( window.innerWidth, window.innerHeight );
192191
renderer.autoClear = false;
192+
193193
container.appendChild( renderer.domElement );
194194

195195
stats = new Stats();
@@ -232,11 +232,9 @@
232232
var mat2 = new THREE.MeshShaderMaterial( parameters );
233233

234234
mesh = new THREE.Mesh( geometry, mat2 );
235-
mesh.position.x = 0;
236-
mesh.position.y = -50;
237-
mesh.position.z = 0;
238-
mesh.scale.x = mesh.scale.y = mesh.scale.z = scale;
239-
mesh.updateMatrix();
235+
mesh.position.set( 0, -50, 0 );
236+
mesh.scale.set( scale, scale, scale );
237+
240238
scene.addObject( mesh );
241239

242240
loader.statusDomElement.style.display = "none";
@@ -283,7 +281,7 @@
283281

284282
// Render quad with blured scene into texture (convolution pass 1)
285283

286-
quadScreen.materials = [ materialConvolution ];
284+
quadScreen.materials[ 0 ] = materialConvolution;
287285
materialConvolution.uniforms.tDiffuse.texture = rtTexture1;
288286
materialConvolution.uniforms.uImageIncrement.value = blurx;
289287
renderer.render( sceneScreen, cameraOrtho, rtTexture2, true );
@@ -296,7 +294,7 @@
296294

297295
// Render original scene with superimposed blur into texture
298296

299-
quadScreen.materials = [ materialScreen ];
297+
quadScreen.materials[ 0 ] = materialScreen;
300298

301299
materialScreen.uniforms.tDiffuse.texture = rtTexture3;
302300
materialScreen.uniforms.opacity.value = 1.0;
@@ -305,7 +303,7 @@
305303
// Render final scene to the screen with film shader
306304

307305
materialFilm.uniforms.tDiffuse.texture = rtTexture1;
308-
quadScreen.materials = [ materialFilm ];
306+
quadScreen.materials[ 0 ] = materialFilm;
309307
renderer.render( sceneScreen, cameraOrtho );
310308

311309
}

‎examples/webgl_postprocessing_dof.html

+9-10
Original file line numberDiff line numberDiff line change
@@ -185,9 +185,9 @@
185185

186186
var matChanger = function( ) {
187187

188-
postprocessing.bokeh_uniforms["focus"].value = effectController.focus;
189-
postprocessing.bokeh_uniforms["aperture"].value = effectController.aperture;
190-
postprocessing.bokeh_uniforms["maxblur"].value = effectController.maxblur;
188+
postprocessing.bokeh_uniforms[ "focus" ].value = effectController.focus;
189+
postprocessing.bokeh_uniforms[ "aperture" ].value = effectController.aperture;
190+
postprocessing.bokeh_uniforms[ "maxblur" ].value = effectController.maxblur;
191191

192192
};
193193

@@ -234,22 +234,21 @@
234234

235235
postprocessing.scene = new THREE.Scene();
236236

237-
postprocessing.camera = new THREE.Camera();
238-
postprocessing.camera.projectionMatrix = THREE.Matrix4.makeOrtho( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, -10000, 10000 );
237+
postprocessing.camera = new THREE.OrthoCamera( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, -10000, 10000 );
239238
postprocessing.camera.position.z = 100;
240239

241240
var pars = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat };
242241
postprocessing.rtTextureDepth = new THREE.WebGLRenderTarget( window.innerWidth, height, pars );
243242
postprocessing.rtTextureColor = new THREE.WebGLRenderTarget( window.innerWidth, height, pars );
244243

245-
var bokeh_shader = ShaderExtras["bokeh"];
244+
var bokeh_shader = ShaderExtras[ "bokeh" ];
246245

247246
postprocessing.bokeh_uniforms = THREE.UniformsUtils.clone( bokeh_shader.uniforms );
248247

249-
postprocessing.bokeh_uniforms["tColor"].texture = postprocessing.rtTextureColor;
250-
postprocessing.bokeh_uniforms["tDepth"].texture = postprocessing.rtTextureDepth;
251-
postprocessing.bokeh_uniforms["focus"].value = 1.1;
252-
postprocessing.bokeh_uniforms["aspect"].value = window.innerWidth / height;
248+
postprocessing.bokeh_uniforms[ "tColor" ].texture = postprocessing.rtTextureColor;
249+
postprocessing.bokeh_uniforms[ "tDepth" ].texture = postprocessing.rtTextureDepth;
250+
postprocessing.bokeh_uniforms[ "focus" ].value = 1.1;
251+
postprocessing.bokeh_uniforms[ "aspect" ].value = window.innerWidth / height;
253252

254253
postprocessing.materialBokeh = new THREE.MeshShaderMaterial( {
255254

‎examples/webgl_ribbons.html

+10-11
Original file line numberDiff line numberDiff line change
@@ -227,20 +227,19 @@
227227

228228
postprocessing.scene = new THREE.Scene();
229229

230-
postprocessing.camera = new THREE.Camera();
231-
postprocessing.camera.projectionMatrix = THREE.Matrix4.makeOrtho( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, -10000, 10000 );
230+
postprocessing.camera = new THREE.OrthoCamera( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, -10000, 10000 );
232231
postprocessing.camera.position.z = 100;
233232

234233
var pars = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat };
235234
postprocessing.rtTexture1 = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, pars );
236235
postprocessing.rtTexture2 = new THREE.WebGLRenderTarget( 512, 512, pars );
237236
postprocessing.rtTexture3 = new THREE.WebGLRenderTarget( 512, 512, pars );
238237

239-
var screen_shader = THREE.ShaderUtils.lib["screen"];
238+
var screen_shader = THREE.ShaderUtils.lib[ "screen" ];
240239
var screen_uniforms = THREE.UniformsUtils.clone( screen_shader.uniforms );
241240

242-
screen_uniforms["tDiffuse"].texture = postprocessing.rtTexture1;
243-
screen_uniforms["opacity"].value = 1.0;
241+
screen_uniforms[ "tDiffuse" ].texture = postprocessing.rtTexture1;
242+
screen_uniforms[ "opacity" ].value = 1.0;
244243

245244
postprocessing.materialScreen = new THREE.MeshShaderMaterial( {
246245

@@ -252,15 +251,15 @@
252251

253252
} );
254253

255-
var convolution_shader = THREE.ShaderUtils.lib["convolution"];
254+
var convolution_shader = THREE.ShaderUtils.lib[ "convolution" ];
256255
var convolution_uniforms = THREE.UniformsUtils.clone( convolution_shader.uniforms );
257256

258257
postprocessing.blurx = new THREE.Vector2( 0.001953125, 0.0 ),
259258
postprocessing.blury = new THREE.Vector2( 0.0, 0.001953125 );
260259

261-
convolution_uniforms["tDiffuse"].texture = postprocessing.rtTexture1;
262-
convolution_uniforms["uImageIncrement"].value = postprocessing.blurx;
263-
convolution_uniforms["cKernel"].value = THREE.ShaderUtils.buildKernel( 4.0 );
260+
convolution_uniforms[ "tDiffuse" ].texture = postprocessing.rtTexture1;
261+
convolution_uniforms[ "uImageIncrement" ].value = postprocessing.blurx;
262+
convolution_uniforms[ "cKernel" ].value = THREE.ShaderUtils.buildKernel( 4.0 );
264263

265264
postprocessing.materialConvolution = new THREE.MeshShaderMaterial( {
266265

@@ -327,7 +326,7 @@
327326

328327
// Render quad with blured scene into texture (convolution pass 1)
329328

330-
postprocessing.quad.materials = [ postprocessing.materialConvolution ];
329+
postprocessing.quad.materials[ 0 ] = postprocessing.materialConvolution;
331330

332331
postprocessing.materialConvolution.uniforms.tDiffuse.texture = postprocessing.rtTexture1;
333332
postprocessing.materialConvolution.uniforms.uImageIncrement.value = postprocessing.blurx;
@@ -343,7 +342,7 @@
343342

344343
// Render original scene with superimposed blur to texture
345344

346-
postprocessing.quad.materials = [ postprocessing.materialScreen ];
345+
postprocessing.quad.materials[ 0 ] = postprocessing.materialScreen;
347346

348347
postprocessing.materialScreen.uniforms.tDiffuse.texture = postprocessing.rtTexture3;
349348
postprocessing.materialScreen.uniforms.opacity.value = 1.2;

‎examples/webgl_rtt.html

+23-29
Original file line numberDiff line numberDiff line change
@@ -39,24 +39,25 @@
3939
<script type="text/javascript" src="js/Stats.js"></script>
4040

4141
<script id="fragment_shader_screen" type="x-shader/x-fragment">
42+
4243
varying vec2 vUv;
4344
uniform sampler2D tDiffuse;
4445

45-
void main(void) {
46+
void main() {
4647

47-
//gl_FragColor = texture2D( tDiffuse, vec2( vUv.x, 1.0 - vUv.y ) );
4848
gl_FragColor = texture2D( tDiffuse, vUv );
4949

5050
}
51+
5152
</script>
5253

5354
<script id="fragment_shader_pass_1" type="x-shader/x-fragment">
55+
5456
varying vec2 vUv;
5557
uniform float time;
5658

57-
void main(void) {
59+
void main() {
5860

59-
//gl_FragColor = vec4( time, vUv.x, vUv.y, 1.0 );
6061
float r = vUv.x;
6162
if( vUv.y < 0.5 ) r = 0.0;
6263
float g = vUv.y;
@@ -65,18 +66,20 @@
6566
gl_FragColor = vec4( r, g, time, 1.0 );
6667

6768
}
69+
6870
</script>
6971

7072
<script id="vertexShader" type="x-shader/x-vertex">
73+
7174
varying vec2 vUv;
7275

7376
void main() {
7477

7578
vUv = uv;
76-
//gl_Position = vec4( position, 1.0 );
7779
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
7880

7981
}
82+
8083
</script>
8184

8285

@@ -104,8 +107,7 @@
104107

105108
container = document.getElementById( 'container' );
106109

107-
cameraRTT = new THREE.Camera();
108-
cameraRTT.projectionMatrix = THREE.Matrix4.makeOrtho( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, -10000, 10000 );
110+
cameraRTT = new THREE.OrthoCamera( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, -10000, 10000 );
109111
cameraRTT.position.z = 100;
110112

111113
camera = new THREE.Camera( 30, window.innerWidth / window.innerHeight, 1, 10000 );
@@ -117,16 +119,12 @@
117119
sceneScreen = new THREE.Scene();
118120

119121
var light = new THREE.DirectionalLight( 0xffffff );
120-
light.position.x = 0;
121-
light.position.y = 0;
122-
light.position.z = 1;
122+
light.position.set( 0, 0, 1 );
123123
light.position.normalize();
124124
sceneRTT.addLight( light );
125125

126126
light = new THREE.DirectionalLight( 0xffaaaa, 1.5 );
127-
light.position.x = 0;
128-
light.position.y = 0;
129-
light.position.z = -1;
127+
light.position.set( 0, 0, -1 );
130128
light.position.normalize();
131129
sceneRTT.addLight( light );
132130

@@ -148,8 +146,6 @@
148146

149147
} );
150148

151-
// var mt = new THREE.MeshBasicMaterial( { color:0xffffff, map: ImageUtils.loadTexture( "textures/land_ocean_ice_cloud_2048.jpg" ) } );
152-
153149
var plane = new THREE.PlaneGeometry( window.innerWidth, window.innerHeight );
154150

155151
quad = new THREE.Mesh( plane, material );
@@ -166,17 +162,19 @@
166162
var n = 5,
167163
geometry = new THREE.SphereGeometry( 10, 64, 32 ),
168164
material2 = new THREE.MeshLambertMaterial( { color:0xffffff, map: rtTexture } );
169-
//material2 = new THREE.MeshBasicMaterial( { color:0xffffff, map: rtTexture } );
170165

171-
for( var j = 0; j < n; j++ ) {
166+
for( var j = 0; j < n; j ++ ) {
172167

173-
for( var i = 0; i < n; i++ ) {
168+
for( var i = 0; i < n; i ++ ) {
174169

175170
mesh = new THREE.Mesh( geometry, material2 );
171+
176172
mesh.position.x = ( i - (n-1)/2 ) * 20;
177173
mesh.position.y = ( j - (n-1)/2 ) * 20;
178174
mesh.position.z = 0;
175+
179176
mesh.rotation.y = 1.57;
177+
180178
scene.addObject( mesh );
181179

182180
}
@@ -185,6 +183,7 @@
185183
renderer = new THREE.WebGLRenderer();
186184
renderer.setSize( window.innerWidth, window.innerHeight );
187185
renderer.autoClear = false;
186+
188187
container.appendChild( renderer.domElement );
189188

190189
stats = new Stats();
@@ -198,21 +197,17 @@
198197

199198
function createMesh( geometry, xscene ) {
200199

201-
var mat1 = new THREE.MeshPhongMaterial( { color: 0x555555, specular:0xffaa00, shininess:5 } ),
202-
mat2 = new THREE.MeshPhongMaterial( { color: 0x550000, specular:0xff2200, shininess:5 } );
200+
var mat1 = new THREE.MeshPhongMaterial( { color: 0x555555, specular: 0xffaa00, shininess: 5 } ),
201+
mat2 = new THREE.MeshPhongMaterial( { color: 0x550000, specular: 0xff2200, shininess: 5 } );
203202

204203
zmesh1 = new THREE.Mesh( geometry, mat1 );
205-
zmesh1.position.x = 0;
206-
zmesh1.position.y = 0;
207-
zmesh1.position.z = 100;
208-
zmesh1.scale.x = zmesh1.scale.y = zmesh1.scale.z = 150;
204+
zmesh1.position.set( 0, 0, 100 );
205+
zmesh1.scale.set( 150, 150, 150 );
209206
xscene.addObject( zmesh1 );
210207

211208
zmesh2 = new THREE.Mesh( geometry, mat2 );
212-
zmesh2.position.x = 0;
213-
zmesh2.position.y = 150;
214-
zmesh2.position.z = 100;
215-
zmesh2.scale.x = zmesh2.scale.y = zmesh2.scale.z = 75;
209+
zmesh2.position.set( 0, 150, 100 );
210+
zmesh2.scale.set( 75, 75, 75 );
216211
xscene.addObject( zmesh2 );
217212

218213
}
@@ -271,7 +266,6 @@
271266

272267
renderer.enableDepthBufferWrite( false );
273268
renderer.render( sceneScreen, cameraRTT );
274-
//renderer.render( sceneRTT, cameraRTT );
275269
renderer.enableDepthBufferWrite( true );
276270

277271
// Render second scene to screen

‎examples/webgl_shader_lava.html

+4-5
Original file line numberDiff line numberDiff line change
@@ -203,8 +203,7 @@
203203

204204
postprocessing.scene = new THREE.Scene();
205205

206-
postprocessing.camera = new THREE.Camera();
207-
postprocessing.camera.projectionMatrix = THREE.Matrix4.makeOrtho( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, -10000, 10000 );
206+
postprocessing.camera = new THREE.OrthoCamera( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, -10000, 10000 );
208207
postprocessing.camera.position.z = 100;
209208

210209
var pars = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat };
@@ -291,7 +290,7 @@
291290

292291
// Render quad with blured scene into texture (convolution pass 1)
293292

294-
postprocessing.quad.materials = [ postprocessing.materialConvolution ];
293+
postprocessing.quad.materials[ 0 ] = postprocessing.materialConvolution;
295294

296295
postprocessing.materialConvolution.uniforms.tDiffuse.texture = postprocessing.rtTexture1;
297296
postprocessing.materialConvolution.uniforms.uImageIncrement.value = postprocessing.blurx;
@@ -307,7 +306,7 @@
307306

308307
// Render original scene with superimposed blur to texture
309308

310-
postprocessing.quad.materials = [ postprocessing.materialScreen ];
309+
postprocessing.quad.materials[ 0 ] = postprocessing.materialScreen;
311310

312311
postprocessing.materialScreen.uniforms.tDiffuse.texture = postprocessing.rtTexture3;
313312
postprocessing.materialScreen.uniforms.opacity.value = 1.25;
@@ -317,7 +316,7 @@
317316
// Render to screen
318317

319318
postprocessing.materialFilm.uniforms.time.value += 0.01;
320-
postprocessing.quad.materials = [ postprocessing.materialFilm ];
319+
postprocessing.quad.materials[ 0 ] = postprocessing.materialFilm;
321320

322321
postprocessing.materialScreen.uniforms.tDiffuse.texture = postprocessing.rtTexture1;
323322
renderer.render( postprocessing.scene, postprocessing.camera );

‎examples/webgl_shadowmap.html

+1-2
Original file line numberDiff line numberDiff line change
@@ -135,8 +135,7 @@
135135

136136
function createHUD() {
137137

138-
cameraOrtho = new THREE.Camera( 45, SHADOW_MAP_WIDTH / SHADOW_MAP_HEIGHT, NEAR, FAR );
139-
cameraOrtho.projectionMatrix = THREE.Matrix4.makeOrtho( SCREEN_WIDTH / - 2, SCREEN_WIDTH / 2, SCREEN_HEIGHT / 2, SCREEN_HEIGHT / - 2, -10, 1000 );
138+
cameraOrtho = new THREE.OrthoCamera( SCREEN_WIDTH / - 2, SCREEN_WIDTH / 2, SCREEN_HEIGHT / 2, SCREEN_HEIGHT / - 2, -10, 1000 );
140139
cameraOrtho.position.z = 10;
141140

142141
var shader = THREE.ShaderUtils.lib[ "screen" ];

‎src/cameras/OrthoCamera.js

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
/**
2+
* @author alteredq / http://alteredqualia.com/
3+
*/
4+
5+
THREE.OrthoCamera = function ( left, right, top, bottom, near, far, target ) {
6+
7+
THREE.Camera.call( this, 45, 1, near, far, target );
8+
9+
this.left = left;
10+
this.right = right;
11+
this.top = top;
12+
this.bottom = bottom;
13+
14+
this.updateProjectionMatrix();
15+
16+
};
17+
18+
THREE.OrthoCamera.prototype = new THREE.Camera();
19+
THREE.OrthoCamera.prototype.constructor = THREE.OrthoCamera;
20+
21+
THREE.OrthoCamera.prototype.updateProjectionMatrix = function () {
22+
23+
this.projectionMatrix = THREE.Matrix4.makeOrtho( this.left, this.right, this.top, this.bottom, this.near, this.far );
24+
25+
};
26+

‎utils/build.py

+5
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@
3131
'core/Spline.js',
3232
'core/Edge.js',
3333
'cameras/Camera.js',
34+
'cameras/OrthoCamera.js',
3435
'lights/Light.js',
3536
'lights/AmbientLight.js',
3637
'lights/DirectionalLight.js',
@@ -138,6 +139,7 @@
138139
'core/UV.js',
139140
'core/Geometry.js',
140141
'cameras/Camera.js',
142+
'cameras/OrthoCamera.js',
141143
'lights/Light.js',
142144
'lights/AmbientLight.js',
143145
'lights/DirectionalLight.js',
@@ -185,6 +187,7 @@
185187
'core/Face4.js',
186188
'core/UV.js',
187189
'cameras/Camera.js',
190+
'cameras/OrthoCamera.js',
188191
'materials/ParticleDOMMaterial.js',
189192
'objects/Particle.js',
190193
'objects/Bone.js',
@@ -212,6 +215,7 @@
212215
'core/UV.js',
213216
'core/Geometry.js',
214217
'cameras/Camera.js',
218+
'cameras/OrthoCamera.js',
215219
'lights/Light.js',
216220
'lights/AmbientLight.js',
217221
'lights/DirectionalLight.js',
@@ -260,6 +264,7 @@
260264
'core/Spline.js',
261265
'core/Edge.js',
262266
'cameras/Camera.js',
267+
'cameras/OrthoCamera.js',
263268
'lights/Light.js',
264269
'lights/AmbientLight.js',
265270
'lights/DirectionalLight.js',

0 commit comments

Comments
 (0)
Please sign in to comment.