Web Grafik Technologien

620 views

Published on

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.

Published in: Technology, Health & Medicine
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
620
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Web Grafik Technologien

    1. 1. Web GrafikTechnologienToni Kaufmann<canvas>CANVAS SVG WEBGLn3xd software studios ag
    2. 2. { bool session = !code_free;}
    3. 3. Code Beispiele sind vereinfacht und nicht komplett
    4. 4. <canvas>
    5. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 21. contex t strokeStyle ctx.strokeStyle = “rgba(0,0,255,1)”;
    22. 22. contex t strokeStyle lineWidth ctx.strokeStyle = “rgba(0,0,255,1)”; ctx.lineWidth = 2.5;
    23. 23. contex t strokeStyle lineWidth lineCap ctx.strokeStyle = “rgba(0,0,255,1)”; ctx.lineWidth = 2.5; ctx.lineCap = “round”;
    24. 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. 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. 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. 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. 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. 29. mehr... Bezier
    30. 30. mehr... Bezier Rectangle
    31. 31. mehr... Bezier Rectangle Path
    32. 32. mehr... Bezier Rectangle Path Gradient
    33. 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. 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. 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. 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. 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. 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. 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. 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);10 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. 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);10 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. 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. 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. 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. 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. 46. ompositionen source-over source-in source-out source-atop lighter xor destination-over destination-in destination-out destination-atop darker copy
    47. 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. 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. 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. 50. www.n3xd.com
    51. 51. <svg>
    52. 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. 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. 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. 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. 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. 57. rafik primitiven Line
    58. 58. rafik primitiven Line Rectangle
    59. 59. rafik primitiven Line Rectangle Circle
    60. 60. rafik primitiven Line Rectangle Circle Ellipse
    61. 61. rafik primitiven Line Rectangle Circle Ellipse Poligon
    62. 62. rafik primitiven Line Rectangle Circle Ellipse Poligon Polyline
    63. 63. rafik primitiven Line Rectangle Circle Ellipse Poligon Polyline Path
    64. 64. rafik primitiven Line Rectangle Circle Ellipse Poligon Polyline Path Text
    65. 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. 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. 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. 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. 69. editoren Inkscape
    70. 70. editoren Inkscape Illustrator
    71. 71. ewegte bilder
    72. 72. ewegte bilder
    73. 73. ewegte bilder
    74. 74. {webgl }
    75. 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. 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. 77. pipeline
    78. 78. pipeline Motherboard
    79. 79. pipeline Motherboard Grafikkarte
    80. 80. pipeline Motherboard Grafikkarte Monitor
    81. 81. opengl api Motherboar dMonitor OpenGL/DirectXGrafikkarte API
    82. 82. 2560x1440≈3.7mio pxMonitorGrafikkarte
    83. 83. texturen OpenGL pro Szene
    84. 84. modell OpenGL pro Frame
    85. 85. ertex=punkt Vertex Shader pro Vertex
    86. 86. ragment=pixel Fragment Shader pro Fragment (Pixel)
    87. 87. a lot to do! Modell Vertex Shader Fragement WebGL Code
    88. 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. 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. 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. 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. 92. www.n3xd.com
    93. 93. www.zygotebody.co m
    94. 94. ow level api1990
    95. 95. ibliotheken1995
    96. 96. tools2000
    97. 97. ow level again 2010
    98. 98. √ ~ √√ √ ~ ~ √ √
    99. 99. ≥3.2 ≥2.0 ≥4 ≥9 IE8: excanvas.js≥5.0 ≥4.0 ≥10 ≥9≥5.1 Nein ≥4.0 ≥9Config (IEWebGL)
    100. 100. Toni Kaufmann | El. Ing. HTL | dipl. Inf. Ing. ETHtonik@n3xd.com | www.n3xd.com

    ×