31

[A5]deview 2012 pt hds webkit_gpu

Embed Size (px)

DESCRIPTION

 

Citation preview

Page 1: [A5]deview 2012 pt hds webkit_gpu
Page 2: [A5]deview 2012 pt hds webkit_gpu

CSS3����������� ������������������  Animation����������� ������������������  소개����������� ������������������  

GPU가����������� ������������������  어떻게����������� ������������������  CSS3����������� ������������������  Animation을����������� ������������������  가속하

나?����������� ������������������  

CSS3����������� ������������������  Animation의����������� ������������������  성능����������� ������������������  향상����������� ������������������  팁����������� ������������������  

CSS3����������� ������������������   ����������� ������������������  소개����������� ������������������  

CSS3����������� ������������������   ����������� ������������������  가����������� ������������������  개발된����������� ������������������  배경����������� ������������������  

HTML5����������� ������������������  Canvas����������� ������������������  소개����������� ������������������  

GPU가����������� ������������������  Canvas를����������� ������������������  그리는����������� ������������������  방법����������� ������������������  

Page 3: [A5]deview 2012 pt hds webkit_gpu
Page 4: [A5]deview 2012 pt hds webkit_gpu

http://trac.webkit.org/wiki/Applications%20using%20WebKit

Page 5: [A5]deview 2012 pt hds webkit_gpu

http://www.satine.org/research/webkit/snowleopard/snowstack.html����������� ������������������  

Page 6: [A5]deview 2012 pt hds webkit_gpu

http://www.webkit.org/blog/138/css-animation/

http://www.w3.org/TR/css3-transitions����������� ������������������  

Page 7: [A5]deview 2012 pt hds webkit_gpu

http://www.dorothybrowser.com/test/webkitTest/css3/animation.html

http://www.w3.org/TR/css3-animations/����������� ������������������  

http://www.webkit.org/blog/324/css-animation-2/����������� ������������������  

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); } }����������� ������������������  

<h1>Bouncing<div><h1>Bouncing2<div><h1>Bouncing3</h1></div></h1></div></h1>

Page 8: [A5]deview 2012 pt hds webkit_gpu

http://www.w3.org/TR/css3-3d-transforms/

http://desandro.github.com/3dtransforms/

x����������� ������������������  

y����������� ������������������  

z����������� ������������������  

http://www.webkit.org/blog/386/3d-transforms/

Page 9: [A5]deview 2012 pt hds webkit_gpu

http://gamedev.stackexchange.com/questions/19703/drawing-a-textured-triangle-with-cpu-instead-of-gpu����������� ������������������  

A����������� ������������������  

B����������� ������������������  

C����������� ������������������  

Page 10: [A5]deview 2012 pt hds webkit_gpu

http://www.imgtec.com/powervr/insider/powervr-sdk-docs.asp����������� ������������������  

Page 11: [A5]deview 2012 pt hds webkit_gpu

http://www.imgtec.com/powervr/insider/powervr-sdk-docs.asp����������� ������������������  

Page 12: [A5]deview 2012 pt hds webkit_gpu

http://blogs.msdn.com/b/ie/archive/2010/09/10/the-architecture-of-full-hardware-acceleration-of-all-web-page-content.aspx����������� ������������������  

Page 13: [A5]deview 2012 pt hds webkit_gpu

http://ariya.ofilabs.com/2011/07/fluid-animation-with-accelerated-composition.html����������� ������������������  

http://www.sencha.com/blog/understanding-hardware-acceleration-on-mobile-browsers/����������� ������������������  

Page 14: [A5]deview 2012 pt hds webkit_gpu
Page 15: [A5]deview 2012 pt hds webkit_gpu
Page 16: [A5]deview 2012 pt hds webkit_gpu

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����������� ������������������  

@-webkit-keyframes "move1" { from { left: 0px; } to { left: 200px; } }

Page 17: [A5]deview 2012 pt hds webkit_gpu

https://bugs.webkit.org/show_bug.cgi?id=92492

transform,����������� ������������������  color����������� ������������������  

visibility:����������� ������������������  hidden����������� ������������������  

display:����������� ������������������  none����������� ������������������  

fade-out����������� ������������������  

fade-in����������� ������������������  

Page 18: [A5]deview 2012 pt hds webkit_gpu
Page 19: [A5]deview 2012 pt hds webkit_gpu
Page 20: [A5]deview 2012 pt hds webkit_gpu

http://www.valvesoftware.com/publications/2008/GDC2008_PostProcessingInTheOrangeBox.

pdf

Page 21: [A5]deview 2012 pt hds webkit_gpu

http://net.tutsplus.com/tutorials/html-css-techniques/say-hello-to-css3-filt

ers/http://www.html5rocks.com/en/tutorials/filters/understanding-css/

img  {            -­‐webkit-­‐filter:  sepia(100%);    }  ����������� ������������������  

img  {          -­‐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);  }    }  ����������� ������������������  

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)����������� ������������������  

Page 22: [A5]deview 2012 pt hds webkit_gpu

http://www.adobe.com/devnet/html5/articles/css-shaders.html

Page 23: [A5]deview 2012 pt hds webkit_gpu

http://xplsv.com/prods/demos/xplsv_orsotheysay/����������� ������������������  

Page 24: [A5]deview 2012 pt hds webkit_gpu

http://www.hongkiat.com/blog/48-excellent-html5-demos/����������� ������������������  

Page 25: [A5]deview 2012 pt hds webkit_gpu

 //  Draw  black  rect    ctx.fillRect(50,  20,  145,  145);  ����������� ������������������  ����������� ������������������  //  Draw  blue  rect    ctx.fillStyle  =  "rgb(0,  162,  232)";    ctx.fillRect(135,  85,  125,  125);  ����������� ������������������  ����������� ������������������  //  Increase  line  width    ctx.lineWidth  =  5;  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  //  Draw  black  rect  outline    ctx.strokeStyle  =  "rgb(0,  0,  0)";    ctx.strokeRect(50,  335,  145,  145);  ����������� ������������������  ����������� ������������������  //  Draw  blue  rect  outline    ctx.strokeStyle  =  "rgb(0,  162,  232)";    ctx.strokeRect(135,  275,  125,  125);  ����������� ������������������  ����������� ������������������  //  Draw  transparent  yellow  rect    ctx.fillStyle  =  "rgba(255,  255,  0,  0.75)";    ctx.fillRect(210,  180,  125,  125);����������� ������������������  

http://ie.microsoft.com/testdrive/Graphics/CanvasPad/Default.html

Page 26: [A5]deview 2012 pt hds webkit_gpu
Page 27: [A5]deview 2012 pt hds webkit_gpu

http://blog.mecheye.net/2012/06/the-linux-graphics-stack

/

http://http.developer.nvidia.com/GPUGems3/gpugems3_ch25.ht

ml

Page 28: [A5]deview 2012 pt hds webkit_gpu
Page 29: [A5]deview 2012 pt hds webkit_gpu
Page 30: [A5]deview 2012 pt hds webkit_gpu
Page 31: [A5]deview 2012 pt hds webkit_gpu