This document discusses the possibilities of WebGL and how it can be used for 3D graphics rendering on the web. It explains that WebGL allows for GPU-accelerated rendering directly in the browser by using APIs to control graphics processing units. It provides examples of using WebGL to initialize a WebGL context, create and compile shaders, and render 3D graphics by passing vertex and color data to shaders. The document recommends learning resources and frameworks for WebGL and suggests areas where WebGL could be applied, such as games, data visualization, and user interfaces.

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