TypeScript: assign dynamic canvas a container element and more?

Software: Away3D 4.x

GrokDD, Newbie
Posted: 19 April 2014 02:38 AM   Total Posts: 28

Hey gang, it’s been a while. I miss Away3D!

I’m experimenting with the TypeScript library, and have two questions I’ve been trying to work out all day.
I’ve followed the Away3D TypeScript - Getting Started guide.
Which is great, it gets it on screen. However the 3D view fills the browser.
I would like to fit the 3D view into a container.

1) How can I assign the dynamically created canvas a container element?

2) In the window.resize method, how can I then set the this._view’s width and height to the containing element’s height and width?

Things like “this. parentNode” don’t work because it is outside of the scope of the JavaScript.

I did accomplish what I am asking, by throwing in some jquery, its messy and I feel like there should be a better way.

As you’ll notice in the code below,
I append the first “canvas” element to my container “div”.
Then in the window.resize I use jquery to set the view’s height and width to the container’s dimensions.

This works for one page examples, but not if I want several away3D views on the same page. I’d rather it be more universal? If that makes sense.

///<reference path="../libs/away3d.next.d.ts" />
var examples;
(function (
examples{
    
var Test2 = (function () {
        
function Test2() {
            this
._view = new away.containers.View(new away.render.DefaultRenderer());
            
this._cubeGeometry = new away.primitives.CubeGeometry(100100100);
            
this._cubeMesh = new away.entities.Mesh(this._cubeGeometry);
            
this._timer = new away.utils.RequestAnimationFrame(this.onEnterFramethis);
            
this._view.scene.addChild(this._cubeMesh);
            
window.onresize = function (event{
                
return this.onResize(event);
            
};
            
this.onResize();
            
this._timer.start();
        
}
        Test2
.prototype.onEnterFrame = function (dt{
            this
._cubeMesh.rotationY += 1;
            
this._view.render();
        
};
        
// stage listener for resize events
        
Test2.prototype.onResize = function (event{
            
if (typeof event === "undefined"{ event null}
            this
._view.0;
            
this._view.0;
            
this._view.width = $('#away3DContainer').width();
            
this._view.height = $('#away3DContainer').height();
        
};
        return 
Test2;
    
})();
    
examples.Test2 Test2;
})(examples || (examples {}));

window.onload = function () {
    
new examples.Test2();
    $(
'canvas:first-of-type').appendTo($('#away3DContainer'));
};
//# sourceMappingURL=Test2.js.map 

 

   

GrokDD, Newbie
Posted: 21 April 2014 08:39 AM   Total Posts: 28   [ # 1 ]

Ok, I figured out part of the question.
I can now place the dynamically loaded canvas inside the container element after it was appended to the bottom of the body tags.

However, I still would like to assign it to the container element on creation.

Second part is, if I have more than one scene in the document, or other canvas elements.

How can I specifically identify the dynamically created canvas if I don’t know which order the canvases are being created???

For others that have the same question.

Set up your onload function as such:

window.onload = function () {
var awayContainer document.getElementById('away3DContainer');
new 
examples.AwayScene(awayContainer);
awayContainer.appendChild(document.getElementsByTagName('canvas')[0]);
}

and your constructor as such:

constructor(private away3DContainer)
        

and your resize function as such:

private onResize(event:Event null):void
{
       this
._view.0;
       
this._view.0;
       
this._view.width this.away3DContainer.offsetWidth;
       
this._view.height this.away3DContainer.offsetHeight;
   

GrokDD, Newbie
Posted: 22 April 2014 12:20 PM   Total Posts: 28   [ # 2 ]

Ok, I’ve gotten a little further along.

To my question of “How can I specifically identify the dynamically created canvas if I don’t know which order the canvases are being created?”

I’ve changed my onload function to look like:

var awayContainer document.getElementById('away3DContainer');
var 
awayCanvas:any = new examples.MinimalScene(awayContainer);
awayContainer.appendChild(awayCanvas); 

I just assigned the new canvas to a variable and cast typed it to “any”.

However, I would still like to assign the away3D scene to append to a specified container element on creation.

   

Avatar
Rob Bateman, Administrator
Posted: 25 May 2014 02:20 PM   Total Posts: 120   [ # 3 ]

Hey GrokDD

Been thinking about the best way to do this and have come up with the following, let me know if this sounds like it would satisfy your use case as well as the general case. The solution takes into account the possibility that the context layer (otherwise know as the Stage) may not be a canvas element in future, depending on what context the developer is using. At present, the possible options are WebGL and Flash, but this will be augmented to include canvas2d and css in future

1) it will be possiblt to (optionally) specify a generic html element as a placeholder for the stage in the stagemanager getFreeStageGL() method (this will be abstracted in future for other contexts). It is important to decouple this from the view and scene classes to allow to situations where views share the same context - for example when you want to draw two views to the same webgl layer

2) If no html element is specified, the created stage (eg from a webgl canvas) is attached to the document root on creation

3) If an html element is specified and already has a position in the document hierarchy, then this is used as a placeholder until the context is available, at which point the original element is removed from the document and the created stage canvas is added to the dom in the same location.

4) if a view is not set to share a context, then its x and y properties will control the local position of the context’s stage, otherwise this is controlled through the stage’s interface (when shared contexts are enabled, the stage has to be explicitly set on the view). Perhaps, in order to align more closely with standard dom practices, we should include an “absolute” mode on the view where x and y values controls absolute positioning, regardless of where the view is placed in the dom hierarchy?

hope that makes sense - please let me know if this feels like a natural way forward for management of stage layers in future AwayJS contexts

   

GrokDD, Newbie
Posted: 30 May 2014 08:52 AM   Total Posts: 28   [ # 4 ]

Rob B.

I’ve bee thinking about the scenarios above and have written a long response.

However, half of it would be eliminated if I knew if the away.scene can be displayed on multiple webGL canvases. Such as view “A” is rendered to once canvas element and view “B” is rendered to a separate canvas element all within the same HTML document.

I understand this was not possible in AS3 as swf files did not talk to each other too easily. However I think one of the added bonuses of AwayJS is that it may be possible to render to separate canvas elements.

Otherwise I imagine that if I want to have two different views in different areas of the HTML document, I would need one large webGL canvas element and create a bunch of blank space to divide my views.

   

Avatar
Rob Bateman, Administrator
Posted: 31 May 2014 05:57 PM   Total Posts: 120   [ # 5 ]

Well, saying its not possible in AS3 is actually incorrect - it absolutely is possible in AIR desktop if you have a multi-windowed application, and in these scenarios haivng multiple contexts is the only way you can render a scene across multiple views.

Even in a standard SWF, it is possible to create two separate views with their own separate contexts and have them render the same scene. However, this approach is not generally recommended unless there is osme good reason why view contexts cannot be shared. With separate contexts and separate Stage3D objects, each view has to upload its own set of data to the gpu, which essentially duplicates large amounts of memory when dealing with the same scene.

In AwayJS, the use cases are less clear cut and there will almost certainly be instance where separate contexts are desirable - eg. when two views need to be placed in different areas of a page and where they don’t share the same scene. This approach also doesn’t restrict you from having to manage a massive context area within which your views are maintained. However, it is still recommended that when the same scene data is being considered in multiple views, shared contexts are used when at all possible

   

GrokDD, Newbie
Posted: 02 June 2014 01:46 PM   Total Posts: 28   [ # 6 ]

Ah, I stand corrected.

Now that I’ve really come to comprehend your concept for construction, I’ve revamped my reply. I think you definitely know what you are doing with the JS creation process. I particularly like #3, as I can have a placeholder image that will be replaced once the context is ready. I hope the created stage will assume the placeholders attributes, i.e. “id”, position, dimensions, etc.

The way I see it playing out is:

I create a scene, that has a default view.

Then I make more views if I want.

Then I call a stage/canvas constructor method passing optional scene.view(s).  (An array, which will default to dividing the stage’s width up evenly among all views if no layout is set ahead of time). Also able to pass the optional placeholder HTML element which the canvas element will inherit its attributes and DOM positioning. Lastly an optional “positioning” string for in-line or absolute etc. (or is this inherited too?)

I can then call another stage/canvas constructor and either use a different scene or reference the first stage’s scene’s views.

Now I have two or more canvases, displaying one or more views each, all looking into the same or separate scenes.

In the end maybe a stage/canvas constructor call with no arguments passed, will default to create a stage/canvas, a scene, and a view, all the while appending the new canvas element to the body tag of the HTML document. **As long as I can make reference to the scene, view, etc.

I’m excited for a new updated TypeScript library. I’ve discovered some bugs with the latest GitHub update, and am looking forward to a more fuller stable release.

From another Rob B. goodnight, and good luck.

   
   

X

Away3D Forum

Member Login

Username

Password

Remember_me



X