Skip to content

Commit

Permalink
3d views have static tweenable properties (xyz etc)
Browse files Browse the repository at this point in the history
  • Loading branch information
@schell
schell committed Jul 6, 2012
1 parent 826cffe commit c71866f
Show file tree
Hide file tree
Showing 4 changed files with 176 additions and 92 deletions.
46 changes: 29 additions & 17 deletions index.html
View file
Expand Up @@ -33,44 +33,56 @@
name : "Main",
dependencies : [
'bang::View/Stage3d.js',
'bang::Shaders/TexShader.js',
'bang::View/View3d.js',
'bang::Geometry/Transform3d.js',
'bang::Utils/Ease.js',
'meshes::TrashCan.js'
],
init : function initMain (Stage3d, TexShader, Transform3d, Ease, TrashCan) {
init : function initMain (Stage3d, View3d, Transform3d, Ease, TrashCan) {
var stage = new Stage3d(300, 300);
stage.useShader(stage.shaders.texShader);
stage.y = -2;
stage.z = -8;
stage.rotationX = -Math.PI/3;
document.body.appendChild(stage.canvas);
var holder = {
z : 0
};
var spin = new Ease({
target : holder,
target : stage,
duration : 5000,
properties : {
z : 2*Math.PI
},
onUpdate : function () {
stage.transform = new Transform3d().translate(0,-2,-8);
stage.transform = stage.transform.rotate(-Math.PI/2, stage.transform.right());
stage.transform = stage.transform.rotate(holder.z, stage.transform.up());
stage.transform = stage.transform.rotate(Math.PI/10, stage.transform.right());
rotationZ : 2*Math.PI
},
onComplete : function (spin) {
holder.z = 0;
stage.rotationZ = 0;
spin.interpolate();
}
}).interpolate();

var view = new View3d();
view.scaleX = 2;
view.scaleY = 2;
view.useShader(stage.shaders.colorShader);
var top = 3;
var trans = new Ease ({
target : view,
duration : 5000,
properties : {
z : top
},
onComplete : function (trans) {
// Cycle up and down...
trans.config.properties.z = view.z == top ? 0 : top;
trans.interpolate();
}
}).interpolate();
stage.addView(view);

// Add the trashcan mesh...
stage.mesh = new TrashCan();
// Create the texture shader...
var tshader = stage.shader = new TexShader(stage.gl);
// Create an image for the texture...
var texture = new Image();
texture.onload = function() {
// Create a texture on the shader...
tshader.createTexture('trashcan', texture);
stage.shaders.texShader.createTexture('trashcan', texture);
stage.initialize();
};
texture.src = stage.mesh.dataURL;
Expand Down
37 changes: 21 additions & 16 deletions src/View/Stage3d.js
View file
Expand Up @@ -8,17 +8,19 @@
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * **/
mod({
name : 'Stage3d',
dependencies : [ 'bang::View/View3d.js', 'bang::Geometry/Transform3d.js', 'bang::Utils/Animation.js', 'bang::Shaders/Shader.js' ],
dependencies : [ 'bang::View/View3d.js', 'bang::Geometry/Transform3d.js', 'bang::Utils/Animation.js', 'bang::Shaders/TexShader.js', 'bang::Shaders/Shader.js' ],
/** * *
* Initializes the Stage object constructor.
* @return {function}
* * **/
init : function StageFactory (View3d, Transform3d, Animation, Shader) {
init : function StageFactory (View3d, Transform3d, Animation, TexShader, Shader) {
/** * *
*
* @constructor
* * **/
function Stage3d(width, height) {
// Run the View3d constructor giving it a reference to a WebGLRenderingContext...
View3d.prototype.constructor.call(this);
/** * *
* An HTMLCanvasElement to hold our scene.
* @type {HTMLCanvasElement}
Expand All @@ -35,12 +37,14 @@ mod({
* * **/
this.height = height || this.canvas.height;

// Update the canvas's dimensions...
this.canvas.width = this.width;
this.canvas.height = this.height;

// Run the View3d constructor giving it a reference to a WebGLRenderingContext...
View3d.prototype.constructor.call(this, this.canvas.getContext('experimental-webgl'));

/** * *
* The WebGLRenderingContext
* @type {WebGLRenderingContext} gl
* * **/
this.gl = this.canvas.getContext('experimental-webgl');
/** * *
* An animation timer for scheduling redraws.
* @type {Animation}
Expand All @@ -66,8 +70,12 @@ mod({
* The shader program to use for drawing.
* @type {Shader|boolean}
* * **/
this.shader = this.gl ? new Shader(this.gl) : false;

this.shaders = {
texShader : new TexShader(this.gl),
colorShader : new Shader(this.gl)
};
// By default we'll use the normal color shader...
this.useShader(this.shaders.color);
// Set the root view...
this.stage = this;
}
Expand All @@ -84,10 +92,6 @@ mod({
Stage3d.prototype.sendGeometry = function Stage3d_sendGeometry() {
// Clear the stage...
this.gl.clear(this.gl.COLOR_BUFFER_BIT | this.gl.DEPTH_BUFFER_BIT);
// Update the projection matrix...
var pMatUniform = this.shader.uniformLocations.uPMatrix;
this.gl.uniformMatrix4fv(pMatUniform, false, new Float32Array(this.projection.transpose()));

View3d.prototype.sendGeometry.call(this);
};
/** * *
Expand All @@ -97,20 +101,21 @@ mod({
* @return {boolean}
* * **/
Stage3d.prototype.isInitialized = function Stage3d_isInitialized() {
return (this.initialized && this.shader && this.shader.id && View3d.prototype.isInitialized.call(this));
return (this.initialized && View3d.prototype.isInitialized.call(this));
};
/** * *
* Initializes the stage by compiling and linking shader programs.
* * **/
Stage3d.prototype.initialize = function Stage3d_initialize() {
this.gl.stage = this;
this.gl.clearColor(0,0,0,0);
this.gl.enable(this.gl.DEPTH_TEST);
this.gl.depthFunc(this.gl.LEQUAL);
this.gl.clear(this.gl.COLOR_BUFFER_BIT|this.gl.DEPTH_BUFFER_BIT);
this.initialized = true;
this.shader.compile();
this.shader.use();
for (var shaderName in this.shaders) {
var shader = this.shaders[shaderName];
shader.compile();
}

View3d.prototype.initialize.call(this);
};
Expand Down
6 changes: 5 additions & 1 deletion src/View/View.js
View file
Expand Up @@ -75,10 +75,14 @@ mod({
* * **/
this.parent = false;
/** * *
* The stage view.
* @type {Stage|false} stage
* * **/
this.stage = false;
/** * *
* A list of children of this view.
* @type {Array.<View>}
* * **/
this.displayList = [];
/** * *
* A string that identifies this view.
* @type {string}
Expand Down

0 comments on commit c71866f

Please sign in to comment.