HTML5+CSS on Canvas 3D WebGL (TM) Library
 

el Library Method

Signature: sc.el (pre, el)
Class: taccglShaderConfig Class
 

el must denote an HTML element, either by giving a DOM node or by giving the id of an HTML element as string.

If this option is enabled the position of the element specified is made available as #define constants in the shader. pre is used as name prefix for the generated constants. Constants are preT for t (y) or top coordinate, preS for s (x) or left coordinate, preW for width, preH for height, preMS for mid of s coordinate, and preMT for mid of t coordinate. All values are scaled to texture coordinates using TT and TS.

Examples

var s=taccgl.ssc('ShaderSample').el('TIM','testimg').dynTex();
var b=taccgl.actor(document.body).sc(s).dur(2).start();
RUN
<script id="ShaderSample" type="x-gsgl/x-shader">
:color
if (t<TIMT+TIMH) col=vec3(1.0,0.0,0.0);
</script>
 
var s=taccgl.ssc('ShaderSample2').el('TIM','pgMiddleColumnTable').dynTex();
var b=taccgl.actor(document.body).sc(s).dur(2).start();
RUN
<script id="ShaderSample2" type="x-gsgl/x-shader">
:color
if (abs((s-TIMMS)*(s-TIMMS)*TIMH*TIMH/TIMW/TIMW+(t-TIMMT)*(t-TIMMT)-TIMH*TIMH/4.0) < 0.001)
col=vec3(0.0,1.0,0.0);
</script>
 

WebGL™ is a trademark of the Khronos Group Inc.