Help
RSS
API
Feed
Maltego
Contact
Domain > www.taccgl.org
×
More information on this domain is in
AlienVault OTX
Is this malicious?
Yes
No
DNS Resolutions
Date
IP Address
2019-11-30
82.165.26.86
(
ClassC
)
2026-02-08
195.201.108.33
(
ClassC
)
Port 80
HTTP/1.1 302 FoundDate: Sun, 08 Feb 2026 07:01:09 GMTServer: ApacheLocation: https://www.taccgl.org/Content-Length: 207Content-Type: text/html; charsetiso-8859-1 !DOCTYPE HTML PUBLIC -//IETF//DTD HTML 2.0//EN>html>head>title>302 Found/title>/head>body>h1>Found/h1>p>The document has moved a hrefhttps://www.taccgl.org/>here/a>./p>/body>/html>
Port 443
HTTP/1.1 200 OKDate: Sun, 08 Feb 2026 07:01:09 GMTServer: ApacheCache-Control: no-cachepragma: no-cacheVary: User-Agent,Accept-EncodingContent-Type: text/html; charsetutf-8Transfer-Encoding: chunked !DOCTYPE html>html>head>meta namereferrer contentno-referrer>meta nameviewport contentwidthdevice-width, initial-scale1.0, maximum-scale1.0>meta http-equivContent-Script-Type contenttext/javascript>html>head>!-- Copyright (c) by H.E.I. Informationssysteme GmbH, Mannheim Germany, contributors and suppliers All rights reserved -->title> HTML5 / CSS - 3D/2D - WebGL Canvas Animation Library taccGL /title> meta namedescription contentHTML 5 3D (WebGL) and 2D GPU Accelerated Transition and Animation Canvas Library - taccgl. HTML+CSS elements can be moved, rotated, ... in 2D and 3D, or mapped on 3D objects etc. >meta namedescription contentEasily create powerful webGL based 2D and 3D transitions and animations using HTML5 + CSS and the taccGL canvas animation library.> meta namekeywords valueHTML5,CSS,canvas,animation,2D,3D,library,javascript,framework,transition,HTML,Web 2.0,web,development,WebGL,GPU,accelerated> meta namegoogle-site-verification contentwt61_5iSrPr0esaJxNzcQjxXTLlLXplNVujdrDULXI4 />link relalternate mediaonly screen and (max-width:400px) hrefhttp://m.taccgl.org/index.html>link relalternate hreflangen hrefhttp://www.taccgl.org/ />link relalternate hreflangde hrefhttp://www.taccgl.de/ />script> taccgl_texCanWidth1400; taccgl_texCanHeight2048; pageStartTime new Date().getTime(); taccgl_shadowFactor0.5; taccgl_Com_dddmode/pic/Mode3D-o.png; taccgl_Com_dddmode_set/pic/Mode3D-180-o.png 2x; taccgl_Com_ddmode/pic/Mode2D-o.png; taccgl_Com_ddmode_set/pic/Mode2D-180-o.png 2x; taccgl_Com_off/pic/ModeNo-o.png; taccgl_Com_off_set/pic/ModeNo-180-o.png 2x; taccgl_MeasureImage/pic/taccglMea; taccgl_ImmediateMeasureImage/pic/taccglIMea; taccgl_parallaxtrue; enaObjIntrofalse; enaDeformOvertrue; enaDeformArticletrue; enaDeformExamplesfalse; enaLogoRotatefalse; plxtrue;ipqArray(0); introDonefalse;function ipLogoOnLoad(){ if (window.taccgl && window.logoOnLoad) logoOnLoad(); else ipq.push(ipLogoOnLoad);}function ipTestImgOnLoad(){ if (window.taccgl && window.testImgOnLoad) testImgOnLoad(); else ipq.push(ipTestImgOnLoad);}function ipImgOnLoad(id){ if (window.taccgl && window.imgOnLoad) imgOnLoad(id); else ipq.push(function(){imgOnLoad(id);});}var lateImgLoadedfalse;function lateLoadImg(){ lateImgLoadedtrue; var tidocument.getElementById (testimgi); var pr1; if (window.devicePixelRatio) prwindow.devicePixelRatio; ti.src pr>1?/pic/PICT0516-2200-486.jpg:/pic/PICT0516-1100-243.jpg; document.getElementById (screenShot1).src pr>1?/pic/sc/html5-canvas-3D-o.jpg: /pic/sc/html5-canvas-3D-s.jpg; var imdocument.getElementById (screenshot1img); if (im) im.src pr>1?/pic/sc/html5-canvas-animation-o.jpg:/pic/sc/html5-canvas-animation-s.jpg;}function ipIntroDomReady(){ lateLoadImg(); if (window.taccgl && window.introDomReady) { introDomReady(); } else ipq.push(ipIntroDomReady);}function taccglLoaded(){ taccgl_Com_dddmode/pic/Mode3D-o.png; taccgl_Com_dddmode_set/pic/Mode3D-180-o.png 2x; taccgl_Com_ddmode/pic/Mode2D-o.png; taccgl_Com_ddmode_set/pic/Mode2D-180-o.png 2x; taccgl_Com_off/pic/ModeNo-o.png; taccgl_Com_off_set/pic/ModeNo-180-o.png 2x; taccgl_MeasureImage/pic/taccglMea; taccgl_ImmediateMeasureImage/pic/taccglIMea; if (window.jshomeLoaded) jshomeLoaded();}function ipOpenMouseOver(n,e){if (introDone) openMouseOver(n,e)}function ipOpenOverlay(n,e){if (introDone) openOverlay(n,e)}if (document.addEventListener) document.addEventListener (DOMContentLoaded,ipIntroDomReady);function iponload() {if(!lateImgLoaded)lateLoadImg();}/script>link relstylesheet typetext/css href/css/homeplxstyle.css>script src/scripts20130819/taccgl.js defer async onloadtaccglLoaded()>/script>script src/js/desktophome.js defer async onloadjshomeLoaded()>/script>/head>/head>BODY onloadiponload(); doonload();introductionAnimation(); onreadystatechange>div idalldiv langen> div idupperlinks> a href/contact.html>Impressum/a> | a href/privacy/privacy.html>Privacy/a> / a href/privacy/datenschutz.html>Datenschutzerklärung/a> | a href/download.html >Download/a> | a href/tutorial/index.html titleCombining HTML5+CSS with WebGL - taccGL/WebGL Web 3D Tutorial altCombining HTML5+CSS with WebGL - taccGL/Webgl 3D Tutorial>Tutorial/a> | a href/developer_doc/index.html >Manual/a> | a href/services.html>Services/a> span classgermanlinks> | /span> span classgermanlinks> a hrefhttp://www.taccgl.de/ stylewhite-space:nowrap titleGerman Site: 3D-Webdesign, 3D-Animation(en) mit HTML5 / WebGL altGerman Site: 3D-Webdesign, 3D-Animation(en) mit HTML5 / WebGL >img src/pic/gerflag.png> 3D-Animation/a> | /span> a href/contact.html>Contact/a> /div> div idmaindiv styleborder:red solid 0px> div idheader1div> div classinnercol> img id logoimg width162px height73px src/pic/taccglLogo-o.png border0 style onloadipLogoOnLoad()> img id taccgl_CommentImage src/pic/ModeUnknown-o.png styleposition:absolute; right:160px; srcset/pic/Mode3D-180-o.png 2x titleShows if and what HTML 5 canvas was detected classmeaimg width70px height70px onloadipImgOnLoad(taccgl_CommentImage)> img id taccgl_ImmediateMeasureImage src/pic/taccglIMeaNo.png styleposition:absolute; right:80px; titlePerformance Quality measured of previous Animation run classmeaimg width70px height70px onloadipImgOnLoad(taccgl_ImmediateMeasureImage)> img id taccgl_MeasureImage src/pic/taccglMeaNo.png styleposition:absolute; right:0px; titlePerformance Quality measured of first 10 Animations runs classmeaimg width70px height70px onloadipImgOnLoad(taccgl_MeasureImage)> /div> /div> div idQualityWarning onmouseoverqualityWarningOver()> Because of performance problems on your computer/device/browser animations run only on a small part of the screen and not full screen as normally. Move the mouse to see different parts of the animation. /div> div idHeadlinePage> div classinnercol> h1 idHeadline> span idHeadlineS tylefont-size:80px; line-height:150%;> HTML5 2D and 3D Canvas br> Animation Library taccGL /span> /h1> /div> /div>div idfirstPage> div idtextdiv classinnercol> div idtextleft> p stylefont-size:20px; line-height:150%;>Improve Look and Feel of web pages combining web graphics-standards span idMOLCanvas classMOLink onmouseoveripOpenMouseOver(MOCanvas,event,this)>HTML5 Canvas/span>, WebGL™, and span idMOLintegrates classMOLink styleborder-bottom:none onmouseoveripOpenMouseOver(MOintegrates,event,this)>CSS/span>: div stylefont-size:30px; margin-top:50px; margin-bottom:50px> Advanced Graphics for HTML5 / CSS Web Pages /div>div idmainFirstParaBefore> by adding 2D and 3D graphics to your web pages. /div>div idintrographic onmouseoverintroGraphicOver()>div idigleftcol>div classighead> Animate strong>Item/strong>/div>div classiganim>span idMOLintegrates classMOLink stylecolor:white; border-bottom:none onmouseoveripOpenMouseOver(MOintegrates,event,this)>HTML5+CSS elements/span>/div>div classiganim>3D Objects from scene files/div>div classiganim>Deformed, sliced, mapped elements/div>div classiganim>Canvas Drawings/div>/div>div idigrightcol>div classighead>with strong>Feature/strong>/div>div classig3dfeature>Lighting and Shading/div>div classig3dfeature>Hidden Surfaces/div>div classig3dfeature>Automatic Shadows/div>div classig3dfeature>span idMOLjavascript classMOLink stylecolor:white; text-decoration:underline; border-bottom:none onmouseoveripOpenMouseOver(MOjavascript,event,this)>GPU based WebGL™/span>/div>div classig3dfeature>span idMOLvery_fast classMOLink stylecolor:white; text-decoration:underline; border-bottom:none onmouseoveripOpenMouseOver(MOvery_fast,event,this)>fallback to 2D canvas/span>/div>/div>div> br> /div>div styleclear:both> /div>/div>p idmainFirstParaAfter langen stylehyphens:auto; -webkit-hyphens:auto; -moz-hyphens:auto>by /p>p> adding 2D and 3D graphics to your web pages. /p>p> Plug-In free, span idMOLhtml5 classMOLink onmouseoveripOpenMouseOver(MOhtml5,event,this)>cross html5 browser/span>, open source. /p>p stylemargin-top:0px> span idMOLeasy classMOLink onmouseoveripOpenMouseOver(MOeasy,event,this)>Easy/span> use with HTML5, CSS, and javaScript, p> based on HTML 5 span idMOLCanvas classMOLink onmouseoveripOpenMouseOver(MOCanvas,event,this)>Canvas/span> and WebGL™ /p>p stylemargin-top:50px>a hrefjavascript:ipOpenOverlay(FeaturesOverview)>Features/a>, a href/tutorial/firstExample.html>Tutorial/a> /p> div idmaintext> div idinmaintext> p idstatus> /p> /div> /div> /div> div idtextright> div idintextright> div idexbox> h2 classexh2> Examples /h2> div stylemargin-bottom:20px> span idMOLMouseovers classMOLink onmouseoveripOpenMouseOver(MOMouseovers,event,this)>Mouseovers/span> br> Enlarging span idMOL3DObjects classMOLink onmouseoveripOpenMouseOver(MO3DObjects,event,this)>3D Objects/span> /div> div idexdivleft> div stylecolor:red; margin-bottom:20px idwebglexmsg> Your browser or GPU does not seem to support WebGL and so examples marked with 3D do not show. /div> a hrefjavascript:spheres()>Spheres/a> span stylefont-size:10px title3D WebGL only>3D/span> br> a hrefjavascript:multiDemo3();>Multi-Fly-In/a> br> a hrefjavascript:multiDemo();>Rotation Demo/a> br> a hrefjavascript:solidRotation();>Solid Rotation/a> span stylefont-size:10px title3D WebGL only>3D/span>br> /div> div idexdivright> a hrefjavascript:multiCubes();>Multiple Cubes/a> br> a hrefjavascript:flexitest();>Flexible/a> br> a hrefjavascript:customShader(sexp9)>CustomShader/a> span stylefont-size:10px title3D WebGL only>3D/span> br> a hrefjavascript:fliptest();>Flip Elements/a> span stylefont-size:10px title3D WebGL only>3D/span> br> a hrefjavascript:LogoBox(100);>Logo Boxes/a> br> a hrefjavascript:smoothScrTo(document.getElementById(secondPage).offsetTop+document.getElementById(secondPage).offsetHeight,function(){});>Intro-Cube/a> br> /div> div styleclear:right> Demos: a href/demos/3d-configurator.html >3D Configurator/a>br> a hrefhttps://www.h-e-i.de/3D-Produkt-Konfigurator/Büro-Möbel.html >3D Produktkonfigurator/a> /div> div styleclear:right; margin-top:10px> External 3D Models: /div> div stylefloat:left; text-align:center; width:130px> a hrefhttp://www.mediacultura.de/tempel.html>img src/pic/mc/komanatempel-o.png border0 width100px height100px titleTemple of Komana by www.mediacultura.de altTemple of Komana by www.mediacultura.de>/a> a hrefhttp://www.mediacultura.de/tempel.html targetext titleTemple of Komana by www.mediacultura.de>Temple/a> /div> div styletext-align:left; padding-left:20px> a hrefhttp://www.mediacultura.de/templerhaus.html>img src/pic/mc/templerhaus-o.png border0 width100px height100px title3D reconstruction of the Templerhaus in Amorbach by www.mediacultura.de alt3D reconstruction of the Templerhaus in Amorbach by www.mediacultura.de border0>/a>br> a hrefhttp://www.mediacultura.de/templerhaus.html targetext title3D reconstruction of the Templerhaus in Amorbach by www.mediacultura.de>Templerhaus/a> /div> /div> /div> /div> div idclearboth styleclear:both>/div> p stylefont-size:12px; border-top:solid 1px silver; margin-left:40px; width:40%; padding-top:10px> WebGL™ is a trademark of the a hrefhttp://www.khronow.org>Khronos Group Inc./a> /p> p> /p> /div> /div> /div> /div> div idfirstImage classplxImage>/div> div idsecondPage classplxPage> div idtextSecondPart classplxPart innercol > h2> Features /h2>div idfeatureCube xstylewidth:130px; height:110px; margin-left:30px; background:white; float:right; visibility:hidden; padding:40px; color:black; text-align:center; font-size:18px> HTML element mapped on Cube/div> h3> 3D /h3> ul>li> Display 3D Objects designed with a 3D Design Program such as Blenderli> Animate: Linear and Accelerated Motion and Rotation, Zoom, Motion of Textures etc.li> Parallax Scrolling/ul>h3> 2D / HTML / CSS /h3> ul> li> High performance animation of CSS formatted HTML elements via GPU support (WebGL™)li> Animate: Linear and Accelerated Motion and Rotation, Zoom, Clip, Morph, Deform, Map as Textures, Texturemotion etc.li> Display HTML elements in 3D space with 3D lighting, consistent hidden surface handling and shadows/ul>div idfeatureHTML xstylewidth:130px; height:110px; background:yellow; float:right; visibility:hidden; padding:40px; color:black; text-align:center; font-size:18px> HTML Element Animated with taccGL and WebGL/div> div classplxTextLeft> h3> Integration of HTML/CSS with 3D /h3> ul>li> Hover 3D objects over web pages casting shadows on htmlli> Postition 3D objects relative to HTML elements (before, on top etc.)li> Cast Shadows from 3D Objects to HTML elements and vice versa/ul>/h3>h3> Development /h3>ul> li> Easy content creation with HTML, CSS, and javaScript li> Concise Fluent interface for operations on multiple selected objects or elements/ul>h3> 3D Extensions and Compatibility /h3>ul>li> Full page WebGL™ on (very) long scrolling web pages (overcomes canvas size limitations by simulating a full page canvas with a smaller full window canvas)li> Use WebGL™ if suitable on the target device, otherwise assist in showing alternative content e.g. via 2D Canvas as fallback li> Show multiple / many objects on a single canvas (avoiding the browsers number of canvas limitation and) permitting full page animations with 3d objectsli> Determine target device performance and graceful feature degradation when needed. E.g disable shadows on slower devicws, use per vertex shading, reduce canvas size/ul> div idfurtherreading> h3>Further reading/h3> ul> li> a hrefjavascript:smoothScrTo(document.getElementById(oFeaturesOverview).offsetTop)>Detailed Features/a> li> list and demo of a hrefjavascript:smoothScrTo(document.getElementById(o2DFeatureTutorial).offsetTop+300)>2D Features/a> li> list and demo of a hrefjavascript:smoothScrTo(document.getElementById(o3DFeatureTutorial).offsetTop+100)>3D Features/a> li> demo of a hrefjavascript:smoothScrTo(document.getElementById(oWebGLFeatures).offsetTop+100)>WebGL™ Features/a> li> a hrefjavascript:smoothScrTo(document.getElementById(oDocOverview).offsetTop+100)>Documentation Overview/a> li> a href/tutorial/index.html titleCombining HTML5+CSS with WebGL - taccGL/WebGL Web 3D Tutorial altCombining HTML5+CSS with WebGL - taccGL/Webgl 3D Tutorial>Tutorial/a> Getting Started li> a href/developer_doc/index.html >Documentation/a> /ul> /div> /div> div classplxTextRight> /div> div styleclear:both> /div> /div> /div> div idsecondImage classplxImage>/div> div idthirdPage classplxPage> div idtextThirdPart classplxPart innercol > div classplxTextLeft> h2> a hrefblog/parallax-scrolling.html>Creating Parallax Scrolling Web Sites with 3D Hardware Acceleration and WebGL™ /a> /h2>p>Most parallax scrolling web sites are implemented using javascript and CSS, although most computers have full scale 3D hardware graphic acceleration. This article describes, how to build parallax scrolling websiteswith full 3D harware acceleration and WebGL™ a hrefblog/parallax-scrolling.html>more/a>/p> h2> a hrefblog/HTMLpages-with-3D-objects.html>3D Objects on HTML + CSS Pages/a> /h2>p> img idDDDObjectsOnHTMLPages src/pic/torus-s.png srcset/pic/torus-o.png 2x stylefloat:left; margin-right:10px title3D Torus on HTML/CSS Page width50px height50px onmouseoverDDDObjectOnOver(DDDObjectsOnHTMLPages) onmouseoutDDDObjectOnOut(DDDObjectsOnHTMLPages)> Create a 3D model using a (commercial or open source) 3D modelling program and use taccgl™ and 2 lines of javaScript to show the model on your web page. a hrefblog/HTMLpages-with-3D-objects.html>more/a> /p> /p> h2> a hrefblog/popup.html>Pop-Up Animations with no more than 4 Lines of /a> /h2>p>/p>div> div stylefloat:left; width:72px titleHTML/CSS element mapped on 3D Object height50px onmouseoverPopUpAnimationsOnOver() onmouseoutPopUpAnimationsOnOut()>div idPopUpAnimations stylebackground-color:yellow; margin-right:20px; padding-left:3px; padding-right:3px; display:none; font-size:14px titleHTML/CSS element mapped on 3D Object width70px height50px onmouseoverPopUpAnimationsOnOver() onmouseoutPopUpAnimationsOnOut()>Pop-Upbr>Window /div> img idimgpopup2dmode width70px height47px src/pic/popup2dmode-s.png srcset/pic/popup2dmode-o.png 2x stylepadding-top:0px>/div>javaScript useful for pop-up/alert/dialog boxes, for tool-tips and status infos, for drop-down and pop-up menues etc. a hrefblog/popup.html>more/a> /div>p>/p> h2> a href/blog/css-transition-visibility.html >CSS Transition Visibility/a> /h2> p> The css visibility property shows and hides elements. Transitions on visibility do not perform an animation but are useful for combination with other CSS transitions e.g. a href/blog/css-transition-opacity-for-fade-effects.html >CSS Transition Opacity for Fade Effects/a>. The blog article gives various visual effects made that way comparing them with taccgl™ transitions. a href/blog/css-transition-visibility.html >more/a>h2> a href/blog/css_transition_display.html >CSS Transition Display/a>/h2> p> The CSS display property can be used to completely remove an element and all space occupied. The CSS spec does not provide CSS transitions on display but css transitions on height can be used instead. These can easily be combined with taccgl™ transitions to play some visual effects while the element appears or disappears a href/blog/css_transition_display.html >more/a>/p> /div> div classplxTextRight> /div> div classplxTextLeft> div idDeformingArticle> div classscreenshot idscreenshot1 stylefloat:right;margin-left:15px onmouseoverDeformingOnOver() onmouseoutDeformingOnOut()> img idscreenshot1img width231px height235px altHTML5 Canvas Animation> /div>h2> a hrefblog/deforming-morphing-HTML.html>Morphing and Deforming of CSS formatted HTML elements/a> /h2>p> taccgl™ includes functions for deformation and morphing of HTML elements.For example an element can be morphed from a rectangle into a circle or it canbe mapped on an uneven waveformed surfacea href/blog/deforming-morphing-HTML.html >span stylecolor:#ffffff>more/span>/a> /p>/div> div iddbgbox> /div> /div> div styleclear:both> /div> /div> /div> div idfinalImage classplxImage>/div> div idfinalPage classplxPage> div idtextFinalPart classplxPart innercol> div classplxTextLeft> h2> Beta Version 0.62 Released /h2> div stylefloat:right; padding-left:0px; padding-right:10px; background-color:#555555; margin-left:10px classscreenshot idscreenshot2 onmouseoverif (introDone)screenShot1Over() onmouseoutif (introDone)screenShot1Out()> img idscreenShot1 width231px height235px stylemargin-left:10px altHTML5 Canvas 3D Animation titleHTML5 Canvas 3D Animation>br> /div> p> Version 0.62 was released on November 1, 2020. a href/download.html>Download/a>, a hrefversionHistory.html>Version Information/a> /p> p idtextpara4> img id heilogoimg src/pic/heilogograu.gif width172px height48px border0 stylemargin-left:10px; float:right> This is a b>beta release/b> and quite naturally it contains bugs and is not yet completely implemented (e.g. does not yet implement all HTML tags and not all CSS properties). See a href/developer_doc/Restrictions.html>b>Restrictions/b>/a>. b>We would be happy for bug reports and comments /b>. /p> p> taccgl™ is provided under an open source BSD like License. You can a href/download.html>download/a> the library and place it on your test web server. /p> /div> div idplxTextRight classplxTextRight> div idEpWarn> h2>Warning/h2> When showing, viewing, or developing animations and/or computer games take care about epilepsy. A warning message shows up before viewing the examples. /div> p idRequests> If you like taccgl™ please share it with others, e.g. link to us, refer to us in social networks, or follow us on twitter etc. /p> /div> div styleclear:both> /div> /div> /div> /div>div idtexturesCube styleposition:absolute; top:1300px; left: 0px; visibility:hidden; overflow:hidden; width:10px> img idintroleft src/pic/taccglLogobig-s.png width504px height491px styleposition:absolute; left:750px; top:0px; border: solid black 2px; padding:25px> div idintrofront stylewidth:600px; height:600px; background-color:white; padding:50px; font-size:48px; border: solid black 2px;> is a fast Script Library to animate HTML+CSS pages in 2D and 3D using span stylecolor:red>HTML 5 canvas/span>, tries to use WebGL™ and span stylecolor:red>hardware graphic acceleration/span> with 2D canvas fall-back. It integrates well with HTML and CSS to animate many CSS formatted HTML elements (like <img> and <p>). /div>/div>div idMOvery_fast classmouseover onmouseoutcloseMouseOver(MOvery_fast) onmouseoveroverMouseOver(MOvery_fast)>p>Under good conditions the library directly uses hardware graphic accelerationand its performance critical parts run directly on the computers graphic unit.This provides an extreme performance gain compared to DOM and script based animations and allows you to run smooth animations with thousands of elements./p>p> If no hardware acceleration is present (or if it is not usablebecause of the browser or the graphics driver) the library uses theHTML 5 - 2D canvas which provides quite fast animations with restricted featureson fast computers as well./p>p> For slow graphic accelerators and/or slow processors that can not handle the full screen resolution smoothly, the library plays the animationsonly on a portion of the screen or becomes completely inactive to not interferenormal operations on the page./p>p> On older browsers that do not support HTML 5 canvas and no animations show up. /p>/div>div idMOjavascript classmouseover onmouseoutcloseMouseOver(MOjavascript) onmouseoveroverMouseOver(MOjavascript)>The library is written in JavaScript and GLSL (a C like vector programming language).If supported, the GLSL parts are downloaded into the graphics card and executed there;possibly in parallel on several processors, which gives a dramatic performance gain. /div>div idMOhtml5 classmouseover onmouseoutcloseMouseOver(MOhtml5) onmouseoveroverMouseOver(MOhtml5)>taccgl™ is an HTML 5 library making special use of the new canvas feature.HTML 5 means that the library explicitly runs only on newer browsers, e.g. IE 9.0 and up, current versions of most other browsers. For older browsers it becomes inactive, the idea is that users can stillview pages that include the library, however without the animations./div>div idMOintegrates classmouseover onmouseoutcloseMouseOver(MOintegrates) onmouseoveroverMouseOver(MOintegrates)>p> taccgl™ can display CSS formatted HTML elements with the new HTML5 3D canvas which brings the following benefits:/p> p> Elements can be animated using GPU acceleration, they can be moved, accelerated, deformed, bent, lighted etc. and they can enjoy the performance of the GPU which normally has enough power to separately animate thousands of copies of (fragments of) HTML elements. /p> p> Also HTML elements can be fully integrated into a 3D scene, e.g. they can rotate in 3D, they can be displayed before or behind other HTML elements even partially, and they can cast shadows or shadows can be casted on them. In addition HTML elements can be mapped on 3D objects such as cubes or spheres./p>/div> div idMOeasy classmouseover onmouseoutcloseMouseOver(MOeasy) onmouseoveroverMouseOver(MOeasy)>taccgl™ allows you to create WebGL™ animations with very few lines of javascript, byul> li> animating CSS formatted HTML elements li> mapping of HTML elements on 3D objects li> displaying 3D objects created with a modelling program (e.g. Blender) and aligning them with HTML and CSS/ul>/div>div idMOCanvas classmouseover onmouseoutcloseMouseOver(MOCanvas) onmouseoveroverMouseOver(MOCanvas)>p> The new HTML 5 canvas feature in its 3D version brings fantastic new graphic and animation features, suchas ul> li> running of graphic transitions directly in the clients GPU (graphic acceleration unit) thereby bypassing javaScript and DOM performance bottelnecks li> performing of animations with thousands of triangles, li> separately controlling every pixel and calculating each pixels color once per frame, /ul>p> and also special 3D features such as ul> li> 3D depth buffering for hidden surface handling, li> 3D lighting for simulating light sources and reflection on 3D objects, and li> automatic 3D shadow calculation./ul>p> In pure HTML 5 canvas 3D/a href/glossary/terms/WebGL.html>WebGL™/a> the content to be displayed must be individually programmed.The taccgl™ library greatly simplifies this process.by allowing the user to use CSS formatted HTML elements togehter with 3D Models created with a modelling program./p>/div> div idMOMouseovers classmouseover onmouseoutcloseMouseOver(MOMouseovers) onmouseoveroverMouseOver(MOMouseovers)>p>Hover or click on the various span stylecolor:green>green/span> links on this page to see pop-upscontaining additional explanations./p>p>The appearing pop-up window is displayed using taccgl™ and WebGL™,mostly (performance of the GPU permitting) to correctly display its shadows.Note that the shadow can be quite complex, since the underlying page isnot flat but seen as a 3D surface./p>p>In addition opening and closing animations are played.The opening animation is choosen randomly from various opening animations that are e.g.morphing the element from a circle or a wave from to its final rectangular form.The closing animation makes the element explode into many parts./p>/div>div idMO3DObjects classmouseover stylewidth:200px onmouseoutcloseMouseOver(MO3DObjects) onmouseoveroverMouseOver(MO3DObjects)>p>Hover or click on the various 3D objects and screenshots further down on the page to see animations enlarging and rotating the objects. /p>/div>div classouteroverlay idoFeaturesOverview>div classinnercol>div classoverlay idFeaturesOverview >div classoverlayclose style>a styletext-decoration:none; color:red hrefjavascript:closeOverlay(FeaturesOverview)>X/a>/div>div classinneroverlay>a namedetailedFeatures>/a> h1> Detailed taccgl™ Features /h1> div iddtFeLeft>ul>li> Library for 2D and 3D graphics and text, transitions and animations using b>WebGL™ for Webdesign of general purpose HTML pages/b>. li> Detect browsers/clients without appropiate WebGL™ and keep pages operational; assist in or automatically showing alternative content (e.g. canvas 2D) li> Animates CSS formatted elements, Canvas 2D drawings, parts, slices, and deformed fragments thereof, and 3D objects from model files.li> Provides transitions for linear and accelerated motion, rotation, color, fading, clipping, growing, shrinking, texture motion, deformation, morphing, etc as detailed below.li> Consistent hidden surface handling, lighting, and shadows over all animated elements including HTML elements and 3D objects.li> Perform many thousands of parallel transitions using GPU acceleration.li> Per pixel calculation of lighting, colors, shadows, and user defined functions. /ul>/div>div iddtFeRight>ul>li> Easy content creation with HTML, CSS, and simple javaScript.li> Fluent interface to apply transitions on multiple selected elements/objects.li> Initial and permanent measurements and estimates of performance and frame rate and based on that Fall-Back and Graceful Degradation mechanisms for browsers/clients that do not support WebGL with the required performance including, disabeling shadows, dynamically reducing canvas size, using HTML5 canvas 2D instead of WebGL™, and finally completely disabeling animations (e.g. IE 8).li> Depending on client/browser uses HTML 5 canvas 3D (WebGL™) or canvas 2D.li> Even in canvas 2D mode simulates some 3D features, see below.li> Animates 3D Models (OBJ and MTL files) in WebGL™ Mode.li> Automatically generated and user defined shader programs.li> Open source, BSD like license. /ul>/div>div styleclear:both> /div>div classdtFeColumn>div classhtd>2D Features/div>Linear Motionbr>a href/glossary/terms/Accelerated.html >Accelerated/a> Motionbr>Rotation around given axisbr>Rotation around given axis and centerbr>Animate HTML Elements ( a href/developer_doc/Restrictions.html >Restr./a>)br>Animate Canvas Drawingsbr>HTML coordinate systembr>Animating Background Colorbr>Fading/Blendingbr>Clipping/Resizingbr>Grow and Shrink Animationsbr>Mapping of HTML elementsbr>Texture Motionbr>Continuation of transitions br>Continuation with constant velocitybr>Morphing into Circles or Waves (WebGL Mode) br>Lighting (WebGL Mode)/div>div classdtFeColumn>div classhtd>3D Features/div>(in WebGL and fallback mode:)br>Linear and Accelerated Motion in 3Dbr>Rotation around axis and center in 3Dbr>Compatible with HTML coordinatesbr>Boxesbr>Objects with rectangular Facesbr>(in fallback mode without WebGL:)br>Parallel Projectionbr>Limited Hidden Surface Handlingp>span stylefont-size:20px>Multiple Operations/span>br>select HTML elements of CSS classbr>select HTML elements with namebr>select HTML elements with tag namebr>apply transitions to sets of elementsbr>cut transitions into horizontal/vertical slicesbr>Handle Sets of Transitionsbr>/div>div classdtFeColumn>div classhtd>webGL Features/div>(available in WebGL™ mode) br>all 2D and 3D Features listed already with br>full Perpective Projection and br>full hidden surface Handlingbr>execution of transitions inside the GPU as shader programsbr>HTML elements with flexible Borders br>Display of 3D Models from OBJ/MTL Files br>Selection of objects from 3D Models br>Alignment of 3D Models / HTML elementsbr>Mapping of HTML elements on 3D Modelsbr>ambient, diffuse, and specular Lighting br>per vertex or per fragment Lighting br>Shader Generationbr>Custom Shaders br>/div>div styleclear:both> /div>/div>/div>/div>/div>div stylewidth:10px; overflow:hidden; position:absolute> div stylewidth:500px; font-size:70px; position:absolute; top:50px; left:300px; color:red; visibility:hidden; overflow:hidden idhiddenText>Hidden Text/div>/div>div classouteroverlay ido2DFeatureTutorial>div classinnercol>div classoverlay id2DFeatureTutorial >div classoverlayclose style>a styletext-decoration:none; color:red hrefjavascript:closeOverlay(2DFeatureTutorial)>X/a>/div> div idtestimg2d styleheight:243px> img idtestimgi2d width1100px height243px src/pic/PICT0516-1100-243.jpg srcset/pic/PICT0516-2200-486.jpg 2x crossorigin border0 onloadipTestImgOnLoad() xstylevisibility:hidden> /div>div classinneroverlay> h2 idmoveHeadline> 2D Features in Detail /h2> p styledisplay:none; color:red idno2dcomment> Note that your current browser does not support HTML5 canvas with the required perfpormance, or at least taccGL cannot use it. Therefore the examples below do not work as intended. /p> p> Here we show, step by step, the transitions and animations currently supported. p> h3> Animate CSS formatted HTML Elements /h3> a hrefjavascript:moveActor(testimg2d);>Move Actor/a>, a hrefjavascript:rotateActor(2DFeatureTutorial);>Rotate Actor/a>, a hrefjavascript:rotateMoveActor(2DFeatureTutorial);>Rotate and Move/a>, a hrefjavascript:blendOutActor(testimg2d);>Fade Out Actor/a>, a hrefjavascript:blendInActor(testimg2d);>Fade In Actor/a> h3> Simple Linear Motion /h3> p> Move around a CSS formatted HTML element, e.g. a hrefjavascript:moveSimple(testimg2d);>Move Simple Image Element/a>, a hrefjavascript:moveSimple(moveHeadline);>Move Text Element/a>, a hrefjavascript:flyoutSimple(testimg2d);>Move Image from its HTML position/a>, a hrefjavascript:flyoutSimple(moveHeadline);>Move Text from its HTML Position/a>, a hrefjavascript:flyinSimple(testimg2d);>Move Image to its HTML position/a>, a hrefjavascript:flyinSimple(moveHeadline);>Move Text to its HTML Position/a>, h3> Show and Hide HTML/CSS element/h3> p> a hrefjavascript:flyoutSimple(testimg2d,true);>Move Image from its HTML position and hide the original element/a>, a hrefjavascript:flyinSimple(testimg2d,true);>Move Image to its HTML position (from)and afterwards show the original element/a>, a hrefjavascript:moveSimple(hiddenText);>Move hidden Text Element/a> /p> h3> Combine Basic Animations /h3> p> a hrefjavascript:moveAround(testimg2d);>Move around Single Element/a> (hide original HTML element using CSS during move and show afterwards), a hrefjavascript:moveAroundMultiple(testimg2d);>Move around Multiple Elements/a>, a hrefjavascript:moveEverywhere(testimg2d);>Move Multiple Copies of one Element/a> h3> Accelerated Motion /h3> p> a hrefjavascript:moveAccel()>Motion with increasing speed/a>, a hrefjavascript:moveAccelDec()>Motion with decreasing speed (negative acceleration)/a>, a hrefjavascript:moveAccelPath()>Motion along Path/a>, a hrefjavascript:rotateActor(2DFeatureTutorial,0);>Rotate Actor with increasing speed/a>, a hrefjavascript:rotateActor(2DFeatureTutorial,null,0);>Rotate Actor with decreasing speed/a>, a hrefjavascript:rotateMoveActor(2DFeatureTutorial,0);>Smooth Rotate and Move/a>. h3> Blending and Colors /h3> a hrefjavascript:simpleAlpha(0,1)>Fade In/a>, a hrefjavascript:simpleAlpha(1,0)>Fade Out/a>, a hrefjavascript:blend(1,-0.5,-0.5,1)>Blend/a>, a hrefjavascript:blend(1,-1,0,2)>Blend and Stay/a>, a hrefjavascript:blend(1,-5,-5,1)>Blend (Disappear and Appear)/a>, a hrefjavascript:blendColor()>Blend to Color and change Color /a> h3> Rotations /h3> a hrefjavascript:rotateMiddle()>Rotate/a>, a hrefjavascript:rotatePoint()>Rotate around Point/a>, a hrefjavascript:rotateMiddle(true)>Rotate and Move/a>, a hrefjavascript:rotateMiddle(false,-0.35)>Rotate Part/a>, a hrefjavascript:rotateMiddle(true,2)>Rotate Multiple/a> h3> Animate Rectengular Part of an Element /h3> a hrefjavascript:simpleRestrict()>Move upper left part of Image/a>, a hrefjavascript:multiRestrict()>Split Image into Parts/a> h3> Resize Elements /h3> a hrefjavascript:simpleGrow(0,0,900,243)>Grow from zero/a>, a hrefjavascript:simpleGrow(500,200,900,243)>Grow partially/a>, a hrefjavascript:simpleGrow(100,20,1000,1000)>Grow Big/a>, a hrefjavascript:GrowandMove(false,false,1500,1000)>Grow and Move/a>, a hrefjavascript:simpleClip()>Clip from zero/a>, a hrefjavascript:simpleClip(500,200)>Clip partially/a> h3> Move Elements with Mapped Texture /h3> a hrefjavascript:simpleMap()>Move Image with Mapped Text/a>, a hrefjavascript:mapMove()>Moving Mapped Text/a> /div>/div>/div>/div> div idtestimg styleheight:243px> img idtestimgi width1100px height243px crossorigin border0 onloadipTestImgOnLoad() xstylevisibility:hidden> /div> div classouteroverlay ido3DFeatureTutorial>div classinnercol>div classoverlay id3DFeatureTutorial > div classoverlayclose style>a styletext-decoration:none; color:red hrefjavascript:closeOverlay(3DFeatureTutorial)>X/a>/div> div classinneroverlay> h2 idmoveHeadline3D> 3D Features in Detail /h2> p styledisplay:none; color:red idno3dcomment> Note that your current browser does not support HTML 5 3D canvas (WebGL) with the required performance, or at least taccGL cannot use it. Therefore the examples below are shown with less quality using HTML 5 2D canvas. /p> p> In fact b>most/b> of the animations shown in 2D so far work in 3D as well: Move a hrefjavascript:moveAccel3D(true,true,-2000)>back (z>0)/a> and a hrefjavascript:moveAccel3D(true,true,2000)>forward (z<0)/a>, Rotate around a hrefjavascript:rotateMiddle3D(false,1,0,0)>X/a>, a hrefjavascript:rotateMiddle3D(false,0,1,0)>Y/a>, and a hrefjavascript:rotateMiddle3D(false,0,0,1)>Z axis/a>, Move and Rotate around a hrefjavascript:rotateMiddle3D(true,1,0,0)>X/a>, a hrefjavascript:rotateMiddle3D(true,0,1,0)>Y/a>, and a hrefjavascript:rotateMiddle3D(true,0,0,1)>Z axis/a>, Rotate around a hrefjavascript:rotateMiddle3D(true,1,1,0)>XY/a>, a hrefjavascript:rotateMiddle3D(true,0,1,1)>YZ/a>, and a hrefjavascript:rotateMiddle3D(true,1,0,1)>XZ diagonal/a>. Rotate with acceleration a hrefjavascript:rotateMiddle3D(false,1,0,0,50)>X/a>, a hrefjavascript:rotateMiddle3D(false,0,-1,0,5)>Y/a>, and a hrefjavascript:rotateMiddle3D(false,0,0,-1,-15)>Z axis/a>, . /p> p>All HTML/CSS elements displayed normally appear in a z0 plane. Elements displayed using taccgl™ use the same x and y coordinates (in pixel with origin in the top left corner of the current window or frame) and may have a positive z coordinate when moving behind and a negative z coordinate for moving in front./p> h3> 3D Elements /h3> Turing an Element into a 3D-box : a hrefjavascript:boxDisplay(-1000);>Small Box Test/a>, a hrefjavascript:boxDisplay(1500);>Big Box Test/a>, a hrefjavascript:LogoBox(1,3DFeatureTutorial);>Logo Box/a>, a hrefjavascript:LogoBox(10,3DFeatureTutorial);>Some Logo Boxes/a>, a hrefjavascript:LogoBox(100,3DFeatureTutorial);>More Boxes/a>, a hrefjavascript:LogoBox(300,3DFeatureTutorial);>300 Boxes/a> br> Map various HTML elements on surfaces: a hrefjavascript:introCube()>Text Mapped Cube/a>br> 3D object with rectangular faces: a hrefjavascript:partialBoxDisplay();>Multi Face Object/a> h3> Multiples /h3> p> Select multiple elements and perform animation: a hrefjavascript:document.getElementById(textdiv).style.visibilityhidden;taccgl.mTagName(a).selVisible().paint().hide().visAtEnd().bgColor(white).posZ(2600).to({z:3000}).dur(5).resizeZ().rotateMiddle(0,1,0).start();document.getElementById(textdiv).style.visibility;taccgl.start(no epilepsy warning)>Rotate/a> all em>a/em> tags.br> Create 3 slices and a hrefjavascript:slicesExample(3)>Rotate/a> in sequence.br> Create 50 slices and a hrefjavascript:slicesExample(50)>Rotate/a> in sequence.br> Create 500 slices and a hrefjavascript:slicesExample(500)>Rotate/a> in sequence.br> Create 5000 slices and a hrefjavascript:slicesExample(5000)>Rotate/a> in sequence.br>p> a hrefjavascript:showMultiple3D(testimg);>Show Multiple Copies/a> br> a hrefjavascript:moveEverywhere3D(testimg);>Move Multiple Copies/a> /div>/div>/div>/div>div classouteroverlay idoWebGLFeatures>div classinnercol>div classoverlay idWebGLFeatures > div classoverlayclose style>a styletext-decoration:none; color:red hrefjavascript:closeOverlay(WebGLFeatures)>X/a>/div> div classinneroverlay> h2 idmoveHeadlineGL> WebGL™ Features /h2> p styledisplay:none; color:red idnowebglcomment> Note that your current browser does not support WebGL™, or at least taccGL cannot use it. Therefore the examples below do not show. /p> p> If taccgl™ uses 3D canvas or WebGL™ then all the 2D and 3D features are performed using WebGL™ and with full WebGL™ performance. In addition the following additional features are available: /p> h3> Hidden Surface Elimination / Depth Buffering /h3> p>Correclty displays Elements depth information, even if elements a hrefjavascript:moveAroundMultiple3D(testimg);>cut through each other/a>, see also a hrefjavascript:introCube()>Mapped Cube/a> h3> Display of 3D Models in OBJ file format /h3> p> a hrefjavascript:simpleModel(.*,ltb)>Simple Display/a>, a hrefjavascript:simpleModel(Torus,ltb)>Selection/a> of one or more objects from the model, a hrefjavascript:simpleModel(Torus,ssb)>Stretch Display/a>, Positioning of the Model on HTML elements, many alignment options a hrefjavascript:simpleModel(Torus,mmb)>1/a> a hrefjavascript:simpleModel(Torus,mmC)>2/a> a hrefjavascript:simpleModel(Sphere,rbb)>3/a> a hrefjavascript:simpleModel(Sphere,rbC)>4/a>, Rotation a hrefjavascript:simpleModel(Torus,mmb,true)>1/a> a hrefjavascript:simpleModel(Torus,mmC,true)>2/a> a hrefjavascript:simpleModel(Sphere,rbb,true)>3/a> a hrefjavascript:simpleModel(Sphere,rbc,true)>4/a>, a hrefjavascript:simpleModel(Torus,mmb,f)>1/a> a hrefjavascript:simpleModel(Torus,mmC,f)>2/a> a hrefjavascript:simpleModel(Cone,rbb,f)>3/a> a hrefjavascript:simpleModel(Cylinder,rbC,f)>4/a>, h3> Mapping of HTML Elements on 3D Objects /h3> p> HTML elements can be mapped on 3D models either a hrefjavascript:simpleMap2()> complete/a> or with a hrefjavascript:simpleUV(Cylinder,rbc,f)>UV mapping/a>. /p> h3> Lighting /h3> p> Per fragment lighting: seperately controlable ambient, diffuse, and specular lighting a hrefjavascript:lightDemo(red,0.7,0.3, 0.3, 256)>Emphasized Ambient/a>, a hrefjavascript:lightDemo(red,0.3,0.7, 0.3, 256)>Emphasized Diffuse/a>, a hrefjavascript:lightDemo(red,0.3,0.7, 0, 256)>no Specular/a>, a hrefjavascript:lightDemo(red,0.3,0.5, 0.5, 64)>Emphasized Specular/a>, and a hrefjavascript:lightDemo(red,0.3,0.5, 0.5, 16)>Emphasized Specular with low Shininess/a>. /p> h3> Custom Shaders /h3> p> Allow the user to programmtically control every point a hrefjavascript:ShaderFeature(sexp3);>Circle Blend/a>, a hrefjavascript:ShaderFeature(sexp7);>Center Blend/a>, and a hrefjavascript:ShaderFeature(sexp8);>Rotating Blend/a>./div>/div>/div>/div>div classouteroverlay idoDocOverview>div classinnercol>div classoverlay idDocOverview > div classoverlayclose style>a styletext-decoration:none; color:red hrefjavascript:closeOverlay(DocOverview)>X/a>/div> div classinneroverlay> h2> Documentation Overview /h2> div classdocOverCol> div classdocOverHead>Tutorial/div> a href/tutorial/firstExample.html >First Example/a> br> a href/tutorial/basic-shape-transition.html >Basic Shapes/a> br> a href/tutorial/basic-3D-Models.html >Basic 3D Models/a> br> a href/tutorial/basic-Animations.html >Basic Animations/a> br> a href/tutorial/SimpleRotation.html >Simple Rotation/a> br> a href/tutorial/AcceleratedMotion.html >Accelerated Motion/a> br> a href/tutorial/colors-css-textures.html >Colors and Textures/a> br> a href/tutorial/controllingVisibility.html >Integration of HTML and WebGL/a> br> a href/tutorial/Timing.html >Timing Transitions/a> br> a href/tutorial/Continuations.html >Continuations/a> br> a href/tutorial/Boxes.html >Boxes/a> br> a href/tutorial/javaScript_embedding.html >JavaScript Embedding/a> br> a href/tutorial/Models.html >External 3D Models/a> br> a href/tutorial/providing-OBJ-and-MTL-files.html >Providing OBJ and MTL Files/a> br> a href/tutorial/creating-OBJ-and-MTL-files.html >Creating OBJ and MTL Files/a> br> a href/tutorial/loading-OBJ-files.html >Loading Model Files/a> br> a href/tutorial/HTML-CSS-textures-on-3D-Models.html >HTML Textures on 3D Models/a> br> a href/tutorial/HTML-CSS-UV-Mapping-on-3D-Models.html >HTML CSS UV Mapping on 3D Models/a> br> a href/tutorial/parts-of-HTML-elements.html >Parts of Elements/a> br> a href/tutorial/CanvasOperation.html >HTML Elements on Canvas/a> br> a href/tutorial/multiple-transition-selectors.html >Selectors for Multiple Transitions/a> br> a href/tutorial/multiple-triangles.html >Multiple Triangle Animations/a> br> a href/tutorial/Flexibles.html >Flexibles/a> br> a href/tutorial/Fragment-Shaders.html >Fragment Shaders/a> br> a href/tutorial/Expressions.html >Expressions/a> br> /div> div classdocOverCol> div classdocOverHead>Manual/div> a href/developer_doc/introduction.html >Introduction/a> br> a href/developer_doc/canvasoperation.html >Canvas Operation/a> br> a href/developer_doc/coordinate_system.html >Coordinate System/a> br> a href/developer_doc/texture_canvas.html >Texture Canvas/a> br> a href/animation_library/transitions.html >taccgl Transitions/a> br> a href/developer_doc/Lighting.html >Lighting/a> br> a href/developer_doc/Shadows.html >Shadows/a> br> a href/developer_doc/InstallLibrary.html >Installing the Library/a> br> a href/developer_doc/EmbedHTML.html >Embedding into HTML/a> br> a href/developer_doc/Debugging.html >Debugging/a> br> a href/animation_library/ResponsiveLayouts.html >Responsive and Mobile Layouts/a> br> a href/developer_doc/ddcontext.html >2D Canvas Context/a> br> a href/developer_doc/Compatibility.html >Compatibility/a> br> a href/developer_doc/Restrictions.html >Restrictions/a> br> a href/developer_doc/selectedissues.html >Selected Issues/a> br> a href/versionHistory.html >Version History/a> br> /div> div classdocOverCol> div classdocOverHead>Classes/div> a href/developer_doc/class_structure.html >Class Structure/a> br> a href/developer_doc/taccgl_class/index.html >taccgl Class/a> br> a href/animation_library/transition_class/index.html >Transition Class/a> br> a href/developer_doc/taccglFlexiBorder_class/index.html >taccglFlexiBorder Class/a> br> a href/developer_doc/taccglMultiFace_class/index.html >taccglMultiFace Class/a> br> a href/developer_doc/taccglDddBox_class/index.html >taccglDddBox Class/a> br> a href/developer_doc/taccglMulti_class/index.html >taccglMulti Class/a> br> a href/canvas_library/taccglMaterial_class/index.html >taccglMaterial Class/a> br> a href/parallax-scrolling/Eye-class/index.html >Eye Class/a> br> a href/canvas_library/LightSource_class/index.html >LightSource Class/a> br> a href/developer_doc/taccglShaderConfig_class/index.html >taccglShaderConfig Class/a> br> a href/canvas_library/taccglOBJFile_class/index.html >taccglOBJFile Class/a> br> a href/canvas_library/taccglMTLFile_class/index.html >taccglMTLFile Class/a> br> a href/canvas_library/taccgl3DObject_class/index.html >taccgl3DObject Class/a> br> a href/canvas_library/Controller_class/index.html >Controller Class/a> br> /div> div styleclear:both> /div>/div>/div>/div>/div>div stylewidth:10px; overflow:hidden; position:absolute>div idpinned styleposition:absolute; left:0px; top:0px; visibility: hidden; font-size:120px; width:350px; text-align:center; padding:80px> Pinned Element/div>/div>script>/script>script idsexp3 typex-gsgl/x-shader>:alpha if (atan(ELMT-t,s-ELMS) > (-fract(ct)+0.5)*2.0*3.14159) a0.0; /script>script idsexp3rev typex-gsgl/x-shader>:alpha if (atan(ELMT-t,s-ELMS) > (-fract(mct)+0.5)*2.0*3.14159) a0.0; /script>script idsexp7 typex-gsgl/x-shader>:mixAlpha float alatan(ELMT-t,s-ELMS); float al1(al+3.14159)/2.0/3.14159; float rsqrt( (s-ELMS)*(s-ELMS) + (t-ELMT)*(t-ELMT) ); float f 1.0 - r / ELW * 2.0 - (ct*2.0-1.0); $$?this.inShadow{ if (f0.5) f0.0; $$?} ca*f; $$?!this.sp.singleTex{ da*f; $$?}/script>script idsexp8 typex-gsgl/x-shader>:mixAlpha float alatan(ELMT-t,s-ELMS); float al1(al+3.14159)/2.0/3.14159; float rsqrt( (s-ELMS)*(s-ELMS) + (t-ELMT)*(t-ELMT) ); float f 0.0 - sin(20.0*al+ct*3.14159*6.0)/2.0*ct - (ct*1.5-1.0); $$?this.inShadow{ if (f0.5) f0.0; $$?} ca*f; $$?!this.sp.singleTex{ da*f; $$?}/script>script idsexp8rev typex-gsgl/x-shader>:mix float alatan(ELMT-t,s-ELMS); float al1(al+3.14159)/2.0/3.14159; float rsqrt( (s-ELMS)*(s-ELMS) + (t-ELMT)*(t-ELMT) ); ca 0.0 - sin(20.0*al+mct*3.14159*6.0)/2.0 - (mct*2.0-1.0); /script>script idsexp9 typex-gsgl/x-shader>:fragPos ct clamp(ct*1.1,0.0,1.0); float alatan(ELMT-t2,s2-ELMS); float al1(al+3.14159)/2.0/3.14159; float rsqrt( (s2-ELMS)*(s2-ELMS) + (t2-ELMT)*(t2-ELMT) ); float tt ct*(1.0-ct)*3.14159*10.0*(1.0-r/ELW); s2 s ELMS + cos(al+tt)*r; t2t ELMT - sin(al+tt)*r;/script>script idsShadowOnly typex-gsgl/x-shader>:fragPos:mix:color:endShadowCalc :calcv3Dpos:alpha/script>script idsbackPlane typex-gsgl/x-shader>:fragPos:mix:color colvec3(1.0,sin(vtexpos.s*10.0+vtexpos.t*10.0)*0.1+0.9,1.0); a1.0; :endShadowCalc/script>script idslideshow1 typex-gsgl/x-shader>:fragPos float dtELMT-t; float dss-ELMS; float alatan(dt,ds); float rsqrt( ds*ds + dt*dt); float tt ct*ct*(3.14159*20.0)*clamp(1.0-r*(1.0-ct)*(4.0/ELW),0.0,1.0); s ELMS + cos(al+tt)*r; t ELMT - sin(al+tt)*r;:mix ca clamp(3.0-3.0*r/ELW-3.0*clamp(2.0*ct-1.0,0.0,1.0),0.0,1.0);/script>/div>div idtaccgl_mouseTrap stylecursor:crosshair; top:20px; left:20px; height:100%; width:100%; position:fixed;z-index:9999; display:none; transition:opacity 0.5s; -ms-user-select:none; -webkit-user-select:none; -moz-user-select:none; user-select:none onmousedowncontrolMouseDown(event) onmousemovecontrolMouseMove(event)> div stylebackground-color:white; width:350px; text-align:left; background-color:yellow> table> tr> th>Rotate /th>td> drag with left mouse button /td> /tr> tr> th>Move /th> td> drag with right mouse button /td> /tr> tr> th>Rotate Z-axis /th> td> drag with left mouse button and press CTRL /td> /tr> tr> th>Move Z-axis /th> td> drag with right mouse button and press CTRL /td> /tr> tr> th>slow/precise /th> td> hold down shift while dragging /td> /tr> tr> th>Exit /th> td> left click /td> /tr> /table> /div>/div>/BODY> !-- olcur -->/html>
View on OTX
|
View on ThreatMiner
Please enable JavaScript to view the
comments powered by Disqus.
Data with thanks to
AlienVault OTX
,
VirusTotal
,
Malwr
and
others
. [
Sitemap
]