Successfully reported this slideshow.

WebGL의 무궁무진한 가능성

6

Share

1 of 35
1 of 35

WebGL의 무궁무진한 가능성

6

Share

Download to read offline

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

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

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

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

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

Related Audiobooks

Free with a 14 day trial from Scribd

See all

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

×