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

1. 이준호과장/ NHN Technology ServicesWebGL의무궁무진한가능성

2. •What•Now•How•Where
Contents

3. What?

4. 초고속그래픽렌더링!
웹기반GPU제어

5. While(i--){ // 픽셀처리}

6. CPU

7. GPU

8. DOM
SVG
CANVAS 2D
WEBGL
Video
Video
Video

9. GPU렌더링을통한
렌더부하분산Application Performance

13. Now

14. IE11
Safari (Mac)

15. http://www.koreahtml5.kr/jsp/infoSquare/browserUseStatsKor.jsp?type_code_LIST=USST0002&os_code=all&search_type=D&search_date=201406
85.9% +

16. How

17. 화면출력Fragment ShaderVertex ShaderData(Vertex Buffer)
WebGLAPI

18. “webgl”, “experimental-webgl”,
“webkit-3d”, “moz-webgl”
WebGL초기화
vargl= canvas.getContext(“webgl”)

19. 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));

20. 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)
}

21. Fragment Shader
Vertex Shader
Data
void main(void) {
gl_FragColor= vec4(1.0, 1.0, 1.0, 1.0);
}

22. 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

24. 추가자료-학습사이트
Beginning WebGL
http://www.beginningwebgl.comLearning WebGL
http://learningwebgl.com/blog/?page_id=1217

25. 추가자료–Framework List
Khronoshttp://www.khronos.org/webgl/wiki/User_Contributions

26. 추가자료–Framework ListbsWebGL
http://projectbs.github.io/bsWebGL/ ThreeJS
http://threejs.org/

29. Where

30. Game

31. BIG DATA 시각화

32. UI Interface

33. Q&A

34. THANK YOU