Skip to content
This repository has been archived by the owner on Apr 14, 2021. It is now read-only.

Commit

Permalink
Latest threejs, bloom option, hide light helper option
Browse files Browse the repository at this point in the history
  • Loading branch information
sam committed Jan 17, 2015
1 parent 2dc7686 commit 4de2fba
Show file tree
Hide file tree
Showing 14 changed files with 2,533 additions and 1,993 deletions.
78 changes: 62 additions & 16 deletions source/Main.ts
@@ -1,3 +1,7 @@
module THREE {
export var BloomPass;
}

class Main {
private renderstats: Stats = new Stats();
private updatestats: Stats = new Stats();
Expand All @@ -23,8 +27,14 @@ class Main {
private rotation: THREE.Vector3 = new THREE.Vector3();
private palette: THREE.Texture;

private show_light: boolean = true;
private light_helper: THREE.DirectionalLightHelper;
private light: THREE.DirectionalLight;

private enable_bloom: boolean = true;
private effect_composer: THREE.EffectComposer; // Used for bloom effect
private render_target: THREE.WebGLRenderTarget;

private dat: dat.GUI;
private rotation_enabled: boolean = true;
private rotation_speed: number = 2;
Expand All @@ -34,7 +44,7 @@ class Main {
private light_z: number = -300;

private light_tween: TWEEN.Tween;
private light_tweening_enabled: boolean = false;
private light_tweening_enabled: boolean = true;

private texture_change_controller: dat.GUIController;

Expand Down Expand Up @@ -75,13 +85,19 @@ class Main {
this.dat = new dat.GUI();
this.dat.add(this, "rotation_enabled", true);
this.dat.add(this, "rotation_speed", 2, 15);
this.dat.add(this, "light_tweening_enabled", false).onChange(this.on_light_tween_enabled_change);
this.dat.add(this, "enable_bloom", true);
this.dat.add(this, "light_tweening_enabled", true).onChange(this.on_light_tween_enabled_change);
this.dat.add(this, "show_light", true).onChange(this.on_show_light_change);
this.dat.add(this, "light_x", -200, 300).listen();
this.dat.add(this, "light_y", 200, 400).listen();
this.dat.add(this, "light_z", -300, 300).listen();
}

private on_light_tween_enabled_change = (value: boolean): void => {
this.tween_light(value);
}

private tween_light(value: boolean): void {
if (value == true) {
this.light_z = -300;
this.light_tween = new TWEEN.Tween(this).to({ light_z: 300 }, 8000).easing(TWEEN.Easing.Sinusoidal.InOut).yoyo(true).repeat(Infinity).start().onUpdate(this.on_light_tween_update);
Expand All @@ -91,6 +107,10 @@ class Main {
}
}

private on_show_light_change = (value: boolean): void => {
this.light_helper.visible = value;
}

private on_light_tween_update = (value:number): void => {
//this.current_palette = Math.round(value * this.num_palettes);
//this.on_palette_change(this.current_palette);
Expand Down Expand Up @@ -151,19 +171,19 @@ class Main {
var webgl_support = WebGLDetector.detect();

if (webgl_support === WebGLSupport.SUPPORTED_AND_ENABLED) {
this.create_webgl_scene();

this.scene = new THREE.Scene();
this.camera_target = new THREE.Vector3(0, 150, 0);
this.camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
this.camera.position.y = 800;

this.scene = new THREE.Scene();
this.create_webgl_scene();

this.populate_scene();
this.setup_shader();

this.palette = THREE.ImageUtils.loadTexture("assets/images/palette0.png", new THREE.UVMapping(), this.on_texture_loaded);
this.palette = THREE.ImageUtils.loadTexture("assets/images/palette0.png", THREE.Texture.DEFAULT_MAPPING, this.on_texture_loaded, this.on_texture_loaded_error);
for (var i = 1; i <= this.num_palettes; i++) {
THREE.ImageUtils.loadTexture("assets/images/palette" + i.toString() + ".png", new THREE.UVMapping(), this.on_additional_palette_loaded);
THREE.ImageUtils.loadTexture("assets/images/palette" + i.toString() + ".png", THREE.Texture.DEFAULT_MAPPING, this.on_additional_palette_loaded, this.on_texture_loaded_error);
}

var container = document.createElement('div');
Expand All @@ -174,7 +194,7 @@ class Main {
info.style.width = '100%';
info.style.textAlign = 'center';
info.style.color = 'white';
info.innerHTML = 'single pass palette <a href="http://samcodes.co.uk/" target="_blank">shader</a>. model is chiba city blues by <a href="http://www.cs.columbia.edu/~keenan/Projects/ModelRepository/">keenan crane</a>.';
info.innerHTML = 'palette <a href="http://samcodes.co.uk/" target="_blank">shader</a>. model by <a href="http://www.cs.columbia.edu/~keenan/Projects/ModelRepository/">keenan crane</a>.';
container.appendChild(info);

this.setup_options();
Expand All @@ -194,8 +214,10 @@ class Main {
this.light.position.multiplyScalar(250);
this.scene.add(this.light);

var helper = new THREE.DirectionalLightHelper(this.light, 150);
this.scene.add(helper);
this.light_helper = new THREE.DirectionalLightHelper(this.light, 150);
this.scene.add(this.light_helper);

this.tween_light(true);

loader.load("assets/models/city.js", this.on_model_loaded);
}
Expand Down Expand Up @@ -251,6 +273,10 @@ class Main {
this.palettes_loaded = this.palettes_loaded + 1;
}

private on_texture_loaded_error = (): void => {
console.log("failed to load a texture...");
}

private get palettes_loaded(): number {
return this._palettes_loaded;
}
Expand All @@ -266,32 +292,48 @@ class Main {

private on_palette_change = (value: number): void => {
var palette_value = Math.round(value);
THREE.ImageUtils.loadTexture("assets/images/palette" + palette_value.toString() + ".png", new THREE.UVMapping(), this.on_texture_loaded);
THREE.ImageUtils.loadTexture("assets/images/palette" + palette_value.toString() + ".png", THREE.Texture.DEFAULT_MAPPING, this.on_texture_loaded);
}

private create_webgl_scene(): void {
var gl_renderer: THREE.WebGLRenderer = new THREE.WebGLRenderer();
var gl_renderer: THREE.WebGLRenderer = new THREE.WebGLRenderer({ antialias: true });
gl_renderer.setSize(this.renderer_size.x, this.renderer_size.y + 1);
gl_renderer.autoClear = true;
gl_renderer.gammaInput = true;
gl_renderer.gammaOutput = true;
gl_renderer.setClearColor(new THREE.Color(0, 0, 0));
this.renderer = gl_renderer;

var div = document.getElementById("background");
div.appendChild(this.renderer.domElement);

var left: number = 0;
var right: number = this.renderer_size.x;
var top: number = this.renderer_size.y;
var bottom: number = 0;

this.render_target = new THREE.WebGLRenderTarget(right - left, top - bottom, {
minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBAFormat, stencilBuffer: true
});
this.effect_composer = new THREE.EffectComposer(gl_renderer, this.render_target);

var renderPass = new THREE.RenderPass(this.scene, this.camera);
var bloomEffect = new THREE.BloomPass(1.5, 25, 4, 512);
bloomEffect.renderTargetX.format = THREE.RGBAFormat;
bloomEffect.renderTargetY.format = THREE.RGBAFormat;
var copyPass = new THREE.ShaderPass(THREE.CopyShader);
copyPass.renderToScreen = true;

this.effect_composer.addPass(renderPass);
this.effect_composer.addPass(bloomEffect);
this.effect_composer.addPass(copyPass);

this.raycaster = new THREE.Raycaster();
this.input_ray = new THREE.Vector3();
this.input_dir = new THREE.Vector3();

this.pointer_position = new THREE.Vector2(9999, 9999);

var div = document.getElementById("background");
div.appendChild(this.renderer.domElement);

window.addEventListener('resize', this.on_window_resize, false);

document.addEventListener('contextmenu', this.on_context_menu, false);
Expand All @@ -313,7 +355,11 @@ class Main {
private render(dt : number) : void {
this.renderstats.begin();

this.renderer.render(this.scene, this.camera);
if (this.enable_bloom) {
this.effect_composer.render(dt);
} else {
this.renderer.render(this.scene, this.camera);
}

this.renderstats.end();
}
Expand Down
8 changes: 7 additions & 1 deletion tslib/three/three-orbitcontrols.d.ts
Expand Up @@ -38,5 +38,11 @@ declare module THREE {
mouseButtons: { ORBIT: MOUSE; ZOOM: MOUSE; PAN: MOUSE; };

update():void;

// EventDispatcher mixins
addEventListener(type: string, listener: (event: any) => void ): void;
hasEventListener(type: string, listener: (event: any) => void): void;
removeEventListener(type: string, listener: (event: any) => void): void;
dispatchEvent(event: { type: string; target: any; }): void;
}
}
}
61 changes: 61 additions & 0 deletions tslib/three/three-tests.ts
@@ -0,0 +1,61 @@
/*
The MIT License
Copyright (c) 2010-2013 three.js authors
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
*/

/// <reference path="./tests/math/test_unit_math.ts" />

// webGL renderer test.
/// <reference path="./tests/webgl/webgl_animation_cloth.ts" />
/// <reference path="./tests/webgl/webgl_animation_skinning_morph.ts" />
/// <reference path="./tests/webgl/webgl_buffergeometry.ts" />
/// <reference path="./tests/webgl/webgl_camera.ts" />
/// <reference path="./tests/webgl/webgl_custom_attributes.ts" />
/// <reference path="./tests/webgl/webgl_geometries.ts" />
/// <reference path="./tests/webgl/webgl_helpers.ts" />
/// <reference path="./tests/webgl/webgl_interactive_cubes.ts" />
/// <reference path="./tests/webgl/webgl_interactive_raycasting_pointcloud.ts" />
/// <reference path="./tests/webgl/webgl_lensflares.ts" />
/// <reference path="./tests/webgl/webgl_lights_heimsphere.ts" />
/// <reference path="./tests/webgl/webgl_lines_colors.ts" />
/// <reference path="./tests/webgl/webgl_loader_awd.ts" />
/// <reference path="./tests/webgl/webgl_materials.ts" />
/// <reference path="./tests/webgl/webgl_morphtargets.ts" />
/// <reference path="./tests/webgl/webgl_particles_billboards.ts" />
/// <reference path="./tests/webgl/webgl_postprocessing.ts" />
/// <reference path="./tests/webgl/webgl_shader.ts" />
/// <reference path="./tests/webgl/webgl_sprites.ts" />

// css3d renderer test.
/// <reference path="./tests/css3d/css3d_periodictable.ts" />
/// <reference path="./tests/css3d/css3d_sprites.ts" />

// canvas renderer test.
/// <reference path="./tests/canvas/canvas_camera_orthographic.ts" />
/// <reference path="./tests/canvas/canvas_geometry_cube.ts" />
/// <reference path="./tests/canvas/canvas_interactive_cubes_tween.ts" />
/// <reference path="./tests/canvas/canvas_lights_pointlights.ts" />
/// <reference path="./tests/canvas/canvas_materials.ts" />
/// <reference path="./tests/canvas/canvas_particles_floor.ts" />

// examples test.
/// <reference path="./tests/examples/detector.ts" />
1 change: 1 addition & 0 deletions tslib/three/three-tests.ts.tscparams
@@ -0,0 +1 @@

7 changes: 7 additions & 0 deletions www/index.html
Expand Up @@ -70,6 +70,13 @@
</footer>

<script type='text/javascript' src="jslib/three/three.js"></script>
<script type='text/javascript' src="jslib/three/EffectComposer.js"></script>
<script type='text/javascript' src="jslib/three/RenderPass.js"></script>
<script type='text/javascript' src="jslib/three/BloomPass.js"></script>
<script type='text/javascript' src="jslib/three/ShaderPass.js"></script>
<script type='text/javascript' src="jslib/three/CopyShader.js"></script>
<script type='text/javascript' src="jslib/three/ConvolutionShader.js"></script>
<script type='text/javascript' src="jslib/three/MaskPass.js"></script>
<script type='text/javascript' src="jslib/tween/tween.js"></script>
<script type='text/javascript' src="jslib/stats/stats.js"></script>
<script type='text/javascript' src="jslib/dat/dat.gui.js"></script>
Expand Down
115 changes: 115 additions & 0 deletions www/jslib/three/BloomPass.js
@@ -0,0 +1,115 @@
/**
* @author alteredq / http://alteredqualia.com/
*/

THREE.BloomPass = function ( strength, kernelSize, sigma, resolution ) {

strength = ( strength !== undefined ) ? strength : 1;
kernelSize = ( kernelSize !== undefined ) ? kernelSize : 25;
sigma = ( sigma !== undefined ) ? sigma : 4.0;
resolution = ( resolution !== undefined ) ? resolution : 256;

// render targets

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

this.renderTargetX = new THREE.WebGLRenderTarget( resolution, resolution, pars );
this.renderTargetY = new THREE.WebGLRenderTarget( resolution, resolution, pars );

// copy material

if ( THREE.CopyShader === undefined )
console.error( "THREE.BloomPass relies on THREE.CopyShader" );

var copyShader = THREE.CopyShader;

this.copyUniforms = THREE.UniformsUtils.clone( copyShader.uniforms );

this.copyUniforms[ "opacity" ].value = strength;

this.materialCopy = new THREE.ShaderMaterial( {

uniforms: this.copyUniforms,
vertexShader: copyShader.vertexShader,
fragmentShader: copyShader.fragmentShader,
blending: THREE.AdditiveBlending,
transparent: true

} );

// convolution material

if ( THREE.ConvolutionShader === undefined )
console.error( "THREE.BloomPass relies on THREE.ConvolutionShader" );

var convolutionShader = THREE.ConvolutionShader;

this.convolutionUniforms = THREE.UniformsUtils.clone( convolutionShader.uniforms );

this.convolutionUniforms[ "uImageIncrement" ].value = THREE.BloomPass.blurX;
this.convolutionUniforms[ "cKernel" ].value = THREE.ConvolutionShader.buildKernel( sigma );

this.materialConvolution = new THREE.ShaderMaterial( {

uniforms: this.convolutionUniforms,
vertexShader: convolutionShader.vertexShader,
fragmentShader: convolutionShader.fragmentShader,
defines: {
"KERNEL_SIZE_FLOAT": kernelSize.toFixed( 1 ),
"KERNEL_SIZE_INT": kernelSize.toFixed( 0 )
}

} );

this.enabled = true;
this.needsSwap = false;
this.clear = false;


this.camera = new THREE.OrthographicCamera( -1, 1, 1, -1, 0, 1 );
this.scene = new THREE.Scene();

this.quad = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2, 2 ), null );
this.scene.add( this.quad );

};

THREE.BloomPass.prototype = {

render: function ( renderer, writeBuffer, readBuffer, delta, maskActive ) {

if ( maskActive ) renderer.context.disable( renderer.context.STENCIL_TEST );

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

this.quad.material = this.materialConvolution;

this.convolutionUniforms[ "tDiffuse" ].value = readBuffer;
this.convolutionUniforms[ "uImageIncrement" ].value = THREE.BloomPass.blurX;

renderer.render( this.scene, this.camera, this.renderTargetX, true );


// Render quad with blured scene into texture (convolution pass 2)

this.convolutionUniforms[ "tDiffuse" ].value = this.renderTargetX;
this.convolutionUniforms[ "uImageIncrement" ].value = THREE.BloomPass.blurY;

renderer.render( this.scene, this.camera, this.renderTargetY, true );

// Render original scene with superimposed blur to texture

this.quad.material = this.materialCopy;

this.copyUniforms[ "tDiffuse" ].value = this.renderTargetY;

if ( maskActive ) renderer.context.enable( renderer.context.STENCIL_TEST );

renderer.render( this.scene, this.camera, readBuffer, this.clear );

}

};

THREE.BloomPass.blurX = new THREE.Vector2( 0.001953125, 0.0 );
THREE.BloomPass.blurY = new THREE.Vector2( 0.0, 0.001953125 );

0 comments on commit 4de2fba

Please sign in to comment.