Upload
naver-d2
View
3.962
Download
1
Embed Size (px)
DESCRIPTION
Citation preview
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����������� ������������������
http://www.webkit.org/blog/138/css-animation/
http://www.w3.org/TR/css3-transitions����������� ������������������
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>
http://www.w3.org/TR/css3-3d-transforms/
http://desandro.github.com/3dtransforms/
x����������� ������������������
y����������� ������������������
z����������� ������������������
http://www.webkit.org/blog/386/3d-transforms/
http://gamedev.stackexchange.com/questions/19703/drawing-a-textured-triangle-with-cpu-instead-of-gpu����������� ������������������
A����������� ������������������
B����������� ������������������
C����������� ������������������
http://www.imgtec.com/powervr/insider/powervr-sdk-docs.asp����������� ������������������
http://www.imgtec.com/powervr/insider/powervr-sdk-docs.asp����������� ������������������
http://blogs.msdn.com/b/ie/archive/2010/09/10/the-architecture-of-full-hardware-acceleration-of-all-web-page-content.aspx����������� ������������������
http://ariya.ofilabs.com/2011/07/fluid-animation-with-accelerated-composition.html����������� ������������������
http://www.sencha.com/blog/understanding-hardware-acceleration-on-mobile-browsers/����������� ������������������
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; } }
https://bugs.webkit.org/show_bug.cgi?id=92492
transform,����������� ������������������ color����������� ������������������
visibility:����������� ������������������ hidden����������� ������������������
display:����������� ������������������ none����������� ������������������
fade-out����������� ������������������
fade-in����������� ������������������
http://www.valvesoftware.com/publications/2008/GDC2008_PostProcessingInTheOrangeBox.
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)����������� ������������������
http://www.adobe.com/devnet/html5/articles/css-shaders.html
http://xplsv.com/prods/demos/xplsv_orsotheysay/����������� ������������������
http://www.hongkiat.com/blog/48-excellent-html5-demos/����������� ������������������
// 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
http://blog.mecheye.net/2012/06/the-linux-graphics-stack
/
http://http.developer.nvidia.com/GPUGems3/gpugems3_ch25.ht
ml