taccgl.de

taccgl.org

taccgl Tutorial - Transitions and Animations

http://www.taccgl.org/tutorial/Transitions.html

3D Model using Transitions of Graphical Objects. Primary design goal of the taccgl™ library is to create more attractive and advanced HTML web pages, user-interfaces, and applications, classical, responsive, or mobile. Especially the goal is to support as many browsers and devices as possible, to switch to alternative content when necessary, and to provide an api, that can be used by classical web developers. 3D Model, Transitions, Scenes, and Animations. Transitions of graphical objects. A graphical obj...

taccgl.org

taccgl Tutorial - javascript embedding

http://www.taccgl.org/tutorial/javaScript_embedding.html

JavaScript Embedding - taccGL ™. If you are familiar with JavaScript you probably have already noticed that the definitions of animations for the taccgl™ canvas library are just small JavaScript programs. Then you probably can skip this section. In the First Example. We entered the animation directly into an a-tag like. Taccgl.actor('myel').rotateMiddle(0,1,0).start();. This works great, as long as the green code is small and does not contain double quotes (" ) but uses single quotes instead. Needs some ...

taccgl.org

taccgl Tutorial - HTML elements on Canvas

http://www.taccgl.org/tutorial/CanvasOperation.html

HTML elements on Canvas - taccGL ™. Although it looks like taccgl™ animating HTML elements, in fact images. Of HTML elements are animated. The following example takes four images of the. And moves them each to another direction. Taccgl™ uses a new HTML 5 feature named. For drawing. So the animation does not affect the. HTML elements. After the animation finished the. Appears where it always was. Can be used, which does not hide the HTML element. HTML element and animated image). Methods is that actor.

taccgl.org

taccgl Tutorial - Timing

http://www.taccgl.org/tutorial/Timing.html

Timing - taccGL ™. For each transition you can select a duration using dur. And a starting time startTime. Default duration is 1 second and default startTime is at second 0. In the next section ( Continuations. You will learn easier ways to connect various transitions rather than setting using startTime as discussed above. Using Showafter and ShowBefore. Note that in the previous example the. Which lets a transition show its object in its begin position even before the transition starts to run. As previo...

taccgl.org

taccgl Tutorial - 3D Models

http://www.taccgl.org/tutorial/Models.html

External 3D Models - taccGL ™. So far we discussed animation of HTML elements and creating simple objects like boxes. In addition you can show 3D Models that you created with some 3D modelling tool. taccgl™ can read OBJ files and many such tools, e.g. Blender can export such files. Method, which was described before, can take a 3D model as second parameter. In that case, it shows/animates the 3D model instead of an HTML/CSS element. Still actor. Is used as placeholder element. Is used to make the 3D mod.

taccgl.org

taccgl Tutorial - Continuations

http://www.taccgl.org/tutorial/Continuations.html

Continuations - taccGL ™. Using JavaScript you can assign a transition to a JavaScript variable. Later on, you can define a continuation of a previous transition using cont. This creates a new transition, which shows the same object as the continued transition at the position where the continued transition stopped. So further animation starts where and when the previous transition stopped. A common very simple use of cont. Is to freeze an element for a while using. Works quite differently than cont.

taccgl.org

taccgl Documentation - Restrictions

http://www.taccgl.org/developer_doc/Restrictions.html

The current version of the library is in beta test and probably contains bugs. It is not implemented completely and will probably not run on all browsers and client computers. Since the size of the texture canvas is limited, HTML elements to be animated must sit usually in the area of 1200*1424 pixels, see Library Options. The bigger the size, the slower the animation starts up and the more texture memory of the graphics card is needed. Taccgl™ implements rendering of HTML-elements partially itself...

taccgl.org

taccgl Tutorial - Expressions

http://www.taccgl.org/tutorial/Expressions.html

Expressions - taccGL ™. Using JavaScript you can assign a transition to a JavaScript variable. Later on you can access information about this transition. For example. This defines a transition named. But does not yet use start (1st line). Then it uses attributes step.x. These give the position of the underlying HTML element (testimg in this case) in pixels from the documents top left. The parameters for flyOut. This means the destination x-coordinate is identical to the. This example uses step.h. There i...

taccgl.org

Combining HTML5+CSS with WebGL - taccGL Web 3D Tutorial

http://www.taccgl.org/tutorial/index.html

Combining HTML5 CSS with WebGL™ - taccGL ™. WebGL Web 3D Tutorial. More Examples see Homepage. One of the most interesting new features of HTML5 is HTML5 canvas, especially canvas 3D or WebGL™, for awfully fast 2D and 3D graphics. WebGL allows the web developer to download high speed programs into the client computers graphic accelerator (GPU) and so to program virtually every pixel of a web document. You can animate 3D objects. And (resouces permitting) automatic shadow. Audience for this tutorial are H...