CSS3
 Animation
 소개
 GPU가
 어떻게
 CSS3
 Animation을
 가속하나?
 CSS3
 Animation의
 성능
 향상
 팁
 CSS3
 
 소개
 CSS3
 
 가
 개발된
 배경
 HTML5
 Canvas
 소개
 GPU가
 Canvas를
 그리는
 방법
 
http://trac.webkit.org/wiki/Applications%20using%20WebKit
http://www.satine.org/research/webkit/snowleopard/snowstack.html
Upcoming SlideShare
Loading in …5
×

[A5]deview 2012 pt hds webkit_gpu

5,224 views

Published on

Published in: Technology, Business
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
5,224
On SlideShare
0
From Embeds
0
Number of Embeds
3,468
Actions
Shares
0
Downloads
89
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

[A5]deview 2012 pt hds webkit_gpu

  1. 1. CSS3
  2. 2.  Animation
  3. 3.  소개
  4. 4.  GPU가
  5. 5.  어떻게
  6. 6.  CSS3
  7. 7.  Animation을
  8. 8.  가속하나?
  9. 9.  CSS3
  10. 10.  Animation의
  11. 11.  성능
  12. 12.  향상
  13. 13.  팁
  14. 14.  CSS3
  15. 15.  
  16. 16.  소개
  17. 17.  CSS3
  18. 18.  
  19. 19.  가
  20. 20.  개발된
  21. 21.  배경
  22. 22.  HTML5
  23. 23.  Canvas
  24. 24.  소개
  25. 25.  GPU가
  26. 26.  Canvas를
  27. 27.  그리는
  28. 28.  방법
  29. 29.  
  30. 30. http://trac.webkit.org/wiki/Applications%20using%20WebKit
  31. 31. http://www.satine.org/research/webkit/snowleopard/snowstack.html
  32. 32.  
  33. 33. http://www.webkit.org/blog/138/css-animation/http://www.w3.org/TR/css3-transitions
  34. 34.  
  35. 35. http://www.dorothybrowser.com/test/webkitTest/css3/animation.html h1 { position: absolute; color: red; left: 10px; top: 200px; -webkit-animation: bounce 1s infinite ; } @-webkit-keyframes bounce { 0% { -webkit-transform: translate3d(0, 0px,0); -webkit-animation-timing-function: ease-out; } 50% { -webkit-transform: translate3d(0,-150px,0); -webkit-animation-timing-function: ease-in; } 100% { -webkit-transform: translate3d(0, 0px,0); } }
  36. 36.   h1Bouncingdivh1Bouncing2divh1Bouncing3/h1/div/h1/div/h1http://www.webkit.org/blog/324/css-animation-2/
  37. 37.  http://www.w3.org/TR/css3-animations/
  38. 38.  
  39. 39. x
  40. 40.   z
  41. 41.   y
  42. 42.  http://www.w3.org/TR/css3-3d-transforms/http://desandro.github.com/3dtransforms/http://www.webkit.org/blog/386/3d-transforms/
  43. 43. C
  44. 44.   A
  45. 45.   B
  46. 46.  http://gamedev.stackexchange.com/questions/19703/drawing-a-textured-triangle-with-cpu-instead-of-gpu
  47. 47.  
  48. 48. http://www.imgtec.com/powervr/insider/powervr-sdk-docs.asp
  49. 49.  
  50. 50. http://www.imgtec.com/powervr/insider/powervr-sdk-docs.asp
  51. 51.  
  52. 52. http://blogs.msdn.com/b/ie/archive/2010/09/10/the-architecture-of-full-hardware-acceleration-of-all-web-page-content.aspx
  53. 53.  
  54. 54. http://ariya.ofilabs.com/2011/07/fluid-animation-with-accelerated-composition.html
  55. 55.  http://www.sencha.com/blog/understanding-hardware-acceleration-on-mobile-browsers/
  56. 56.  
  57. 57. http://www.dorothybrowser.com/test/webkitTest/css3/animation-direction-normal.html @-webkit-keyframes move1 { from { -webkit-transform: translateX(0px); } to { -webkit-transform: translateX(200px); } }http://www.dorothybrowser.com/test/webkitTest/css3/animation-direction-normal-nonaccelerated.html
  58. 58.   @-webkit-keyframes move1 { from { left: 0px; } to { left: 200px; } }
  59. 59. transform,
  60. 60.  color
  61. 61.   visibility:
  62. 62.  hidden
  63. 63.  https://bugs.webkit.org/show_bug.cgi?id=92492 display:
  64. 64.  none
  65. 65.   fade-out
  66. 66.   fade-in
  67. 67.  
  68. 68. http://www.valvesoftware.com/publications/2008/GDC2008_PostProcessingInTheOrangeBox. pdf
  69. 69. img  {            -­‐webkit-­‐filter:  sepia(100%);     img  {     }  
  70. 70.        -­‐webkit-­‐animation:  adjustHue  1s  alternate  infinite;     }     @-­‐webkit-­‐keyframes  adjustHue  {          0%  {  -­‐webkit-­‐filter:  hue-­‐rotate(30deg);  }          50%  {  -­‐webkit-­‐filter:  hue-­‐rotate(60deg);  }          100%  {  -­‐webkit-­‐filter:  hue-­‐rotate(90deg);  }     }  
  71. 71.   1.  blur(5,  5)   2.  drop-­‐shadow(10,  5,  5)   3.  hue-­‐rotate(328deg)   4.  saturate(5)   5.  invert(1)   6.  grayscale(1)   7.  opacity(0.5)   8.  gamma(1.1,  3.6,  0)   9.  sepia(0.5)
  72. 72.  http://net.tutsplus.com/tutorials/html-css-techniques/say-hello-to-css3-filthttp://www.html5rocks.com/en/tutorials/filters/understanding-css/ ers/
  73. 73. http://www.adobe.com/devnet/html5/articles/css-shaders.html
  74. 74. http://xplsv.com/prods/demos/xplsv_orsotheysay/
  75. 75.  
  76. 76. http://www.hongkiat.com/blog/48-excellent-html5-demos/
  77. 77.  
  78. 78.  //  Draw  black  rect    ctx.fillRect(50,  20,  145,  145);  
  79. 79.  
  80. 80.  //  Draw  blue  rect    ctx.fillStyle  =  rgb(0,  162,  232);    ctx.fillRect(135,  85,  125,  125);  
  81. 81.  
  82. 82.  //  Increase  line  width    ctx.lineWidth  =  5;  
  83. 83.  
  84. 84.  
  85. 85.  
  86. 86.  //  Draw  black  rect  outline    ctx.strokeStyle  =  rgb(0,  0,  0);    ctx.strokeRect(50,  335,  145,  145);  
  87. 87.  
  88. 88.  //  Draw  blue  rect  outline    ctx.strokeStyle  =  rgb(0,  162,  232);    ctx.strokeRect(135,  275,  125,  125);  
  89. 89.  
  90. 90.  //  Draw  transparent  yellow  rect    ctx.fillStyle  =  rgba(255,  255,  0,  0.75);    ctx.fillRect(210,  180,  125,  125);
  91. 91.  http://ie.microsoft.com/testdrive/Graphics/CanvasPad/Default.html
  92. 92. http://http.developer.nvidia.com/GPUGems3/gpugems3_ch25.ht mlhttp://blog.mecheye.net/2012/06/the-linux-graphics-stack /

×