Canvas Library
 

Colors and Textures formatted with CSS - taccGL™ Tutorial

Each 3D surface has a color/or and a texture. A texture is an image that is mapped on the surface. In section Basic Shapes we already had examples for colored surfaces and examples for HTML elements shown as 3D objects.

In fact a textured rectangle in taccgl™ is nothing else than an HTML img-element shown as 3D object and vice versa an HTML element shown as 3D object is just as 3D rectangle that carries the image of a 3D element as texture. You can also use HTML elements with nested elements inside and formatted with CSS as textures.

almost empty element with id="exh10r"
taccgl.actor('exh10i') . position ({el:"exh10r"}). duration(5). start();
RUN
taccgl.actor('exh10i',taccgl.dddBox) . position ({el:"exh10r"}). duration(5). start();
RUN
taccgl.actor('exh10i',taccgl.dddBox) . position ({el:"exh10r"}). rotateMiddle(2,3,4). duration(5). start();
RUN

The example has an HTML image showing a rock-texture with id="exh10i" on the left, which normally would have visibility:hidden. The example uses that image-texture and displays it on the right.

Opacity / Alpha

almost empty element with id="exh20"

Using the alpha method, it is possible to change the opacity of the mapped texture. If a color is specified as well, the color is used a background and will shine through a partially transparent texture. If alpha has two parameters, it animates the opacity from the first to the second value.

taccgl.actor('exh10i') . position ({el:"exh20"}). alpha(0.5). duration(5). start();
RUN
taccgl.actor('exh10i') . position ({el:"exh20"}). bgColor("red") . alpha(0.5). duration(5). start();
RUN
taccgl.actor('exh10i') . position ({el:"exh20"}). bgColor("black") . alpha(1,0) . duration(1). start();
RUN
taccgl.actor('exh10i') . position ({el:"exh20"}). alpha(1,0) . rotateMiddle(2,3,4). duration(1). start();
RUN

mapActor

almost empty element with id="exh40r"

The mapActor method maps an HTML as texture on a 3D transition.

taccgl.actor('exh40r') . mapActor ("exh10i"). duration(5). start();
RUN
taccgl.actor('exh40r',taccgl.dddBox) . selFront(). mapActor ("exh10i"). duration(5). start();
RUN
taccgl.actor('exh40r',taccgl.dddBox) .selBack (). mapActor ("exh10i").
selRight(). bgColor("yellow"). rotateMiddle(2,3,4). duration(5). start();
RUN

Lighting

In reality, while an object rotates away from a light source it receives less and less light. This effect is simulated by WebGL™ and needed to nicely display 3D objects. Look at the following scene and turn it with the mouse to see colors change. The effect is visible on the side surfaces of the cube and very well visible by comparing the color of the two rectangles on top, while turning the scene.

Also for display of curved surfaces lighting plays an important role, e.g. see the edges of the cube. taccgl™ automatically calculates colors and gradients as they fit consistently with the geometry.

A light source, which is per default directly in front of the screen, is simulated. Every 3D object receives light directly from this light source and reflects it to the user (called diffuse reflection). In reality objects receive addition light from many other light sources or via reflection from other objects. This process is simulated in a simplified way by a single factor (ambient reflection). With taccgl™ you can adjust diffuse and ambient reflection for all objects together and for each object individually. We do not have tutorial on this, please refer to the manual in the Lighting section.

Per default lighting parameters are set in a way that surfaces on the z=0 and all parallel planes, e.g. all normal HTML elements, receive the full light. When turned, they receive less diffuse light and so get darker.

WebGL™ is a trademark of the Khronos Group Inc.