Canvas, SVG und WebGL sind die drei Grafik-Technologien von HTML-5. Damit können Grafiken angezeigt, manipuliert und generiert werden. Dieser Vortrag ist eine Einführung in diese drei neuen Browser-Technologien.

1. Web Grafik
Technologien
Toni Kaufmann
<canvas>
CANVAS SVG WEBGL
n3xd software studios ag

2. {
bool session = !code_free;
}

3. Code Beispiele sind vereinfacht
und nicht komplett

4. <canvas
>

5. setup
0 1 2 3 4 5 6 7 8 9 <canvas id="canvas2d"
1
" width="10" height="10">
2
3
4 Your browser does not
5 support the HTML 5 Canvas
6
7
element.
8
9 </canvas>

6. setup
0 1 2 3 4 5 6 7 8 9 <canvas id="canvas2d"
1
" width="10" height="10">
2
3
4 Your browser does not
5 support the HTML 5 Canvas
6
7
element.
8
9 </canvas>

7. init
function draw() {
0 1 2 3 4 5 6 7 8 9
var cvs = document.
1
2 getElementById('canvas2d');
3
4 var ctx = cvs.getContext('2d');
5
6
7 if (ctx) {
8 ...
9 }
}

8. init
function draw() {
0 1 2 3 4 5 6 7 8 9
var cvs = document.
1
2 getElementById('canvas2d');
3
4 var ctx = cvs.getContext('2d');
5
6
7 if (ctx) {
8 ...
9 }
}

9. init
function draw() {
0 1 2 3 4 5 6 7 8 9
var cvs = document.
1
2 getElementById('canvas2d');
3
4 var ctx = cvs.getContext('2d');
5
6
7 if (ctx) {
8 ...
9 }
}

10. init
function draw() {
0 1 2 3 4 5 6 7 8 9
var cvs = document.
1
2 getElementById('canvas2d');
3
4 var ctx = cvs.getContext('2d');
5
6
7 if (ctx) {
8 ...
9 }
}

11. drawin
g
function drawLine(ctx) {
0 1 2 3 4 5 6 7 8 9
1
2 ctx.moveTo(2,1);
3
4 ctx.lineTo(8,7);
5
6
7 ctx.stroke();
8 }
9

12. drawin
g
function drawLine(ctx) {
0 1 2 3 4 5 6 7 8 9
1
2 ctx.moveTo(2,1);
3
4 ctx.lineTo(8,7);
5
6
7 ctx.stroke();
8 }
9

13. drawin
g
function drawLine(ctx) {
0 1 2 3 4 5 6 7 8 9
1
2 ctx.moveTo(2,1);
3
4 ctx.lineTo(8,7);
5
6
7 ctx.stroke();
8 }
9

14. drawin
g
function drawLine(ctx) {
0 1 2 3 4 5 6 7 8 9
1
2 ctx.moveTo(2,1);
3
4 ctx.lineTo(8,7);
5
6
7 ctx.stroke();
8 }
9

15. drawin
g
0 1 2 3 4 5 6 7 8 9
1 function drawQuadCircle(ctx) {
2 ctx.moveTo(2,8);
3 ctx.lineTo(2,2);
4
5
ctx.lineTo(8,2);
6 ctx.arc(2,2,6,0,PI/2,false);
7 ctx.fill();
8
}
9

16. drawin
g
0 1 2 3 4 5 6 7 8 9
1 function drawQuadCircle(ctx) {
2 ctx.moveTo(2,8);
3 ctx.lineTo(2,2);
4
5
ctx.lineTo(8,2);
6 ctx.arc(2,2,6,0,PI/2,false);
7 ctx.fill();
8
}
9

17. drawin
g
0 1 2 3 4 5 6 7 8 9
1 function drawQuadCircle(ctx) {
2 ctx.moveTo(2,8);
3 ctx.lineTo(2,2);
4
5
ctx.lineTo(8,2);
6 ctx.arc(2,2,6,0,PI/2,false);
7 ctx.fill();
8
}
9

18. drawin
g
0 1 2 3 4 5 6 7 8 9
1 function drawQuadCircle(ctx) {
2 ctx.moveTo(2,8);
3 ctx.lineTo(2,2);
4
5
ctx.lineTo(8,2);
6 ctx.arc(2,2,6,0,PI/2,false);
7 ctx.fill();
8
}
9

19. drawin
g
0 1 2 3 4 5 6 7 8 9
1 function drawQuadCircle(ctx) {
2 ctx.moveTo(2,8);
3 ctx.lineTo(2,2);
4
5
ctx.lineTo(8,2);
6 ctx.arc(2,2,6,0,PI/2,false);
7 ctx.fill();
8
}
9

20. drawin
g
0 1 2 3 4 5 6 7 8 9
1 function drawQuadCircle(ctx) {
2 ctx.moveTo(2,8);
3 ctx.lineTo(2,2);
4
5
ctx.lineTo(8,2);
6 ctx.arc(2,2,6,0,PI/2,false);
7 ctx.fill();
8
}
9

21. contex
t
strokeStyle
ctx.strokeStyle = “rgba(0,0,255,1)”;

22. contex
t
strokeStyle lineWidth
ctx.strokeStyle = “rgba(0,0,255,1)”;
ctx.lineWidth = 2.5;

23. contex
t
strokeStyle lineWidth lineCap
ctx.strokeStyle = “rgba(0,0,255,1)”;
ctx.lineWidth = 2.5;
ctx.lineCap = “round”;

24. contex
t
strokeStyle lineWidth lineCap lineJoin
ctx.strokeStyle = “rgba(0,0,255,1)”;
ctx.lineWidth = 2.5;
ctx.lineCap = “round”;
ctx.lineJoin = “bevel”;

25. text
0 1 2 3 4 5 6 7 8 9
1
2 drawHello(ctx) {
3 ctx.font = “5px Sans”;
4 ctx.fillColor = “blue”;
5
6
ctx.fillText(“HELLO”,2,2)
7 }
8
9

26. bilder
drawImage(ctx) {
0 1 2 3 4 5 6 7 8 9 var img = new Image();
1 img.src = “myimage.png”;
2
3
img.onload = function() {
4 ctx.drawImage(img,
5 4,3,6,6,
6 2,2,6,6);
7
8
}
9 }

27. bilder
drawImage(ctx) {
0 1 2 3 4 5 6 7 8 9 var img = new Image();
1 img.src = “myimage.png”;
2
3
img.onload = function() {
4 ctx.drawImage(img,
5 4,3,6,6,
6 2,2,6,6);
7
8
}
9 }

28. bilder
drawImage(ctx) {
0 1 2 3 4 5 6 7 8 9 var img = new Image();
1 img.src = “myimage.png”;
2
3
img.onload = function() {
4 ctx.drawImage(img,
5 4,3,6,6,
6 2,2,6,6);
7
8
}
9 }

29. mehr...
Bezier

30. mehr...
Bezier Rectangle

31. mehr...
Bezier Rectangle Path

32. mehr...
Bezier Rectangle Path Gradient

33. transformation
s
rotate45degreesCCW(ctx) {
0 1 2 3 4 5 6 7 8 9
1
ctx.tranform(1,0,0,1,0,0);
2 ctx.translate(2,3);
3 ctx.rotate(-PI/4);
4 ctx.translate(-2,-3);
5
6
ctx.moveTo(2,3);
7 ctx.lineTo(2,8);
8 }
9

34. transformation
s
rotate45degreesCCW(ctx) {
0 1 2 3 4 5 6 7 8 9
1
ctx.tranform(1,0,0,1,0,0);
2 ctx.translate(2,3);
3 ctx.rotate(-PI/4);
4 ctx.translate(-2,-3);
5
6
ctx.moveTo(2,3);
7 ctx.lineTo(2,8);
8 }
9

35. transformation
s
rotate45degreesCCW(ctx) {
0 1 2 3 4 5 6 7 8 9
1
ctx.tranform(1,0,0,1,0,0);
2 ctx.translate(2,3);
3 ctx.rotate(-PI/4);
4 ctx.translate(-2,-3);
5
6
ctx.moveTo(2,3);
7 ctx.lineTo(2,8);
8 }
9

36. transformation
s
rotate45degreesCCW(ctx) {
0 1 2 3 4 5 6 7 8 9
1
ctx.tranform(1,0,0,1,0,0);
2 ctx.translate(2,3);
3 ctx.rotate(-PI/4);
4 ctx.translate(-2,-3);
5
6
ctx.moveTo(2,3);
7 ctx.lineTo(2,8);
8 }
9

37. transformation
s
rotate45degreesCCW(ctx) {
0 1 2 3 4 5 6 7 8 9
1
ctx.tranform(1,0,0,1,0,0);
2 ctx.translate(2,3);
3 ctx.rotate(-PI/4);
4 ctx.translate(-2,-3);
5
6
ctx.moveTo(2,3);
7 ctx.lineTo(2,8);
8 }
9

38. transformation
s
rotate45degreesCCW(ctx) {
0 1 2 3 4 5 6 7 8 9
1
ctx.tranform(1,0,0,1,0,0);
2 ctx.translate(2,3);
3 0 1 2 3 4 5 6 7 8 9 ctx.rotate(-PI/4);
4 1 ctx.translate(-2,-3);
5 2
6 3
ctx.moveTo(2,3);
7 4 ctx.lineTo(2,8);
8 5 }
9 6
7
8
9

39. transformation
s
9
8
7
rotate45degreesCCW(ctx) {
6
5
0 1 2 3 4 5 6 7 8 9
ctx.tranform(1,0,0,1,0,0);
4
1
3
2 ctx.translate(2,3);
2
1
3 ctx.rotate(-PI/4);
0
4 ctx.translate(-2,-3);
1
2
5
ctx.moveTo(2,3);
3
6
4
ctx.lineTo(2,8);
5
7
6
8 }
7
9
8
9

40. transformation
s
9
8
7
6
rotate45degreesCCW(ctx) {
5
4
0 1 2 3 4 5 6 7 8 9
ctx.tranform(1,0,0,1,0,0);
3
1
2
2 ctx.translate(2,3);
1
0
3 ctx.rotate(-PI/4);
1
4 ctx.translate(-2,-3);
2
3
5
ctx.moveTo(2,3);
4
6
5
7 ctx.lineTo(2,8);
6
7
8 }
8
9
9

41. transformation
s
9
8
7
6
rotate45degreesCCW(ctx) {
5
4
0 1 2 3 4 5 6 7 8 9
ctx.tranform(1,0,0,1,0,0);
3
1
2
2 ctx.translate(2,3);
1
0
3 ctx.rotate(-PI/4);
1
4 ctx.translate(-2,-3);
2
3
5
ctx.moveTo(2,3);
4
6
5
7 ctx.lineTo(2,8);
6
7
8 }
8
9
9

42. ompositionen
drawComposition(ctx) {
ctx.fillStyle = ‘blue’;
ctx.rect(2,2,4,4);
0 1 2 3 4 5 6 7 8 9
1
2 ctx.globalCompositeOperation
3 = ‘source-atop’;
4
5
6 ctx.fillStyle = ‘red’;
7 ctx.beginPath();
8 ctx.arc(5,5,2,0,PI*2,true);
9
ctx.closePath();
ctx.fill();
}

43. ompositionen
drawComposition(ctx) {
ctx.fillStyle = ‘blue’;
ctx.rect(2,2,4,4);
0 1 2 3 4 5 6 7 8 9
1
2 ctx.globalCompositeOperation
3 = ‘source-atop’;
4
5
6 ctx.fillStyle = ‘red’;
7 ctx.beginPath();
8 ctx.arc(5,5,2,0,PI*2,true);
9
ctx.closePath();
ctx.fill();
}

44. ompositionen
drawComposition(ctx) {
ctx.fillStyle = ‘blue’;
ctx.rect(2,2,4,4);
0 1 2 3 4 5 6 7 8 9
1
2 ctx.globalCompositeOperation
3 = ‘source-atop’;
4
5
6 ctx.fillStyle = ‘red’;
7 ctx.beginPath();
8 ctx.arc(5,5,2,0,PI*2,true);
9
ctx.closePath();
ctx.fill();
}

45. ompositionen
drawComposition(ctx) {
ctx.fillStyle = ‘blue’;
ctx.rect(2,2,4,4);
0 1 2 3 4 5 6 7 8 9
1
2 ctx.globalCompositeOperation
3 = ‘source-atop’;
4
5
6 ctx.fillStyle = ‘red’;
7 ctx.beginPath();
8 ctx.arc(5,5,2,0,PI*2,true);
9
ctx.closePath();
ctx.fill();
}

46. ompositionen
source-over source-in source-out source-atop lighter xor
destination-over destination-in destination-out destination-atop darker copy

47. clipping
function clipping(ctx) {
ctx.beginPath();
0 1 2 3 4 5 6 7 8 9
1 ctx.moveTo(2,1);
2 ctx.lineTo(2,8);
3 ctx.lineTo(7,6);
4
5
ctx.closePath();
6 ctx.clip();
7
8 ctx.fillStyle = "blue";
9
ctx.fillRect(1,3,7,4);
}

48. clipping
function clipping(ctx) {
ctx.beginPath();
0 1 2 3 4 5 6 7 8 9
1 ctx.moveTo(2,1);
2 ctx.lineTo(2,8);
3 ctx.lineTo(7,6);
4
5
ctx.closePath();
6 ctx.clip();
7
8 ctx.fillStyle = "blue";
9
ctx.fillRect(1,3,7,4);
}

49. clipping
function clipping(ctx) {
ctx.beginPath();
0 1 2 3 4 5 6 7 8 9
1 ctx.moveTo(2,1);
2 ctx.lineTo(2,8);
3 ctx.lineTo(7,6);
4
5
ctx.closePath();
6 ctx.clip();
7
8 ctx.fillStyle = "blue";
9
ctx.fillRect(1,3,7,4);
}

50. www.n3xd.com

51. <svg>

52. deklarativ
<!DOCTYPE html>
...
<body>
100mm <svg id="svg1"
width=”100mm” height="100mm"
xmlns="w3.org/2000/svg">
<line x1="0" y1="0"
x2="100mm" y2="100mm"
style="stroke:red;
100mm stroke-width:10mm"/>
</svg>
</body>
</html>

53. deklarativ
<!DOCTYPE html>
...
<body>
100mm <svg id="svg1"
width=”100mm” height="100mm"
xmlns="w3.org/2000/svg">
<line x1="0" y1="0"
x2="100mm" y2="100mm"
style="stroke:red;
100mm stroke-width:10mm"/>
</svg>
</body>
</html>

54. deklarativ
<!DOCTYPE html>
...
<body>
100mm <svg id="svg1"
width=”100mm” height="100mm"
xmlns="w3.org/2000/svg">
<line x1="0" y1="0"
x2="100mm" y2="100mm"
style="stroke:red;
100mm stroke-width:10mm"/>
</svg>
</body>
</html>

55. deklarativ
<!DOCTYPE html>
...
<body>
100mm <svg id="svg1"
width=”100mm” height="100mm"
xmlns="w3.org/2000/svg">
<line x1="0" y1="0"
x2="100mm" y2="100mm"
style="stroke:red;
100mm stroke-width:10mm"/>
</svg>
</body>
</html>

56. deklarativ
<!DOCTYPE html>
...
<body>
100mm <svg id="svg1"
width=”100mm” height="100mm"
xmlns="w3.org/2000/svg">
<line x1="0" y1="0"
x2="100mm" y2="100mm"
style="stroke:red;
100mm stroke-width:10mm"/>
</svg>
</body>
</html>

57. rafik primitiven
Line

58. rafik primitiven
Line Rectangle

59. rafik primitiven
Line Rectangle Circle

60. rafik primitiven
Line Rectangle Circle Ellipse

61. rafik primitiven
Line Rectangle Circle Ellipse
Poligon

62. rafik primitiven
Line Rectangle Circle Ellipse
Poligon Polyline

63. rafik primitiven
Line Rectangle Circle Ellipse
Poligon Polyline Path

64. rafik primitiven
Line Rectangle Circle Ellipse
Poligon Polyline Path Text

65. dom tree
function draw() {
var line1 = document
.getElementById('line1');
line1.setAttribute("style"
,"stroke:blue
100mm
;stroke-width:20mm");
"
line1.setAttribute("x1"
,"50mm");
}
...
<line id="line1"
100mm x1="20mm" y1="20mm"
x2="100mm" y2="20mm"
style="stroke:red
;stroke-width:10mm"/>

66. dom tree
function draw() {
var line1 = document
.getElementById('line1');
line1.setAttribute("style"
,"stroke:blue
100mm
;stroke-width:20mm");
"
line1.setAttribute("x1"
,"50mm");
}
...
<line id="line1"
100mm x1="20mm" y1="20mm"
x2="100mm" y2="20mm"
style="stroke:red
;stroke-width:10mm"/>

67. dom tree
function draw() {
var line1 = document
.getElementById('line1');
line1.setAttribute("style"
,"stroke:blue
100mm
;stroke-width:20mm");
"
line1.setAttribute("x1"
,"50mm");
}
...
<line id="line1"
100mm x1="20mm" y1="20mm"
x2="100mm" y2="20mm"
style="stroke:red
;stroke-width:10mm"/>

68. dom tree
function draw() {
var line1 = document
.getElementById('line1');
line1.setAttribute("style"
,"stroke:blue
100mm
;stroke-width:20mm");
"
line1.setAttribute("x1"
,"50mm");
}
...
<line id="line1"
100mm x1="20mm" y1="20mm"
x2="100mm" y2="20mm"
style="stroke:red
;stroke-width:10mm"/>

69. editoren
Inkscape

70. editoren
Inkscape Illustrator

71. ewegte bilder

72. ewegte bilder

73. ewegte bilder

74. {webgl
}

75. anvas-context
<canvas id="canvas3d"
" width="10" height="10">
</canvas>
function draw3d() {
var cvs = document.
getElementById('canvas3d');
var ctx = cvs.getContext(
'experimental-webgl');
if (ctx) {
...
}
}

76. anvas-context
<canvas id="canvas3d"
" width="10" height="10">
</canvas>
function draw3d() {
var cvs = document.
getElementById('canvas3d');
var ctx = cvs.getContext(
'experimental-webgl');
if (ctx) {
...
}
}

77. pipeline

78. pipeline
Motherboard

79. pipeline
Motherboard Grafikkarte

80. pipeline
Motherboard Grafikkarte Monitor

81. opengl api
Motherboar
d
Monitor
OpenGL/DirectX
Grafikkarte API

82. 2560x1440≈3.7mio
px
Monitor
Grafikkarte

83. texturen
OpenGL
pro Szene

84. modell
OpenGL
pro Frame

85. ertex=punkt
Vertex
Shader
pro Vertex

86. ragment=pixel
Fragment Shader
pro Fragment (Pixel)

87. a lot to do!
Modell
Vertex Shader
Fragement
WebGL Code

88. a lot to do! cubeVertexPositionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexPositionBuffer);
vertices = [
/* Front */ -1.0,-1.0, 1.0,1.0,-1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,
/* Back*/ -1.0,-1.0,-1.0,-1.0,1.0,-1.0,1.0,1.0,-1.0,1.0,-1.0,-1.0,
/* Top */ -1.0, 1.0,-1.0,-1.0,1.0,1.0,1.0, 1.0,1.0,1.0,1.0,-1.0,
/* Bottom */-1.0,-1.0,-1.0,1.0,-1.0,-1.0,1.0,-1.0,1.0,-1.0,-1.0,1.0,
/* Right*/ 1.0,-1.0,-1.0,1.0, 1.0,-1.0,1.0,1.0,1.0,1.0,-1.0,1.0,
/* Left */ -1.0,-1.0,-1.0,-1.0,-1.0,1.0,-1.0,1.0,1.0,-1.0,1.0,-1.0,];
gl.bufferData(gl.ARRAY_BUFFER,new Float32Array(vertices),gl.STATIC_DRAW);
...
var vertexNormals = [
/* Front*/ 0.0,0.0,1.0,0.0,0.0,1.0,0.0,0.0,1.0,0.0,0.0,1.0,
/* Back */ 0.0,0.0,-1.0,0.0,0.0,-1.0,0.0,0.0,-1.0,0.0,0.0,-1.0,
/* Top */ 0.0,1.0,0.0,0.0,1.0,0.0,0.0,1.0,0.0,0.0,1.0,0.0,
/* Bottom */0.0,-1.0,0.0,0.0,-1.0,0.0,0.0,-1.0,0.0,0.0,-1.0,0.0,
Modell /* Right */ 1.0,0.0,0.0,1.0,0.0,0.0,1.0,0.0,0.0,1.0,0.0,0.0,
/* Left */ -1.0,0.0,0.0,-1.0,0.0,0.0,-1.0,0.0,0.0,-1.0,0.0,0.0];
...
var textureCoords = [
/* Front*/ 0.0, 0.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0,
/* Back */ 1.0, 0.0, 1.0, 1.0, 0.0, 1.0, 0.0, 0.0,
/* Top */ 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 1.0, 1.0,
/* Bottom */ 1.0, 1.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0,
Vertex Shader /* Right */ 1.0, 0.0, 1.0, 1.0, 0.0, 1.0, 0.0, 0.0,
/* Left */ 0.0, 0.0, 1.0, 0.0, 1.0, 1.0,0.0, 1.0];
...
var cubeVertexIndices = [
0, 1, 2, 0, 2, 3, // Front face
4, 5, 6, 4, 6, 7, // Back face
8, 9, 10, 8, 10, 11, // Top face
12, 13, 14, 12, 14, 15, // Bottom face
Fragement 16, 17, 18,
20, 21, 22,
...
16, 18, 19, // Right face
20, 22, 23 // Left face ];
myTexture = gl.createTexture();myTexture.image = new Image();
myTexture.image.onload = function () {
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
gl.bindTexture(gl.TEXTURE_2D,myTexture);
gl.texImage2D(gl.TEXTURE_2D,0,gl.RGBA,gl.RGBA,gl.UBYTE, myTexture.image);
WebGL Code gl.texParameteri(gl.TEXTURE_2D,gl.MAG_FILTER,gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D,gl.MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST);
gl.generateMipmap(gl.TEXTURE_2D);
gl.bindTexture(gl.TEXTURE_2D, null);
}
myTexture.image.src = "image.png";

89. a lot to do! <script id="shader-vs" type="x-shader/x-vertex">
attribute vec3 aVertexPosition;
attribute vec3 aVertexNormal;
attribute vec2 aTextureCoord;
uniform mat4 uMVMatrix;
uniform mat4 uPMatrix;
uniform mat3 uNMatrix;
uniform vec3 uAmbientColor;
Modell uniform vec3 uLightingDirection;
uniform vec3 uDirectionalColor;
varying vec2 vTextureCoord;
varying vec3 vLightWeighting;
void main(void) {
Vertex Shader gl_Position = uPMatrix * uMVMatrix *
vec4(aVertexPosition, 1.0);
vTextureCoord = aTextureCoord;
vec3 transformedNormal = uNMatrix * aVertexNormal;
float directionalLightWeighting =
Fragement max(dot(transformedNormal, uLightingDirection),0.0);
vLightWeighting = uAmbientColor
+ uDirectionalColor * directionalLightWeighting;
}
WebGL Code </script>

90. a lot to do!
<script id="shader-fs" type="x-shader/x-fragment">
precision mediump float;
varying vec2 vTextureCoord;
varying vec3 vLightWeighting;
uniform sampler2D uSampler;
Modell void main(void) {
vec4 textureColor = texture2D(uSampler,
vec2(vTextureCoord.s, vTextureCoord.t));
gl_FragColor = vec4(textureColor.rgb * vLightWeighting,
textureColor.a);
Vertex Shader }
</script>
Fragement
WebGL Code

91. a lot to do! // in init: shader loading, compiling, linking, installing
// also in init: uniform binding
... not listed here!
// drawing
gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
mat4.perspective(45,gl.viewportWidth/gl.viewportHeight,0.1,100.0,pMatrix);
mat4.identity(mvMatrix);
mat4.translate(mvMatrix, [0.0, 0.0, -5.0 + zOffset]);
mat4.rotate(mvMatrix, degToRad(xRot), [1, 0, 0]);
mat4.rotate(mvMatrix, degToRad(yRot), [0, 1, 0]);
mat4.rotate(mvMatrix, degToRad(zRot), [0, 0, 1]);
gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexPositionBuffer);
Modell gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute,
cubeVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexNormalBuffer);
gl.vertexAttribPointer(shaderProgram.vertexNormalAttribute,
cubeVertexNormalBuffer.itemSize, gl.FLOAT, false, 0, 0);
gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexTextureCoordBuffer);
Vertex Shader gl.vertexAttribPointer(shaderProgram.textureCoordAttribute,
cubeVertexTextureCoordBuffer.itemSize, gl.FLOAT, false, 0, 0);
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, crateTexture);
gl.uniform1i(shaderProgram.samplerUniform, 0);
gl.uniform1i(shaderProgram.useLightingUniform, lighting);
Fragement gl.uniform3f(shaderProgram.ambientColorUniform,0.2,0.2,0.2);
var lightingDirection = [xLight,-10,-10];
var adjustedLD = vec3.create();
vec3.normalize(lightingDirection, adjustedLD);
vec3.scale(adjustedLD, -1);
gl.uniform3fv(shaderProgram.lightingDirectionUniform, adjustedLD);
WebGL Code gl.uniform3f(shaderProgram.directionalColorUniform,0.8,0.8,0.8);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVertexIndexBuffer);
setMatrixUniforms();
gl.drawElements(gl.TRIANGLES,cubeVertexIndexBuffer.numItems
,gl.UNSIGNED_SHORT, 0);

92. www.n3xd.com

93. www.zygotebody.co
m

94. ow level api
1990

95. ibliotheken
1995

96. tools
2000

97. ow level again
2010

98. √ ~ √
√ √ ~
~ √ √

99. ≥3.2 ≥2.0 ≥4 ≥9
IE8: excanvas.js
≥5.0 ≥4.0 ≥10 ≥9
≥5.1 Nein
≥4.0 ≥9
Config (IEWebGL)

100. Toni Kaufmann | El. Ing. HTL | dipl. Inf. Ing. ETH
tonik@n3xd.com | www.n3xd.com