This page contains comments that actually belong to the home page, because we currently
do not have a comment function integrated in the home page.
WebGL™ is a trademark of the Khronos Group Inc.
sury77: mouse over animation
First of all very powerful library.Thanks for share.
Any way how to capture mouse over running animation.
Response from taccgl.org:
Thank you very much for your question!
Normally taccgl uses a css property called pointer-events:none, that lets the
browser process all mouse events just as unsual. So you can attach event handlers
to all the HTML/CSS elements on the page, and all HTML elements keep on working.
If you wanted to e.g. use a 3D object as a button you can put an HTML element
with onclick handler at the same screen position. To catch more events you can have
event handlers in the body element or you can use a transparent div on top
of the complete page to catch everything. So far we have not implemented
any functions, that find out what 3D object was clicked or selected with the
So in short in the normal default mode the lib leaves all the mouse event
processing to the browser and you need to program event handling the classical
The animation plays on an HTML 3D canvas element that usually covers the complete
window. So normally all mouse events go to that canvas element.
We nevertheless by default use the pointer-events:none on the canvas and so
the browser does not send any mouse events the 3D canvas.
You can select a blocking-controller instead of the forwarding-controller
(see documentation of the controller class) to change that behaviour.
Then you could attach mouse event handlers to the 3D canvas.
This is however not really advisable, because on slow devices
for performance reasons the 3D canvas shrinks playing the animation
on part of the window only and in that event, it will not
catch all events any more.
One more note, some older IE versions, IE 9 I think, do not support
pointer-events then the forwarding-controller emulates the bahaviour
by processing and forwarding mouse events.
So the conclusion is, if you want normal event procession of the
browser there is nothing todo, if you want to capture events from
all or part of the window (in a way the HTML elements there do
not receive the events any more) put a transparent DIV there and
attach event handlers.
John: where to start?
hello i am a new software/web developer student going into my second semester of college.
I am so fascinated by WebGL. I have the taccgl library files folder on my desktop.
when i click the index html i can run the examples but when i click near the bottom where it says for local file
example...and i try to run the torus.
it does nothing so i assume its not working. I need to append google chrome but cant figure it out.
the directions are kind of skewed. also where is the first place to start
learning the code for the webgl graphics to integrate into my html and css.
i know html and css and am just starting a little java but this webgl
code i have no idea..i can create a webpage no problem..
so give me the next best step..direct me to a website or book or something please.
Response from taccgl.org:
1. If the local file example is not working in chrome, then you need
to restart chrome with a special option. This is unfortunately quite
inconvenient, but it applies only for local development, not if you upload
your pages to a web server and run/test them from there.
You need to close chrome and then do a right click on a copy of the
icon of chrome on your desktop.
This should open the context menu. Therein please select "Properties".
Then a windows property sheet opens.
Please find the field labelled
target therein and add the options
at the end of the target field. So the complete content of the
target field should read something like
C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe --allow-file-access-from-files --enable-file-cookies
This will disable some security options of chrome, when started with the
nmodified desktop icon, and therefore it makes sense to use that new desktop
icon of chrome for local testing only.
You need to completely close all windows of chrome and restart chrom with the
new icon for this to work.To learn WebGL itself, I would recommend
WebGL is however quite hard, so normally it is much easier to start learing a library that uses/hides the webgl details. You could start
with the taccgl.org/tutorial, if you want to enhance HTML/CSS pages,
nor you might want to look for other libraries like three.js
if you want to create complex stand alone 3D animations or games.