HTML5 Canvas 3D WebGL (TM) js Library

alloc Library Method

Short Description: Allocate Space on Texture Atlas

Signature: t.alloc (w,h) or ({params})
Group: Texture
Class: transition Class

Allocates space on the texture atlas canvas for the transition.

Transitions can either show a color or a mapped image, the latter is called a texture. The texture can either be shared with another transition or an individual new texture image for the transition can be produced. In the latter case space on the texture atlas needs to be allocated using this alloc method.

alloc is automatically implicitly called by paint, if it was not called explicitely before. It needs to be called explicitely to provide special non-default paramters or in case painting of the images is programmed manually without using paint.

Transitions which have a color and no texture need to use color (or bgColor and alpha(0)) to assign a color and to set the background opacity to 0. Transitions that want to share the texture of another transition can use material.

Simple Examples without Parameters

The following two examples has the same effect and show the most common use of alloc. In the first example alloc is implicitely called by paint, in the second example it is called explicitely.



Alloc with w and h Parameters

Sample HTML element with id="s10"

Using the w and h paramters width and height of the space to allocate can be given. Default is width and height of the HTML element associated with the transition. Allocating a bigger texture in general shows the texture in better quality, which becomes especially apparent if the shown element is enlarged. On the other hand it needs more texture space.


var t=taccgl.a("s10"); t.posZ(0,4800).alloc(t.w*0.5,t.h*0.5).dur(10).paint().start();
var t=taccgl.a("s10"); t.posZ(0,4950).alloc(t.w*5,t.h*5).dur(10).paint().start();

The second two example calculate the size of the texture space based on the size of the underlying HTML element by using t.w and t.h.

Alloc without Paint

The following example uses alloc but no paint. Instead it uses the browsers 2D Canvas drawing functions to draw a texture on the allocated texture space.


var t=taccgl.a("eximg2").from({oy:-200}).alloc();
var c=taccgl.texc; c.strokeStyle="#000000"; c.lineWidth=10;
c.beginPath(); c.moveTo(t.x,t.y); c.lineTo(t.x+t.w, t.y+t.h); c.stroke();

Alloc Caching

If alloc is called multiple times for transitions that are associated with the same HTML element, it caches the allocation and returns the same texture space for both transitions.

This is an important optimization for texture space. If it is not desired the parameter cache:false must be supplied.

Additional Parameters params

Additional parameters can be supplied as fields of a parameter object passed a single parameter to alloc.

w and h have the same function as if they supplied directly as parameters.

cache controls caching as discussed previously.

Sample HTML element with id="s11"

scale, scalew, scaleh scale the texture space allocated by a given factor. A single factor can be given or separate factors for width and height.



padleft, padright, padtop, and padbottom add some space at the left, right, top, or bottom of the texture. This does not enlarge the allocated texture itself, but leaves space on the texture atlas between the allocated textue and other allocated textures. In the following example paint works on the allocated textue and then the clip method is used to extend the displayed texture to the complete allocated space including the padding.


var a=taccgl.a("eximg3").to({ox:200}).
alloc({padleft:10, padright:10, padtop:10, padbottom:10}).paint();

WebGL™ is a trademark of the Khronos Group Inc.

Next Page:transition.color - Set color / color animation
Previous Page: transition.alpha - Set Texture Opacity