Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
이준호과장/ NHN Technology ServicesWebGL의무궁무진한가능성
•What•Now•How•Where 
Contents
What?
초고속그래픽렌더링! 
웹기반GPU제어
While(i--){ // 픽셀처리}
CPU
GPU
DOM 
SVG 
CANVAS 2D 
WEBGL 
Video 
Video 
Video
GPU렌더링을통한 
렌더부하분산Application Performance
Now
IE11 
Safari (Mac)
http://www.koreahtml5.kr/jsp/infoSquare/browserUseStatsKor.jsp?type_code_LIST=USST0002&os_code=all&search_type=D&search_da...
How
화면출력Fragment ShaderVertex ShaderData(Vertex Buffer) 
WebGLAPI
“webgl”, “experimental-webgl”, 
“webkit-3d”, “moz-webgl” 
WebGL초기화 
vargl= canvas.getContext(“webgl”)
Fragment Shader 
Vertex Shader 
Datavarvertices= [ 0.0, 1.0, 0.0, //x,y,z1.0, -1.0, 0.0, -1.0, -1.0, 0.0 ]; 
varbuffer= gl...
Fragment Shader 
Vertex Shader 
Data 
attribute vec3 aVertexPosition; 
void main(void) { 
gl_Position = vec4(aVertexPositi...
Fragment Shader 
Vertex Shader 
Data 
void main(void) { 
gl_FragColor= vec4(1.0, 1.0, 1.0, 1.0); 
}
shader= gl.createShader(Type); gl.shaderSource(shader, ShaderStr); 
gl.compileShader(shader); 
attribute vec3 aVertexPosit...
추가자료-학습사이트 
Beginning WebGL 
http://www.beginningwebgl.comLearning WebGL 
http://learningwebgl.com/blog/?page_id=1217
추가자료–Framework List 
Khronoshttp://www.khronos.org/webgl/wiki/User_Contributions
추가자료–Framework ListbsWebGL 
http://projectbs.github.io/bsWebGL/ ThreeJS 
http://threejs.org/
Where
Game
BIG DATA 시각화
UI Interface
Q&A
THANK YOU
WebGL의 무궁무진한 가능성
WebGL의 무궁무진한 가능성
WebGL의 무궁무진한 가능성
WebGL의 무궁무진한 가능성
WebGL의 무궁무진한 가능성
WebGL의 무궁무진한 가능성
WebGL의 무궁무진한 가능성
Upcoming SlideShare
Loading in …5
×

WebGL의 무궁무진한 가능성

1,486 views

Published on

#한국 웹 20주년 국제 콘퍼런스

GPU를 활용한 고성능 그래픽 표현력을 통해 웹의 가치를 한 단계 끌어올릴 수 있는 WebGL에 대해서 소개합니다.

Published in: Technology

WebGL의 무궁무진한 가능성

  1. 1. 이준호과장/ NHN Technology ServicesWebGL의무궁무진한가능성
  2. 2. •What•Now•How•Where Contents
  3. 3. What?
  4. 4. 초고속그래픽렌더링! 웹기반GPU제어
  5. 5. While(i--){ // 픽셀처리}
  6. 6. CPU
  7. 7. GPU
  8. 8. DOM SVG CANVAS 2D WEBGL Video Video Video
  9. 9. GPU렌더링을통한 렌더부하분산Application Performance
  10. 10. Now
  11. 11. IE11 Safari (Mac)
  12. 12. http://www.koreahtml5.kr/jsp/infoSquare/browserUseStatsKor.jsp?type_code_LIST=USST0002&os_code=all&search_type=D&search_date=201406 85.9% +
  13. 13. How
  14. 14. 화면출력Fragment ShaderVertex ShaderData(Vertex Buffer) WebGLAPI
  15. 15. “webgl”, “experimental-webgl”, “webkit-3d”, “moz-webgl” WebGL초기화 vargl= canvas.getContext(“webgl”)
  16. 16. Fragment Shader Vertex Shader Datavarvertices= [ 0.0, 1.0, 0.0, //x,y,z1.0, -1.0, 0.0, -1.0, -1.0, 0.0 ]; varbuffer= gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER,buffer); gl.bufferData(gl.ARRAY_BUFFER,new Float32Array(vertices));
  17. 17. Fragment Shader Vertex Shader Data attribute vec3 aVertexPosition; void main(void) { gl_Position = vec4(aVertexPosition, 1.0); } 0 1 0 1 -1 0 …. -1 -1 0 } } } Attribute : aVertexPosition-> Vertex Shader aVertexPosition (0,1,0) } aVertexPosition (1,-1,0) } aVertexPosition (-1,-1,0) }
  18. 18. Fragment Shader Vertex Shader Data void main(void) { gl_FragColor= vec4(1.0, 1.0, 1.0, 1.0); }
  19. 19. shader= gl.createShader(Type); gl.shaderSource(shader, ShaderStr); gl.compileShader(shader); attribute vec3 aVertexPosition; void main(void) { gl_Position = vec4(aVertexPosition, 1.0); } Shader생성 gl.VERTEX_SHADER gl.FRAGMENT_SHADER
  20. 20. 추가자료-학습사이트 Beginning WebGL http://www.beginningwebgl.comLearning WebGL http://learningwebgl.com/blog/?page_id=1217
  21. 21. 추가자료–Framework List Khronoshttp://www.khronos.org/webgl/wiki/User_Contributions
  22. 22. 추가자료–Framework ListbsWebGL http://projectbs.github.io/bsWebGL/ ThreeJS http://threejs.org/
  23. 23. Where
  24. 24. Game
  25. 25. BIG DATA 시각화
  26. 26. UI Interface
  27. 27. Q&A
  28. 28. THANK YOU

×