Help
RSS
API
Feed
Maltego
Contact
Domain > www.taccgl.de
×
More information on this domain is in
AlienVault OTX
Is this malicious?
Yes
No
DNS Resolutions
Date
IP Address
2019-11-12
82.165.26.86
(
ClassC
)
2026-02-08
195.201.108.33
(
ClassC
)
Port 80
HTTP/1.1 302 FoundDate: Sun, 08 Feb 2026 05:22:17 GMTServer: ApacheLocation: https://www.taccgl.de/Content-Length: 206Content-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.de/>here/a>./p>/body>/html>
Port 443
HTTP/1.1 200 OKDate: Sun, 08 Feb 2026 05:22:18 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 Webdesign mit 2D und 3D-Animation(en) und Effekten - Software und Dienstleistung - taccGL/title> meta namedescription contentHTML5 Webdesign mit 2D und 3D-Animationen und Effekten auf der Basis von HTML5 Canvas und WebGL - Open Source Bibliothek und Dienstleistungen - taccGL>meta namekeywords valueWebdesign,Web Design,3D,Animation,Animationen,HTML5,canvas,transition,2D,library,bibliothek,javascript,framework,HTML,Web 2.0,web,development,WebGL> meta namegoogle-site-verification contentwt61_5iSrPr0esaJxNzcQjxXTLlLXplNVujdrDULXI4 />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; taccgl_epwarningEPILEPSY WARNUNG bitte Lesen, vor Betrachten der folgende Animationen (und auch vor der Erstellung und Veröffentlichung neuer Animationen). + Ein geringer Prozentsatz der Bevölkerung kann in besonderen Fällen durch bestimmte Animationen, z.B. durch Lichtblitze oder + Blinklichter epileptische Anfälle oder Bewustseinsstörungen erleiden. Dies gilt auch für Personen, die bisher keine Symptome + gezeigt oder epileptische Anfälle hatten. Falls Sie schon einmal Symptome hatten oder falls beim Betrachten der folgenden + Animation(en) Symptome wie Augen oder Muskelzucken, Schwindel, Bewustseinsveränderungen, Desorientierung, Sehstörungen, Krämpfe oder+ unfreiwillige Bewegungen auftreten, stoppen Sie bitte sofort die Animation und wenden sich an einen Arzt.; taccgl.epWarningText function () { return form action\javascript:void()\>h2>+taccgl_epwarning.replace(/WARNUNG/, WARNUNG/h2>)+ p>ul> li> button name\Disable\ type\button\ onclick\taccgl.epDisable()\>Ausschalten/button>der Animationen auf dieser Seite + li> button name\Acknowlege Warning\ type\button\ onclick\taccgl.epEnable()\/>Warnung akzeptieren/button> und Animationen aktivieren /ul>+ /form>; } 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>style>h2 {font-size:22px}/style>/head>BODY onloadiponload(); doonload();introductionAnimation(); onreadystatechange>div idalldiv langen> div idupperlinks> a href/kontakt.html>Impressum/a>/a> | a href/privacy/datenschutz.html>Datenschutzerklärung/a> | a hrefhttp://www.taccgl.org/download.html >Download/a> | a hrefhttp://www.taccgl.org/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 hrefhttp://www.taccgl.org/developer_doc/index.html >Manual/a> | span classgermanlinks> a href/webdesign-3d-mannheim.html title3D Webdesign Dienstleistungen, 3D-Animationen und Visualisierungen aus Mannheim alt3D Webdesign Dienstleistungen, 3D-Animationen und Visualisierungen aus Mannheim >3D-Webdesign/a> | /span> span classgermanlinks> a title3D Canvas Library providing transitions of HTML5+CSS elements and 3D Objects alt3D Canvas Library providing transitions of HTML5+CSS elements and 3D Objects hrefhttp://www.taccgl.org/>English Site/a> | /span> a href/kontakt.html>Kontakt/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()> Animationen laufen aus Geschwindigkeitsgründen auf Ihrem Browser/Gerät nur auf einem kleinen Teil des Bildschirms. /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> h1 idMOH1> Webdesign mit 2D und 3D-Animation(en) und Effekten /h1> p> Neue HTML5 Funktionen erlauben auf geeigneten Geräten die Anzeige von interaktiven 3D-Animationen, Effekten und Visualisierungen direkt im Web Browser, HTML5-browserübergreifend und ohne Plug-In. Unsere open source Bibliothek taccgl® hilft bei der Erstellung von Animationen. Darüberhinaus bieten wir Support und die Erstellung von Animationen als a href/webdesign-3d-mannheim.html alt3D Webdesign Dienstleistungen title3D-Webdesign Dienstleistungen>Dienstleistung/a> an. h2> Open Source Bibliothek taccgl® /h2> p> taccgl® (gespr. wie englisch tackle, geschrieben mit GL) vereinfacht die Erstellung von 3D-Animationen und Effekten auf span idMOLCanvas classMOLink onmouseoveripOpenMouseOver(MOCanvas,event,this)>HTML5 Seiten/span>, ermöglicht span idMOLvery_fast classMOLink onmouseoveripOpenMouseOver(MOvery_fast,event,this)>sehr schnelle/span> 2D und 3D-Animationen und erlaubt es HTML Elemente in 3D-Szenen zu span idMOLintegrates classMOLink onmouseoveripOpenMouseOver(MOintegrates,event,this)>integrieren/span>, mit korrekter Darstellung von verdeckten Objekten und Schatten. /p> p stylemargin-top:0px> span idMOLeasy classMOLink onmouseoveripOpenMouseOver(MOeasy,event,this)>Einfache/span> Animationen lassen sich durch klassische Webdesigner mit wenigen Zeilen javaScript sowie HTML5 und CSS erstellen./p> p> taccgl® animiert HTML Elemente, eventuell in verformter oder beschinttener Form, sowie mit externen Programmen erstellte 3D-Modelle. Alle Elemente werden zu einer 3D-Szene kombiniert und gemeinsam dargestellt, mit simulierter Beleuchtung, automatischer Behandlung verdeckter Flächen und Schatten. taccgl® ist eine span idMOLhtml5 classMOLink onmouseoveripOpenMouseOver(MOhtml5,event,this)>HTML 5/span> Bibliothek und verwendet, soweit möglich, das HTML5 Canvas Element/span> in seiner 3D- bzw. WebGL-Form. Als Fallback wird auch der 2D Canvas in eingeschränkter Form unterstützt. div idmaintext> div idinmaintext> p idstatus> /p> /div> /div> /div> div idtextright> div idintextright> div idexbox> h2 classexh2> Beispiele /h2> div stylemargin-bottom:20px; margin-top:-5px> span idMOLMouseovers classMOLink onmouseoveripOpenMouseOver(MOMouseovers,event,this)>Mouseover mit WebGL™/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()>Kugeln/a> span stylefont-size:10px titlenur WebGL>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 titlenur WebGL>3D/span>br> /div> div idexdivright> a hrefjavascript:multiCubes();>Viele Würfel/a> br> a hrefjavascript:flexitest();>Flexible/a> br> a hrefjavascript:customShader(sexp9)>CustomShader/a> span stylefont-size:10px titlenur WebGL>3D/span> br> a hrefjavascript:fliptest();>Blättereffekt/a> span stylefont-size:10px titlenur WebGL>3D/span> br> a hrefjavascript:LogoBox(100);>Logo Würfel/a> br> a hrefjavascript:smoothScrTo(document.getElementById(secondPage).offsetTop+document.getElementById(secondPage).offsetHeight,function(){});>Würfel/a> br> /div> div styleclear:right> Demos: 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> Externe 3D-Modelle: /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 titleTempel von Komana von www.mediacultura.de altTempel von Komana von www.mediacultura.de>/a> a hrefhttp://www.mediacultura.de/tempel.html targetext titleTempel von Komana von www.mediacultura.de>Tempel/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 Rekonstruktion des Templerhaus in Amorbach von www.mediacultura.de alt3D Rekonstruktion des Templerhaus in Amorbach von www.mediacultura.de border0>/a>br> a hrefhttp://www.mediacultura.de/templerhaus.html targetext title3D Rekonstruktion des Templerhaus in Amorbach von 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> br> taccgl® ist ein in Deutschland eingetragenes Warenzeichen /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> Anzeigen von mit 3D Design Programmen (z.B. Blender) erstellten 3D Objektenli> Animation: Lineare und beschleunigte Bewegung und Drehung, Zoom, Texturbewegungen etc.li> Parallax Scrolling/ul>h3> 2D / HTML / CSS /h3> ul> li> High Performance Animation von CSS formatierten HTML Elementen mit GPU Support (WebGL™)li> Animation: Lineare und beschleunigte Bewegung und Drehung, Zoom, Clip, Morph, Deform, Texturbewegungen etc.li> Anzeige von HTML Elementen im dreidimensionalen Raum mit Beleuchtungsberechnungen, Behandlung verdeckter Flächen und Schatten /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> über der Website schwebende 3D Objekte mit Schattenwurfli> Postitionierung von 3D Objekten relativ zu HTML Elementen (davor, dahinter, darauauf, darunter, rechts, links, in best. Abstand etc.)li> Schattenwurf von 3D Objekten auf HTML Elemente und umgekehrt/ul>/h3>h3> Entwicklung /h3>ul> li> Einfache Entwicklung mit HTML, CSS, and javaScript li> Fluent interface für Operationen auf mehreren selektierten Objekten oder Elementen/ul>h3> 3D Erweiterungen und Kompatibilität /h3>ul>li> WebGL™ auch auf sehr langen HTML Seiten mit Scrolling (durch Simulation eines Vollseiten-HTML-Canvas Elements)li> Verwendung von WebGL™ soweit auf dem Endgerät möglich, ansonsten Funktionen zum Anzeigen von alternativen Inhalten z.B. mit 2D Canvas li> Anzeige mehrerer oder sogar vieler 3D Objekte auf einem Canvas (um die in den Browsern limitierte Anzahl von Canvas Elementen zu umgehen und) um Ganzseitenanimationen der Objekte zu ermöglichen.li> Automatische Performancemessungen und Deaktivierung aufwändiger Funktionen auf langsamen Endgeräten. z.B. Schatten, per Fragment Shading, Canvas Größe etc. /ul> div idfurtherreading> h3>Weiterführende Links/h3> ul> li> a hrefjavascript:smoothScrTo(document.getElementById(oFeaturesOverview).offsetTop)>Detailed Features/a> li> Liste und Demo a hrefjavascript:smoothScrTo(document.getElementById(o2DFeatureTutorial).offsetTop+300)>2D Features/a> li> Liste und Demo a hrefjavascript:smoothScrTo(document.getElementById(o3DFeatureTutorial).offsetTop+100)>3D Features/a> li> Liste und Demo a hrefjavascript:smoothScrTo(document.getElementById(oWebGLFeatures).offsetTop+100)>WebGL™ Features/a> li> a hrefjavascript:smoothScrTo(document.getElementById(oDocOverview).offsetTop+100)>Übersicht Dokumentation/a> li> a hrefhttp://www.taccgl.org/tutorial/index.html titleCombining HTML5+CSS with WebGL - taccGL/WebGL Web 3D Tutorial altCombining HTML5+CSS with WebGL - taccGL/Webgl 3D Tutorial>Tutorial/a> Einführung li> a hrefhttp://www.taccgl.org/developer_doc/index.html >Dokumentation/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 hrefhttp://www.taccgl.org/blog/parallax-scrolling.html >Parallax Scroll mit 3D Hardware Beschleunigung und WebGL™ /a> /h2>p>Der 3D Effekt des Parallax Scrolling wird meistens mit javascript und CSS implemetiert, obwohl inzwischen die meistenComputer mit 3D-graphikbeschleunigten GPUs ausgestattet sind. Der (englischsprachige) Artikel beschreibt und demonstriert, wieParallax Scrolling mit voller 3D Hardwarebeschleunigung und realistischeren 3D Effekten und unter Verwendung von WebGL™ realisiert werden kann.a hrefhttp://www.taccgl.org/blog/parallax-scrolling.html >zum Artikel/a>/p> h2 stylemargin-bottom:10px> a hrefhttp://www.taccgl.org/blog/HTMLpages-with-3D-objects.html > 3D-Objekte auf HTML Seiten /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)> Der (englischsprachige) Artikel beschreibt und demonstriert, wie sich 3D-Objekte und HTML Text integrieren lassen, a hrefhttp://www.taccgl.org/blog/HTMLpages-with-3D-objects.html >zum Artikel/a> /p> h2> a hrefhttp://www.taccgl.org/blog/popup.html >Pop-Up Animationen mit weniger als 4 Zeilen Code/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, für Pop-Up, alert und Dialog Boxen, für Tool-Tips, Status-Infos oder Menüs, a hrefhttp://www.taccgl.org/blog/popup.html >weiter/a>/div>p>/p> h2> a hrefhttp://www.taccgl.org/blog/css-transition-visibility.html >CSS Transition Visibility/a> /h2>p> CSS Transitionen der visibility Eigenschaft erlauben es nicht, wie man vielleichterwartet hat, ein Element langsam ein- oder auszublenden. Der Artikel beschreibtverschiedene Alternativen mit anderen CSS und taccgl® Transitionen; a hrefhttp://www.taccgl.org/blog/css-transition-visibility.html >zum Artikel./a>h2> a hrefhttp://www.taccgl.org/blog/css_transition_display.html >CSS Transition Display /a>/h2>p> CSS erlaubt keine Transitionen für die display Eigenschaft. Allerdings gibt esAlternativen z.B. Transitionen von height oder margin-top/margin-bottom. Der Artikel beschreibt dies und zeigt Kombinationsmöglichkeiten mit taccgl® Transitionen auf; a hrefhttp://www.taccgl.org/blog/css_transition_display.html >zum Artikel./a> /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 hrefhttp://www.taccgl.org/blog/deforming-morphing-HTML.html >Verformung und Morphing von HTML Elementen/a> /h2>p> Mit taccgl® lassen sich HTML Elemente verformt darstellen, wie dieses Beispiel zeigt. Andere Funktionen ermöglichen die Verformung in einen Kreis oder einen Umblättereffekt;a hrefhttp://www.taccgl.org/blog/deforming-morphing-HTML.html >zum Artikel/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 freigegeben /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> Beta Version 0.62 steht zum a hrefhttp://www.taccgl.org/download.html >Download/a> bereit. Versionshinweise unter a hrefhttp://www.taccgl.org/versionHistory.html >Version History/a>. /p> p stylemargin-bottom:80px> Es handelt sich um eine Vorabversion im Beta-Test, die mit hoher Wahrscheinlichkeit noch Fehler und Auslassungen enthält. Bzgl. Einschränkungen siehe a hrefhttp://www.taccgl.org/developer_doc/Restrictions.html >Restrictions/a> und a hrefhttp://www.taccgl.org/developer_doc/Compatibility.html >Compatibility/a>. Derzeit ist zumdem die Dokumentation nur auf Englisch verfügbar. /p> /div> div idplxTextRight classplxTextRight> div idEpWarn> Manche Animationen oder Computerspiele können epileptische Anfälle auslösen. Vor dem Abspielen einiger Beispiele wird daher eine entsprechende Warnmeldung angezeigt. Bei der Entwicklung und Veröffentlichung von Animationen und Spielen (egal mit welcher Technologie) ist daher b>Vorsicht/b> angebracht. Wir verweisen auf die a hrefhttp://www.w3.org/TR/UNDERSTANDING-WCAG20/seizure.html>W3C guidelines/a>. /div> p idRequests> Bitte Teilen Sie taccgl® in den sozialen Netzwerken oder folgen Sie uns auf twitter /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;> ist eine schnelle script Bibliothek um HTML+CSS Seiten in 2D und 3D zu animieren. Sie verwendet span stylecolor:red>HTML 5 canvas/span>; falls möglich WebGL™ mit span stylecolor:red>Hardware Grafikbeschleunigung/span>. taccgl® ist mit HTML and CSS integriert und kann viele CSS formatiere HTML Elemente animieren. /div>/div>div idMOvery_fast classmouseover onmouseoutcloseMouseOver(MOvery_fast) onmouseoveroverMouseOver(MOvery_fast)>p>Unter guten Voraussetzungen verwendet die Bibliothek direkt die Graphikhardware des Zielrechners und die performancekritischen Programmteilelaufen direkt auf der GPU (graphic unit).Dies ermöglicht eine extreme Beschleunigung verglichen mit DOM und script basierten Animationenund erlaubt flüssige Animationen mit tausenden Elementen./p>p> Falls die Hardwarebeschleunigung nicht verwendet werden kann arbeitet taccGL mit HTML 5 - 2D canvas, der auch schnelle Animationen auf schnellen Computern erlaubt./p>p> Im Falle von langsameren GPUs oder Computern versucht taccGL Animationen zu beschleunigen, indem sienur auf einem Teil des Bildschirms abgespielt werden. Im Extremfall werden die Animationen komplett abgeschaltet, um nicht die normale Funktion der Seite zu beeinträchtigen./p>p> Ältere nicht HTML5 Browsern ohne canvas, z.B. IE 8, zeigen ebenfalls keine taccGL Animationen. /p>/div>div idMOjavascript classmouseover onmouseoutcloseMouseOver(MOjavascript) onmouseoveroverMouseOver(MOjavascript)>/div>div idMOhtml5 classmouseover onmouseoutcloseMouseOver(MOhtml5) onmouseoveroverMouseOver(MOhtml5)>taccgl® ist eine HTML 5 Bibliothek, die explizit einen HTML 5 Browser benötigtz.B. IE 9.0 und neuer.In älteren Browsern ist die Bibliothek inaktiv, um nicht die normale Funktion der Seiten zu beeinträchtigen./div>div idMOintegrates classmouseover onmouseoutcloseMouseOver(MOintegrates) onmouseoveroverMouseOver(MOintegrates)>p> taccgl® kann mit dem neuen HTML5 3D canvas (WebGL™) auch viele HTML Elemente anzeigen, was alle Vorteile des HTML5 canvas auch für diese HTML Elementenutzbar macht:/p> p> Zum Beispiel können HTML Elemente programmgesteuert mit Hardwarebeschleunigung animiert, beschleunigte Bewegungen simuliert, deformiert, gebogen, oder beleuchtet werden. Durch die Hardwarbeschleunigung ist es bei guter Grafikhardware normalerweise möglich tausende Kopien von HTML Elementen oder Teilen davon parallel zu animieren. /p> p> Zudem lassen sich so HTML Elemente vollständig in 3D Szenen integrieren, d.h. sie können einheitlich mit den 3D Objekten beleuchtet dargestellt werden, verdeckte HTML Elemente oder durch HTML Elemente verdeckte 3D Objekte werden korrekt dargestellt, selbst wenn sich Elemente und 3D Objekte teilweise durchdringen und Schatten von oder auf HTML Elementen werden automatisch korrekt dargestellt. p>Ausserdem lassen sich HTML Elemente auf 3D Objekte abblilden z.B. auf die Seiten eines Würfels oder auch auf eine Kugel./p>/div> div idMOeasy classmouseover onmouseoutcloseMouseOver(MOeasy) onmouseoveroverMouseOver(MOeasy)>p> Mit taccgl® können klassische Webdesigner einfache WebGL™ Animationen schon mit sehr wenigen Zeilen javaScript sowie HTML und CSS erstellendurch p> die Animation CSS formatierter HTML Elemente, br> die Abbildung von HTML Elementen auf 3D Objecte, br> die Darstellung von 3D Objekten, die mit WYSIWYG Modelierungsprogrammen (z.B. Blender) erstellt wurden und die Ausrichtung an den HTML und CSS Elementen und br> das fluent interface von taccgl® mit dem sich Mengen von Objekten/Elementen gleichzeitig manipulieren lassen./div>div idMOCanvas classmouseover onmouseoutcloseMouseOver(MOCanvas) onmouseoveroverMouseOver(MOCanvas)>p> HTML5 mit dem neuen Canvas Element insbesondere in der 3D Fassung bietet fantastische neue Grafikmöglichkeitenwie z.B. ul> li> eine direkte Ansteuerung der GPU unter Ausnutzung vieler Vorteile einer Grafikhardware, li> was Animationen mit tausenden animierten Dreiecken ermöglicht, li> die direkte Steuerung jedes einzelnen Pixel mit genug Rechenleistung, um die Farbe jedes Pixel pro Monitorbild (d.h. 50 oder 60 Mal pro Sekunde) neu zu berechnen, und li> die Möglichkeit Shader Programme direkt in den Grafikprozessor zu laden und so den javaScript and DOM Flaschenhals zu vermeiden,/ul>p> und außerdem spezielle 3D Features wieul> li> 3D depth buffering zur Behandlung verdeckter Flächen, li> 3D Beleuchtung durch Simulation von Lichtquelle(n) mit ambienter, diffuser Beleuchtung und Rreflektionseffekten, und li> die automatische 3D Schattenberechnung./ul>p> Canvas 3D(WebGL™) ermöglicht lediglich die Darstellung programmierter Inhalte. Die taccgl® Bibliothek setzt darauf auf und erlaubt es CSS formatierte HTML Elemente zusammen mit 3D Modellen, die mit 3D Modellierungsprogrammen erstellt wurden anzuzeigen, zu manipulieren und zu animieren./p>/div>div idMOMouseovers classmouseover stylewidth:300px onmouseoutcloseMouseOver(MOMouseovers) onmouseoveroverMouseOver(MOMouseovers)>p>Mit der Maus über verschiedenen span stylecolor:green>grünen Links/span> dieser Seite öffnen sich Textboxen mit weiteren Erklärungen./p>p>Diese Textboxen werden mit taccgl® und WebGL™ angezeigt,hauptsächlich wegen des Schattenwurfs:Die angezeigten Schatten sind mitunter recht kompliziert, da der Hintergrund nicht flach sondern ein 3D-Modell mit roten Würfeln und einem gebogenen blauen Hintergrund ist./p>p>Ebenso sind die Animationen zum Öffnen und Schließen mit taccgl® erstellt. Die öffnende Animation wird zufällig aus mehreren ausgewählt z.B. morphing von einem Kreis in ein Rechteck. /p>/div>div idMO3DObjects classmouseover stylewidth:200px onmouseoutcloseMouseOver(MO3DObjects) onmouseoveroverMouseOver(MO3DObjects)> /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> taccgl® Features im Einzelnen /h1>div iddtFeLeft>ul> li> JavaScript Bibliothek für 2D and 3D Grafik- und Textanimationen mit WebGL™ zum B>Webdesign klassischer HTML Web Seiten/b>.li> Automatische Erkennung inkompatibler Browser und Geräte ohne WebGL™ und stille Deaktivierung der Grafikfunktionen bzw. automatische und halb-automatische Anzeige von Alternativen (z.B. Canvas 2D) li> Animation von CSS formatierten HTML Elementen, von Canvas 2D Abbildungen, von eventuell verformten Teilen davon und von 3D Objekten aus Modelldateien.li> Transitionen für lineare und konstant beschleunigte Bewegung, für Rotationen, Farbe, Beschneiden, Wachsen und Schrumpfen, Bewegung von Texturen, Verformungen, Morphen, etc li> Konsistente Behandlung verdeckter Flächen, Beleuchtung und Schatten für alle animierten HTML Elemente and 3D Objekte.li> Ausführung meherer tausend paralleler Transitionen mittels GPU Beschleunigung.li> Berechnung von Beleuchtung, Farben, Schatten und benutzerdefinierter Funktionen auf Pixelebene. /ul>/div>div iddtFeRight>ul>li> Einfache Programmierung mit HTML, CSS, und javaScriptli> Fluent interface für Transitionen auf Mengen selektierter Elemente und Objekteli> Initiale und permanente Messungen und Abschätzung der Grafikleistung und darauf basierende Fall-Back und Graceful Degradation Mechanismen für Browser und Geräte, die WebGL nicht oder nicht mit der erforderlichen Performance unterstützen, z.B. Abschaltung der Schatten, dynamische Verkleinerung des Canvas, Verwendung von HTML5 Canvas 2D anstelle WebGL™ oder letztendlich die komplette Abschaltung der Animationen (z.B. in IE 8) mit der Möglichkeit stattdessen Bilder o.ä. anzuzeigen.li> Je nach Gerät und Browser Verwendung von HTML 5 Canvas 3D (WebGL™) oder Canvas 2D.li> Simulation mancher 3D Funktionen auf Canvas 2D.li> Animation von 3D Modellen (OBJ und MTL Dateien) mit WebGL™.li> Automatisch generierte und benutzerdefinierte Shader-Programme.li> Open source, BSD like license. /ul>/div>div styleclear:both> /div>div classdtFeColumn>div classhtd>2D Features/div>Lineare Bewegungbr>Konstant beschleunigte Bewegung br>Rotation um Achse und Mittelpunktbr>Rotation um Achse und gegebenen Punktbr>Animation von HTML Elementen ( a hrefhttp://www.taccgl.org/developer_doc/Restrictions.html >Restr./a>)br>Animation von 2D Canvas Abbildungenbr>HTML Koordinatensystembr>Animation der Hintergrundfarbebr>Verschiedene Blenden br>Beschneiden, vergrößern und verkleinernbr>3D Objekte mit HTML Elementen als Texturbr>Bewegte Texturenbr>Fortsetzung von Transitionen br>evtl. mit konstanter Geschwindigkeitbr>Morphing in Kreise oder Wellen (WebGL Mode) br>Beleuchtungseffekte (WebGL Mode)/div>div classdtFeColumn>div classhtd>3D Features/div>(im WebGL und im Fallback Modus:)br>Lineare und beschleunigte Bewegung in 3Dbr>Rotationen in 3Dbr>Kompatibel mit HTML Koordinatensystembr>Boxenbr>Objecte mit rechtwinklichen Flächenbr>(im fallback Modus ohne WebGL:)br>Parallelprojektionbr>Eingeschränkte Behandlung von verdesckten Flächenp>span stylefont-size:20px>Operationen auf Mengen/span>br>Selektion nach CSS Klassebr>Selektion nach HTML Namebr>Selection nach HTML Tag br>Anwendung von Transitionen auf Mengen von Elementenbr>Schneiden von Elementen in Mengen horizontaler/vertikaler Scheibenbr>Behandlung von Mengen von Transitionenbr>/div>div classdtFeColumn>div classhtd>webGL Features/div>(im WebGL™ Modus:) br>Bereits erwähnte 2D and 3D Features aber mitbr>voller perpectivischer Projektion und br>kompletter Behandlung verdeckter Flächenbr>Ausführung der Transitionen in der GPU als Shader Programmebr>Verformte HTML Elemente br>Anzeige von 3D Modellen aus OBJ/MTL Dateien br>Selektion von Objekten aus 3D Modellen br>Ausrichtung von 3D Modellen und HTML Elementenbr>Abbildung von HTML Elementen auf 3D Objektebr>Ambiente, diffuse, und specular Beleuchtung br>Beleuchtungsberechnung pro Vertex oder pro Fragment br>Generierung von Shader Programmenbr>Benutzerdefinierte Shader 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>Versteckter 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 im Detail /h2> p styledisplay:none; color:red idno2dcomment> Dieser Browser bzw. dieses Gerät unterstützt keinen canvas mit der notwendigen Geschwindigkeit WebGL™ (zumindest kann es taccGL nicht nutzen). Daher funktionieren die folgenden Beispiele nicht wie beschrieben. /p> p> Transitionen und Animationen Schritt für Schritt: p> h3> Animate CSS formatted HTML Elements /h3> a hrefjavascript:moveActor(testimg2d);>Aktor bewegen/a>, a hrefjavascript:rotateActor(2DFeatureTutorial);>Aktor rotieren/a>, a hrefjavascript:rotateMoveActor(2DFeatureTutorial);>Rotation und Bewegung/a>, a hrefjavascript:blendOutActor(testimg2d);>ausblenden/a>, a hrefjavascript:blendInActor(testimg2d);>Fade In Actor/a> h3> Einfache Lineare Bewegung /h3> p> Move around a CSS formatted HTML element, z.B. a hrefjavascript:moveSimple(testimg2d);>Bewegung eines Image Elements/a>, a hrefjavascript:moveSimple(moveHeadline);>Bewegung eines Text Elements/a>, a hrefjavascript:flyoutSimple(testimg2d);>Bewegung eines Bildes von der HTML Position/a>, a hrefjavascript:flyoutSimple(moveHeadline);>Bewegung eines Texts von der HTML Position/a>, a hrefjavascript:flyinSimple(testimg2d);>Bewegen eines Bildes zur HTML Position/a>, a hrefjavascript:flyinSimple(moveHeadline);>Bewegung eines Texts zur HTML Position/a>, h3> Show and Hide HTML/CSS element/h3> p> a hrefjavascript:flyoutSimple(testimg2d,true);>Bewegung eines Bildes von der HTML Position und verstecken der original Elements/a>, a hrefjavascript:flyinSimple(testimg2d,true);>Bewegen eines Bildes zur HTML Position (from)und danach Anzeige des Originalelements/a>, a hrefjavascript:moveSimple(hiddenText);>Bewegung eines versteckten Text Elements/a> /p> h3> Kombination einfacher Animationen /h3> p> a hrefjavascript:moveAround(testimg2d);>Bewegung eines Elements/a> (hide original HTML element using CSS during move and show afterwards), a hrefjavascript:moveAroundMultiple(testimg2d);>Bewegung mehrerer Elemente/a>, a hrefjavascript:moveEverywhere(testimg2d);>Bewegung mehrerer Kopien eines Elements/a> h3> Beschleunigte Bewegung /h3> p> a hrefjavascript:moveAccel()>Beschleunigte Bewegung/a>, a hrefjavascript:moveAccelDec()>Verzögerte Bewegung (negative Beschleunigung)/a>, a hrefjavascript:moveAccelPath()>Bewegung entlang eines Weges/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> Blenden und Farben /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)>Blenden/a>, a hrefjavascript:blend(1,-1,0,2)>Einblenden/a>, a hrefjavascript:blend(1,-5,-5,1)>Überblenden/a>, a hrefjavascript:blendColor()>Überblenden zu Farbe und Farbwechsel /a> h3> Rotationen /h3> a hrefjavascript:rotateMiddle()>Rotation/a>, a hrefjavascript:rotatePoint()>Rotation um gegebenen Punkt/a>, a hrefjavascript:rotateMiddle(true)>Rotation und Bewegung/a>, a hrefjavascript:rotateMiddle(false,-0.35)>Teilweise Rotation/a>, a hrefjavascript:rotateMiddle(true,2)>Mehrfache Rotation/a> h3> Animation eines rechtwinkligen Ausschnitts eines Elements /h3> a hrefjavascript:simpleRestrict()>Bewegung der oberen linken Ecke des Bildes/a>, a hrefjavascript:multiRestrict()>Zerlegung des Bildes in Teile/a> h3> Größenanimationen /h3> a hrefjavascript:simpleGrow(0,0,900,243)>Wachsen von 0/a>, a hrefjavascript:simpleGrow(500,200,900,243)>Teilweises Wachsen/a>, a hrefjavascript:simpleGrow(100,20,1000,1000)>groß/a>, a hrefjavascript:GrowandMove(false,false,1500,1000)>Wachsen und Bewegen/a>, a hrefjavascript:simpleClip()>Beschneiden von 0/a>, a hrefjavascript:simpleClip(500,200)>Teilweises Beschneiden/a> h3> Bewege Element und Textur /h3> a hrefjavascript:simpleMap()>Bewege Bild mit abgebildetem Text/a>, a hrefjavascript:mapMove()>Bewege abgebildeten 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> Dieser Browser bzw. dieses Gerät unterstützt keinen canvas mit der notwendigen Geschwindigkeit WebGL™ (zumindest kann es taccGL nicht nutzen). Daher funktionieren die folgenden Beispiele nicht wie beschrieben. /p> p> Die meisten 2D Bewegungen arbeiten auch im dreidimensionalen Raum: Bewege a hrefjavascript:moveAccel3D(true,true,-2000)>zurück (z>0)/a> und a hrefjavascript:moveAccel3D(true,true,2000)>vor (z<0)/a>, Rotiere um a hrefjavascript:rotateMiddle3D(false,1,0,0)>X/a>, a hrefjavascript:rotateMiddle3D(false,0,1,0)>Y/a>, und a hrefjavascript:rotateMiddle3D(false,0,0,1)>Z Achse/a>, Bewege und Rotiere um a hrefjavascript:rotateMiddle3D(true,1,0,0)>X/a>, a hrefjavascript:rotateMiddle3D(true,0,1,0)>Y/a>, und a hrefjavascript:rotateMiddle3D(true,0,0,1)>Z Achse/a>, Rotiere um a hrefjavascript:rotateMiddle3D(true,1,1,0)>XY/a>, a hrefjavascript:rotateMiddle3D(true,0,1,1)>YZ/a>, und 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>, und a hrefjavascript:rotateMiddle3D(false,0,0,-1,-15)>Z Achse/a>, . /p> p>Normalerweise werden HTML Elemente in der z0 Ebene abgebildet. Elemente, die mit taccgl® angezeigt werden verwenden die selben x und y Koordinaten (in Pixel mit Ursprung in der oberen linken Ecke des aktuellen Fensters oder Frames) und haben positive z Koordinaten für Elemente hinter und negative z Koordinaten für Elemente vor der z0 Ebene./p> h3> 3D Elemente /h3> Anzeigen eines Elements als 3D-Box : a hrefjavascript:boxDisplay(-1000);>Small Box Test/a>, a hrefjavascript:boxDisplay(1500);>Big Box Test/a>, a hrefjavascript:LogoBox(1,3DFeatureTutorial);>Logo Würfel/a>, a hrefjavascript:LogoBox(10,3DFeatureTutorial);>Einige Logo Würfel/a>, a hrefjavascript:LogoBox(100,3DFeatureTutorial);>Mehr Würfel/a>, a hrefjavascript:LogoBox(300,3DFeatureTutorial);>300 Würfel/a> br> Abbildung von HTML Elementen auf die Oberflächen: a hrefjavascript:introCube()>Text Mapped Cube/a>br> 3D Objekt mit rechtwinkligen Flächen: a hrefjavascript:partialBoxDisplay();>Multi Face Object/a> h3> Mengen /h3> p> Selektieren mehrerer Elemente: 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)>Rotation/a> aller em>a/em> tags.br> Create 3 slices und a hrefjavascript:slicesExample(3)>Rotation/a> in Folge.br> Erzeuge 50 Scheiben und a hrefjavascript:slicesExample(50)>Rotation/a> in Folge.br> Erzeuge 500 Scheiben und a hrefjavascript:slicesExample(500)>Rotation/a> in Folge.br> Erzeuge 5000 Scheiben und a hrefjavascript:slicesExample(5000)>Rotation/a> in Folge.br>p> a hrefjavascript:showMultiple3D(testimg);>Zeige mehrere Kopien/a> br> a hrefjavascript:moveEverywhere3D(testimg);>Bewege mehrere Kopien/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> Dieser Browser bzw. dieses Gerät unterstützt kein WebGL™ (zumindest kann es taccGL nicht nutzen). Daher funktionieren die folgenden Beispiele nicht wie beschrieben. /p> p> Im WebGL™ Modus arbeiten die 2D und 3D Features mit WebGL™ und entsprechender GPU Unterstützung. Darüberhinaus sind folgende zusätzliche Features verfügbar:/p> h3> Elimination Verdeckter Fächen / Depth Buffering /h3> p> Korrekte Darstellung verdeckter Oberflächen, selbst bei sich a hrefjavascript:moveAroundMultiple3D(testimg);>durchdringenden Elementen/a>, siehe auch a hrefjavascript:introCube()>Mapped Cube/a> h3> Anzeige von 3D Modellen im OBJ Dateiformat /h3> p> a hrefjavascript:simpleModel(.*,ltb)>Anzeige/a>, a hrefjavascript:simpleModel(Torus,ltb)>Selektion/a> von einem oder mehreren Objekten des Modells, a hrefjavascript:simpleModel(Torus,ssb)>Stretch Display/a>, Positionierung des Modells auf HTML Elementen, viele Ausrichtungsoptionen 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 Elemente können auf 3D Objekte abgebildet werden entweder a hrefjavascript:simpleMap2()> vollständig/a> oder mit a hrefjavascript:simpleUV(Cylinder,rbc,f)>UV mapping/a>. /p> h3> Beleuchtung /h3> p> Beleuchtungsberechnung pro Fragment/Pixel: separat steuerbare ambiente, diffuse, und spiegelnde Beleuchtung a hrefjavascript:lightDemo(red,0.7,0.3, 0.3, 256)>Hervorgehobene Ambiente Beleuchtung/a>, a hrefjavascript:lightDemo(red,0.3,0.7, 0.3, 256)>Hervorgehobene Diffuse Beleuchtung/a>, a hrefjavascript:lightDemo(red,0.3,0.7, 0, 256)>Ohne spiegelnde Beleuchtung/a>, a hrefjavascript:lightDemo(red,0.3,0.5, 0.5, 64)>Hervorgehobene spiegelnde Beleuchtung/a>, and a hrefjavascript:lightDemo(red,0.3,0.5, 0.5, 16)>Hervorgehobene spiegelnde Beleuchtung mit wenig Glanz/a>. /p> h3> Benutzerspezifische Shader /h3> p> Erlaubt es programmatisch jeden einzelnen Punkt zu berechnen a hrefjavascript:ShaderFeature(sexp3);>Kreisblende/a>, a hrefjavascript:ShaderFeature(sexp7);>Center-Blende/a>, and a hrefjavascript:ShaderFeature(sexp8);>Rotierende Blende/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> Übersicht Dokumentation /h2> Die Dokumentation ist derzeit leider nur auf Englisch verfügbar. div classdocOverCol> div classdocOverHead>Tutorial/div> a hrefhttp://www.taccgl.org/tutorial/firstExample.html >First Example/a> br> a hrefhttp://www.taccgl.org/tutorial/basic-shape-transition.html >Basic Shapes/a> br> a hrefhttp://www.taccgl.org/tutorial/basic-3D-Models.html >Basic 3D Models/a> br> a hrefhttp://www.taccgl.org/tutorial/basic-Animations.html >Basic Animations/a> br> a hrefhttp://www.taccgl.org/tutorial/SimpleRotation.html >Simple Rotation/a> br> a hrefhttp://www.taccgl.org/tutorial/AcceleratedMotion.html >Accelerated Motion/a> br> a hrefhttp://www.taccgl.org/tutorial/colors-css-textures.html >Colors and Textures/a> br> a hrefhttp://www.taccgl.org/tutorial/controllingVisibility.html >Integration of HTML and WebGL/a> br> a hrefhttp://www.taccgl.org/tutorial/Timing.html >Timing Transitions/a> br> a hrefhttp://www.taccgl.org/tutorial/Continuations.html >Continuations/a> br> a hrefhttp://www.taccgl.org/tutorial/Boxes.html >Boxes/a> br> a hrefhttp://www.taccgl.org/tutorial/javaScript_embedding.html >JavaScript Embedding/a> br> a hrefhttp://www.taccgl.org/tutorial/Models.html >External 3D Models/a> br> a hrefhttp://www.taccgl.org/tutorial/providing-OBJ-and-MTL-files.html >Providing OBJ and MTL Files/a> br> a hrefhttp://www.taccgl.org/tutorial/creating-OBJ-and-MTL-files.html >Creating OBJ and MTL Files/a> br> a hrefhttp://www.taccgl.org/tutorial/loading-OBJ-files.html >Loading Model Files/a> br> a hrefhttp://www.taccgl.org/tutorial/HTML-CSS-textures-on-3D-Models.html >HTML Textures on 3D Models/a> br> a hrefhttp://www.taccgl.org/tutorial/HTML-CSS-UV-Mapping-on-3D-Models.html >HTML CSS UV Mapping on 3D Models/a> br> a hrefhttp://www.taccgl.org/tutorial/parts-of-HTML-elements.html >Parts of Elements/a> br> a hrefhttp://www.taccgl.org/tutorial/CanvasOperation.html >HTML Elements on Canvas/a> br> a hrefhttp://www.taccgl.org/tutorial/multiple-transition-selectors.html >Selectors for Multiple Transitions/a> br> a hrefhttp://www.taccgl.org/tutorial/multiple-triangles.html >Multiple Triangle Animations/a> br> a hrefhttp://www.taccgl.org/tutorial/Flexibles.html >Flexibles/a> br> a hrefhttp://www.taccgl.org/tutorial/Fragment-Shaders.html >Fragment Shaders/a> br> a hrefhttp://www.taccgl.org/tutorial/Expressions.html >Expressions/a> br> /div> div classdocOverCol> div classdocOverHead>Manual/div> a hrefhttp://www.taccgl.org/developer_doc/introduction.html >Introduction/a> br> a hrefhttp://www.taccgl.org/developer_doc/canvasoperation.html >Canvas Operation/a> br> a hrefhttp://www.taccgl.org/developer_doc/coordinate_system.html >Coordinate System/a> br> a hrefhttp://www.taccgl.org/developer_doc/texture_canvas.html >Texture Canvas/a> br> a hrefhttp://www.taccgl.org/animation_library/transitions.html >taccgl Transitions/a> br> a hrefhttp://www.taccgl.org/developer_doc/Lighting.html >Lighting/a> br> a hrefhttp://www.taccgl.org/developer_doc/Shadows.html >Shadows/a> br> a hrefhttp://www.taccgl.org/developer_doc/InstallLibrary.html >Installing the Library/a> br> a hrefhttp://www.taccgl.org/developer_doc/EmbedHTML.html >Embedding into HTML/a> br> a hrefhttp://www.taccgl.org/developer_doc/Debugging.html >Debugging/a> br> a hrefhttp://www.taccgl.org/animation_library/ResponsiveLayouts.html >Responsive and Mobile Layouts/a> br> a hrefhttp://www.taccgl.org/developer_doc/ddcontext.html >2D Canvas Context/a> br> a hrefhttp://www.taccgl.org/developer_doc/Compatibility.html >Compatibility/a> br> a hrefhttp://www.taccgl.org/developer_doc/Restrictions.html >Restrictions/a> br> a hrefhttp://www.taccgl.org/developer_doc/selectedissues.html >Selected Issues/a> br> a hrefhttp://www.taccgl.org/versionHistory.html >Version History/a> br> /div> div classdocOverCol> div classdocOverHead>Classes/div> a hrefhttp://www.taccgl.org/developer_doc/class_structure.html >Class Structure/a> br> a hrefhttp://www.taccgl.org/developer_doc/taccgl_class/index.html >taccgl Class/a> br> a hrefhttp://www.taccgl.org/animation_library/transition_class/index.html >Transition Class/a> br> a hrefhttp://www.taccgl.org/developer_doc/taccglFlexiBorder_class/index.html >taccglFlexiBorder Class/a> br> a hrefhttp://www.taccgl.org/developer_doc/taccglMultiFace_class/index.html >taccglMultiFace Class/a> br> a hrefhttp://www.taccgl.org/developer_doc/taccglDddBox_class/index.html >taccglDddBox Class/a> br> a hrefhttp://www.taccgl.org/developer_doc/taccglMulti_class/index.html >taccglMulti Class/a> br> a hrefhttp://www.taccgl.org/canvas_library/taccglMaterial_class/index.html >taccglMaterial Class/a> br> a hrefhttp://www.taccgl.org/parallax-scrolling/Eye-class/index.html >Eye Class/a> br> a hrefhttp://www.taccgl.org/canvas_library/LightSource_class/index.html >LightSource Class/a> br> a hrefhttp://www.taccgl.org/developer_doc/taccglShaderConfig_class/index.html >taccglShaderConfig Class/a> br> a hrefhttp://www.taccgl.org/canvas_library/taccglOBJFile_class/index.html >taccglOBJFile Class/a> br> a hrefhttp://www.taccgl.org/canvas_library/taccglMTLFile_class/index.html >taccglMTLFile Class/a> br> a hrefhttp://www.taccgl.org/canvas_library/taccgl3DObject_class/index.html >taccgl3DObject Class/a> br> a hrefhttp://www.taccgl.org/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>Drehen /th>td> mit linker Maustaste ziehen /td> /tr> tr> th>Bewegen/th> td> mit rechter Maustaste ziehen /td> /tr> tr> th>Drehen um Z-Achse/th> td> mit rechter Maustaste ziehen und STRG drücken /td> /tr> tr> th valigntop>Nah/Fern /th> td> mit rechter Maustaste ziehen und STRG drücken /td> /tr> tr> th>langsam/Lupe /th> td> Shift-Taste während einer Bewegung festhalten/td> /tr> tr> th valigntop>Ende/th> td> einfacher Klick mit linker Maustaste /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
]