Siddhartha Gautama :
Vor ca. 2 600 Jahren gab es noch keine Computer - und doch wurde vermutet,
dass die ( künstlichen 3D- ) Formen leer sind und anderseits die Leere als Form erscheinen kann. MmHhh ...
Nach dem einlesendem Verständnis von BREP 3D-Datenstrukturen und den grundlegenden WebGL2.0 ( OpenCL ) Funktionen ist ein 3D-Würfel zu programmieren ( "selfmade" ). Die Programmteile sind erklärend zu Kommentieren.
Nähere Hinweise in der Veranstaltung.
Zu einer dreidimensionalen realen Welt gehören 6 Freiheitsgrade , d.h. 6 frei wählbare Bewegungsmöglichkeiten ( 3 Translationsfreiheitsgrade und 3 Rotationsfreiheitsgrade ). Eine quasi realitätstreue 3D-Darstellung/Abbildung der Wirklichkeit wird 3D-Darstellung genannt.
Bei einer Simulation dient ein mathematisch-physikalisches Modell als Ersatz für die Untersuchungen eines reales ( kompexen ) Systems. Die Simulationsergebnisse hängen von den Modell-Parametern und dem gewählten Modell ab. Simulationen sind z.B. weltweite Klima-Wetter-Simulationen, Untersuchungen von Verkehrsaufkommen, Prognosen für die Finanzwelt.
Weblinks zu geometrischen Modellierung:
Bei 24 Bildern (Bitmap) pro Sekunde entsteht die Illusion einer flüssigen Bewegung. Ein 90 Minuten Film hat etwa 130 000 Einzelbilder. Animation gibt es z.B. im Trickfilmbereich, bei Kino, Fernsehen, Werbung, bei naturwissenschaftliche Visualisierungen, Architektur, Design, Lehre.
Wie können digital-analog-Transformationen auf Ausgabegeräten innere Bilder erzeugen?
Eine GPU/VPU (Visual/Graphics Processing Unit) ist ein "single-chip processor",
der bei dynamischen Videos und bewegten Grafiken
den zentralen Prozessor entlastet und die Performance von Renderprozessen befördert.
GPU/VPU übernehmen spezielle Grafikberechnungen und Augaben von massiv parallelisierbare Render-Prozessen.
Ab 1990er Jahre gab es 3D-Beschleuniger-Karten für Z-Puffern, Texture Mapping, Skinning und Antialiasing.
Siehe z.B.
Grafikprozessor
,
Grafik-Hardware
(Datenbak, Übersicht über Grafik-Karten),
Sensoren, Aktoren, Geometrien, Datenflüsse, ...
2-D or 3-D Graphiken
Rendern von ("gefüllten") Polygonen
Texture mapping, Skinning
PC mit Video-Card auf dem Motherboard
Graphik Software ( CAD, rechnergestützte Konstruieren )
Spielkonsolen mit Sensoren, Aktoren, Geometrien, Datenflüsse, ...
MPEG decoding
Wii ( Nintendo )
PlayStation 3 ( Sony )
Xbox 360 ( Microsoft )
DirectX ist eine Sammlung von multimediaintensive Anwendungen, die per COM-basiertes API ( Application Programming Interface ) unterstützt werden, Spiele, Spielkonsole und mehr.
DirectX, Graphics Device Interface (GDI) und Display Device Interface (DDI) und Direct2D/3D-Grafik. DirectX Media Objects, Audio- und Video-Ströme direkt ändern Direct3DX setzt auf Direct3D auf, kann mit Hardware Emulation Layer (HEL) Bildern mit GDI-Funktionen manipulieren, Seitenumschaltung (Flipping, Doppelpufferung), Blitting, Clipping, 3D-Z-Puffer, Overlays und direkte Steuerung des Datenflusses durch die Video-Port Hardware (Video-Port Manager) DirectSound,Wiedergabe und Aufnahme von Soundeffekten, Raumklangunterstützung DirectMusic, Wiedergabe von Musik, MIDI-Musik, kein MP3,Software-Synthesizer-Service XAudio 2, programmierbaren DSP-Programme Direct Input, XInput, Eingabegeräte, wie Tastatur, Maus, Joysticks, absolutes Koordinatensystem, Bewegungsachsen, bis 32 Knöpfe, Vibrieren eines Gamepads, Widerstand beim Bewegen DirectPlay, Kommunikation von Multiplayerspielen, Netzwerkspielen, Online-Spielen, OSI-Modell, DirectPlay Session DirectSetup, Installationsroutine, automatisch Prüfungen
In allen Wissenschaften und im Alltag sind Render-Funktionalitäten für ein dreidimensional gestaltetes Weltbild grundlegend.
WebGL wird in zahlreichen Wissenschaften und Kontexten verwendet.
Beispiele:
Optical flow
( en.wikipedia )
Khronos Group
( wikipedia ),
Khronos.org
WebGL Specs latest/2.0/
Developers reference-cards
opengl43-quick-reference-card.pdf
OpenGL specs GLSLangSpec.4.60.pdf
Einführung
( developer, mozilla.org )
WebGL2
( fundamentals.org ),
WebGL2 Lessons
( fundamentals.org ),
jsfiddle.net/api/mdn/
Reference Guides/Reference Cards
( Khronos, Download all latest )
3D Asset Exchange Schema ( austauschbare Speicherformate )
COLLADA 1.5.0 Schema (includes B-rep, geolocation, and OpenGL ES 2.0 Profile)
Kategorie:
CAD-Datenformat
Grafische Primitiv
3D Dateiformate
DXF ( Autocad )
Khronos:
OpenGL-Refpages es2.0
WebGL Specs 1.0;
WebGL-Reference-card.pdf 2.0
1.0 von khronos
WebGL-Cheat-Sheet
( webglacademy.com )
Courses
( webglacademy.com )
WebGL-Frameworks:
WebGL_ WebGL-Frameworks: https://threejs.org/examples/ https://threejs.org/docs/index.html#manual/introduction/Creating-a-scene https://de.wikipedia.org/w/index.php?title=A-Frame_(Framework)&printable=yes
- OpenGL ES steht für "OpenGL for (E)mbedded (S)ystems" - OpenGL ES ist eine Teilmenge von OpenGL 3D Graphik-Interface (API). - OpenGL ES wird ( 2017 ) verwendet für video game consolen mobile Phones, Smartphones PDA (personal digital assistants) - OpenGL ES arbeitet zwischen den Software Anwendungen, Software Graphics Engines und der Hardware - OpenGL ES 3.0 entspricht WebGL 2.0 - OpenGL ES und WebGL sind "royalty-free"
OpenCL ( royalty-free ), khronos.org: OpenCL , OpenCL 2.2 Reference-Guide
GLSL (GL Shader Language) entspricht einer "strictly typed C/C++ like language" von einer OpenGL-Basis. 2017 aktuell GLSLangSpec.4.60; Siehe z.B. Wikipedia OpenGL Shading Language , Khronos.org GLSLangSpec.4.60.pdf
attribute const uniform varying buffer shared coherent volatile restrict readonly writeonly atomic_uint layout centroid flat smooth noperspective patch sample break continue do for while switch case default if else subroutine in out inout float double int void bool true false invariant precise discard return mat2 mat3 mat4 mat2x2 mat2x3 mat2x4 mat3x2 mat3x3 mat3x4 mat4x2 mat4x3 mat4x4 dmat2 dmat3 dmat4 dmat2x2 dmat2x3 dmat2x4 dmat3x2 dmat3x3 dmat3x4 dmat4x2 dmat4x3 dmat4x4 vec2 vec3 vec4 ivec2 ivec3 ivec4 bvec2 bvec3 bvec4 dvec2 dvec3 dvec4 uint uvec2 uvec3 uvec4 lowp mediump highp precision samplerCube samplerCubeShadow sampler1D sampler2D sampler3D sampler1DShadow sampler2DShadow sampler1DArray sampler2DArray sampler1DArrayShadow sampler2DArrayShadow isampler1D isampler2D isampler3D isamplerCube isampler1DArray isampler2DArray usampler1D usampler2D usampler3D usamplerCube usampler1DArray usampler2DArray sampler2DRect sampler2DRectShadow isampler2DRect usampler2DRect samplerBuffer isamplerBuffer usamplerBuffer sampler2DMS isampler2DMS usampler2DMS sampler2DMSArray isampler2DMSArray usampler2DMSArray samplerCubeArray samplerCubeArrayShadow isamplerCubeArray usamplerCubeArray image1D iimage1D uimage1D image2D iimage2D uimage2D image3D iimage3D uimage3D image2DRect iimage2DRect uimage2DRect imageCube iimageCube uimageCube imageBuffer iimageBuffer uimageBuffer image1DArray iimage1DArray uimage1DArray image2DArray iimage2DArray uimage2DArray imageCubeArray iimageCubeArray uimageCubeArray image2DMS iimage2DMS uimage2DMS image2DMSArray iimage2DMSArray uimage2DMSArray
Keywords reserved for future:
common partition active asm class union enum typedef template this resource goto inline noinline public static extern external interface long short half fixed unsigned superp input output hvec2 hvec3 hvec4 fvec2 fvec3 fvec4 sampler3DRect filter sizeof cast namespace using
Zu diesem Projekt gehören Teile von Mathematik, wie
das Darstellen von parametrisierten Kurven, Ortskurven, grafische Darstellungen
und dem Canvas-Device-Kontext.
In diesem Zusammenhang stehen auch Gebiete, wie z.B.
Lineare Regression
,
Methode der kleinsten Fehler-Quadrate
,
Curve fitting,
Regressionsanalyse
( allgemein ),
Statistik und Regressionsanalyse
( grafische Darstellung der Regressionsanalyse, Statistik ) und Data-Driven Documents ( D3 ).
Zu diesem Projekt gehören
Grundkenntnisse der Computergrafik, die grafische Web-Präsentation von (Statistik-) Daten, Canvas2d-Web-Grafik mit DC und mehr.
Ein Wissen um die Bedienung von Grafik-Programmen ist für eine erfolgreiche Toolchen-Entwicklung, der Erstellung einer "self-made" Canvas-Bibliothek wohl nicht hinreichend, wenn Events bei Grafische Elementen und mauszentrierte Applikationsentwicklungen benötigt werden. "Plagiate sind out".
Seit den Anfängen der elektronischen Datenverarbeitung gibt es zahlreiche, kommerzielle, umfangreiche Grafik-Programme, siehe z.B. de.wikipedia Grafiksoftware.
Wird in der Veranstaltung behandelt.
Neu: canvas.toDataURL() ctx.setTransform() ?ctx.getTransform() ?ctx.resetTransform() meint ctx.setTransform(1,0,0,1,0,0) var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var a = 0.866, c =-0.500, e = 0, b = 0.500, d = 0.866, f = 0; ctx.setTransform(a,b, c,d, e,f); ctx.fillRect(0, 0, 100, 100);
Gesichtspunkte für die zu entwickelnde App sind Einfachheit, Robustheit, prägnant Klarheit, Paxisnähe. Die eigenen App-Ideen ( mit Alleinstellungsmerkmal ) können z.B. hin gerichtet sein auf
Beispiele für dieses App-Projekt sind z.B. 2 1/2 D Präsentationsgrafiken, Mediengestaltungen, Balkendiagramme, Tortendiagramme, Geo-Algebra, geometrische Formen ( de.wikipedia: Dreieck , Sierpinski-Dreieck , mathworld: Perfektes Rechteck , usw. ), 3D digitales Geländemodelle siehe de.wikipedia Polygonfläche und Schwerpunkt ( Gauß-Ellington ), usw.
HTML5 ermöglicht die eingebettete Verwendung von Canvas-Tags, die als Grafik-Flächen dienen. Eine "elektronische Zeichenfläche" wird engl. auch Canvas ( Leinwand, Gewebe ) genannt. Die Canvas-Unterstützung erfordert ECMAScript. Canvas bietet eine infache "nativ"-Schnittstelle.
Obwohl Canvas2DContext leichtgewichtig gegnüber WebGL, OpenGL, Silverlight ist,
so gibt es doch nützliche Funktionen und Properties, wie z.B.
ctx.translate(), ctx.translate(), ctx.scale(),
ctx.createLinearGradient(), ctx.createRadialGradient() und shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor
.
Es gibt:
Canvas2DContext hat u.a. Funktionen für 'arc','arcTo','beginPath','bezierCurveTo','clearRect','clip', 'closePath','drawImage','fill','fillRect','fillText','lineTo','moveTo', 'quadraticCurveTo','rect','restore','rotate','save','scale','setTransform', 'stroke','strokeRect','strokeText','transform','translate'
Properties, wie z.B. 'canvas','fillStyle','font','globalAlpha','globalCompositeOperation', 'lineCap','lineJoin','lineWidth','miterLimit', 'shadowOffsetX','shadowOffsetY', 'shadowBlur','shadowColor', 'strokeStyle','textAlign','textBaseline'
Einige Canvas-Weblinks:
whatwg the-canvas-element whatwg beginPath() en.wikipedia Canvas_element
de.wikipedia Canvas-HTML-Element, whatwg.org the-canvas-element 2012, simon Canva-Referenz-Karte, alles auf einen Blick w3schools Canvas-Referenz, alles auf einen Blick w3schools Canvas, Einführung html5canvastutorials HTML5 Canvas-Tutorial, opera html-5-canvas-the-basics , opera html-5-canvas-painting , mozilla Canvas tutorial , mozilla DOM/EventTarget.addEventListener , apple Safari HTML5 Canvas Guide
Die Canvas-Browser-Unterstützung zeigt en.wikipedia: en.wikipedia: Comparison_of_layout_engines_&HTML5_Canvas
Was enthält der Canvas-Kontext ctx? Etwa ...
canvas:[object HTMLCanvasElement] fillStyle:#000000 font:10px sans-serif globalAlpha:1 globalCompositeOperation:source-over lineCap:butt lineJoin:miter lineWidth:1 miterLimit:10 shadowBlur:0 shadowColor:rgba(0, 0, 0, 0.0) shadowOffsetX:0 shadowOffsetY:0 strokeStyle:#000000 textAlign:start textBaseline:alphabetic
Was enthält das HTMLCanvasElement ctx.canvas? Etwa ...
ctx=accessKey: all:[object HTMLCollection] attributes:[object NamedNodeMap] baseURI: ...dat.htm childElementCount:0 childNodes:[object NodeList] children:[object HTMLCollection] classList: className: clientHeight:220 clientLeft:6 clientTop:6 clientWidth:320 contentEditable:inherit currentPage:0 currentStyle:[object CSSStyleDeclaration] dataset:[object DOMStringMap] dir: draggable:false dropzone: firstChild:[object Text] firstElementChild:null height:200 hidden:false id:POLYGON_FLAECHE innerHTML:Browser kann kein Canvas innerText:Browser kann kein Canvas isContentEditable:false itemId: itemProp: itemRef: itemScope:false itemType: itemValue:null lang: lastChild:[object Text] lastElementChild:null localName:canvas namespaceURI:http://www.w3.org/1999/xhtml nextElementSibling:[object HTMLScriptElement] nextSibling:[object Text] nodeName:CANVAS nodeType:1 nodeValue:null offsetHeight:232 offsetLeft:14 offsetParent:[object HTMLBodyElement] offsetTop:2535 offsetWidth:332 outerHTML:<canvas id="MYID" width="300" height="200" style="...">Browser braucht Canvas</canvas> outerText:Browser kann kein Canvas ownerDocument:[object HTMLDocument] pageCount:1 parentElement:[object HTMLElement] parentNode:[object HTMLElement] prefix:null previousElementSibling:[object HTMLParagraphElement] previousSibling:[object Text] properties:[object HTMLPropertiesCollection] scrollHeight:232 scrollLeft:0 scrollTop:0 scrollWidth:332 spellcheck:true style:[object CSSStyleDeclaration] tabIndex:-1 tagName:CANVAS textContent:Browser kann kein Canvas title: unselectable: width:300 onscroll:null onfocusin:null onfocusout:null onclick:null onmousedown:null onmouseup:null onmouseover:null onmouseenter:null onmousemove:null onmouseout:null onmouseleave:null onmousewheel:null onkeypress:null onkeydown:null onkeyup:null onload:null onunload:null onabort:null onerror:null onfocus:null onblur:null ondblclick:null oncontextmenu:null oninvalid:null onloadstart:null onprogress:null onsuspend:null onstalled:null onloadend:null ontimeout:null onemptied:null onplay:null onpause:null onloadedmetadata:null onloadeddata:null onwaiting:null onplaying:null onseeking:null onseeked:null ontimeupdate:null onended:null oncanplay:null oncanplaythrough:null onratechange:null ondurationchange:null onvolumechange:null oncuechange:null onfullscreenerror:null onfullscreenchange:null onpagechange:null ondragstart:null ondrag:null ondragenter:null ondragleave:null ondragover:null ondrop:null ondragend:null oncopy:null oncut:null onpaste:null ontextinput:null
Hinweise in der Veranstaltung.
// Prinzip geg.: xMax, xMin, yMax, yMin, CTX, w, h;
var w = CTX.canvas.width, h = CTX.canvas.height;
dx = xMax - xMin;
dy = yMax - yMin;
für alle Punkte (x,y) berechne (i,j) {
i = (x - o.xMin)·w/dx;
j = (y - o.yMin)·h/dy;
// x = xmin + i·dx/w; falls i,j von Maus, ges. Weltpunkt x,y
// y = ymin + j·dy/h;
}
Zu den 2D-Weltkoordinaten (x,y) gehören die Bereiche xMin <= x <= xMax und yMin <= y <= yMax Reine grafische Transformationen ( Matrizen ) scheiden aus, weil in der 2D-Welt i.a. Berechnungen, wie z.B. tatsächliche Polygon-Fläche, erforderlich sind.
Welt-Viewport-Abbildung, isotrop / anisotrop, (x,y) --> (i,j)
Achtung! Anstelle des yMax-Wertes ist yMin zu verwenden und Anstelle des yMiny-Wertes ist yMax zu verwenden.
Welt-Ebene
y-Achse
|
yMax | . . . . . . . . . . . . . . . . .
| .
| .
| yMin <= y <= yMax .
| .
| xMin <= x <= xMax .
| .
| .
yMin |----------------------------------|--- x-Achse
xMin xMax
Beispiel: Zu y = sin(x) gehört
*xMin_yMin_xMax_yMax: -10 10 -2 2 anisotop
Eine Welt-Viewport-Abbildung macht aus (x, y) ein (i, j). Zu einer Welt gehört "isotrop" bzw. "anisotrop".
*iMin_jMin_iMax_jMax: 0 0 600 400
Zu den 2D-Gerätekoordinaten (i, j) gehören die Bereiche iMin <= i <= iMax und jMin <= j <= jMax
Geräte-Ebene ( Canvas)
iMin=0 iMax = cxt.canvas.width;
jMin=0 |-------------------------|------- i-Achse
| jMin <= j <= jMax .
| .
| iMin <= i <= iMax .
| .
jMax | . . . . . . . . . . .. . jMax = cxt.canvas.height;
|
|
j-Achse
Welt-Viewport-Abbildung, isotrop / anisotrop, (x,y) --> (i,j)
Achtung! Sind y-Richtung und j-Richtung entgegengesetzt, so ist
anstelle des yMax-Wertes yMin zu verwenden und
anstelle des yMin-Wertes ist yMax zu verwenden.
// Prinzip geg.: xMax, xMin, yMax, yMin, CTX, w, h;
var w = CTX.canvas.width, h = CTX.canvas.height;
dx = xMax - xMin;
dy = yMax - yMin;
für alle Punkte (x,y) berechne (i,j) {
i = (x - o.xMin)·w/dx;
j = (y - o.yMin)·h/dy;
// x = xmin + i·dx/w; falls i,j von Maus, ges. Weltpunkt x,y
// y = ymin + j·dy/h;
}
Welche Mathematik verbirgt sich in den grundlegenden 2D-Transformation? Transform-Matrix ( Hinweis: Alles ohne Gewähr! )
⎡ d -c c·f - d·e ⎤ ⎡ a c e ⎤ ⎡ 1 0 0 ⎤ ⎢ -b a b·e - a·f ⎥ ⎢ b d f ⎥ - ⎢ 0 1 0 ⎥ · (a·d-b·c)⎣ 0 0 a·d - b·c ⎦ ⎣ 0 0 1 ⎦ ⎣ 0 0 1 ⎦⎡ i ⎤ ⎡ a c e ⎤ ⎡ x ⎤ ⎢ j ⎥ = ⎢ b d f ⎥ · ⎢ y ⎥⎣ 1 ⎦ ⎣ 0 0 1 ⎦ ⎣ 1 ⎦⎡ x ⎤ -1 ⎡ d -c c·f-d·e ⎤ ⎡ i ⎤ ⎢ y ⎥ = (a·d-b·c) ⎢ -b a b·e-a·f ⎥ · ⎢ j ⎥⎣ 1 ⎦ ⎣ 0 0 a·d-b·c ⎦ ⎣ 1 ⎦Initialisierung: Koeffizenten a = 1, d = 1 sonst 0
i = x ·(imax-imin)/(xmax-xmin) + (imin·xmax-imax·xmin)/(xmax-xmin)
j = y ·(jmax-jmin)/(ymax-ymin) + (jmin·ymax-jmax·ymin)/(ymax-ymin)
imin = 0; jmin = h;
imax = w; jmax = 0;
i = x · imax/(xmax-xmin) - imax·xmin/(xmax-xmin)
j = -y · jmin/(ymax-ymin) + jmin·ymax/(ymax-ymin)
Eine interpolierende Kurve geht durch die vorgegebenen Punkten. Eine approximierende Kurve geht durch/und/oder "angenähert" zu den vorgegebenen Punkten (polynomiale Ausgleichskurven, 2D-parametrische Ausgleichskurven ( curve fit ) .. ).
Wie lauten die x(t)-, y(t) - Formeln (Paramterdarstellung) der Geraden, wenn die beiden Geraden-Punkte P1(x1,y1) und P2(x2,y2) gegeben sind?
// Gerade: x(t) = (1-t)·x1 + t·x2 // Gegebene Punkte y(t) = (1-t)·y1 + t·y2 // P1(x1,y1) und P2(x2,y2)
Für <= t < 1; 0 <= x < 1; ergeben sich Geraden-Punkte P(x,y) die zwischen P1(x1,y1) und P2(x2,y2) liegen.
Für eine Ellipse:
// Ellipse: x(t) = x0 + a·cos(2·π·t) // Ellipsen-Mittelpunkt (x0, y0) y(t) = y0 + b·sin(2·π·t) // Ellipsen-Halbachsen ( a, b )
Für 0.00 <= t < 1.00 ergeben sich Ellipsen-Punkte P(x,y) auf der Ellipse-Linie.
Für 0.50 <= t < 1.00 ergeben sich Ellipsen-Punkte P(x,y) auf der "unteren" Ellipse^n-Linie.
Mit k = 0.,1.,2.,3 ergeben sich für 0.25·k <= t < 0.25·(k+1) Ellipsen-Punkte P(x,y) auf der Ellipse im "k-ten Quadranten".
Plagiate sind out!
Viel Freude bei der Ausarbeitung!
Letzter Abgabetermine Do 12.00 Uhr