webgl Merged Mesh! Draw 10,000 Object At Mobile!

1. WebGL
입문2
ProjectBS – WebGL 소모임

2. +
Triangle 
Rect

3. var rectData = [
-.5, -.5, 0.0,
-.5, .5, 0.0,
.5, -.5, 0.0,
-.5, .5, 0.0,
.5, -.5, 0.0,
.5, .5, 0.0
]
rectBuffer.itemSize = 3
rectBuffer.numItem = 6
2개의 삼각형 정의 1

4. var rectData = [
-.5, -.5, 0.0,
-.5, .5, 0.0,
.5, -.5, 0.0,
.5, .5, 0.0
]
rectBuffer.itemSize = 3
rectBuffer.numItem = 4
2개의 삼각형 정의 2

5. Index Buffer
0
1
2
3
0,1,2, 1,2,3

6. var rectIndexData = [ 0,1,2, 1,2,3 ]
var rectIndexBuffer = gl.createBuffer()
gl.bindBuffer( gl.ELEMENT_ARRAY_BUFFER, rectIndexBuffer)
gl.bufferData(
gl.ELEMENT_ARRAY_BUFFER,
new Uint16Array(rectIndexData), gl.STATIC_DRAW
)
rectIndexBuffer.itemSize = 1
rectIndexBuffer.numItem = 6
HOW TO..

7. //gl.bindBuffer(gl.ARRAY_BUFFER, rectBuffer);
…
// gl.drawArrays(gl.TRIANGLES, 0, rectBuffer.numItem);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, rectIndexBuffer)
gl.drawElements(gl.TRIANGLES, rectIndexBuffer.numItem,
gl.UNSIGNED_SHORT, 0);
Render Update

8. http://ligo.kr/krd

9. 0,1,2,3,4,5,6..
gl.drawArrays(gl.TRIANGLE_ST
RIP)
gl.drawArrays(gl.TRIANGLES)
0,1,2,3,4,5,6..
0,1,2 1,2,3
2,3,4 4,5,6
0,1,2 3,4,5
6,7,8 9,10,11
한 붓 그리기 개별적 그리기

10. 구조체를 만들어보자
렌더링에 필요한 것은?
1. 프로그램
2. 버텍스 버퍼 (VBO : 지오메트리 정보)
3. 인덱스 버퍼 (IBO : 인덱스 정보)
4. Position
5. Rotation
6. 앞으로 필요한 어떤 것들…

11. function Mesh() {
var result = {
program : firstProgram,
vbo : rectBuffer, // ( VBO : 지오메트리 정보 )
ibo : rectIndexBuffer, // ( IBO : 인덱스 정보 )
position : new Float32Array( [ 0, 0, 0 ] ),
rotation : new Float32Array( [ 0, 0, 0 ] ),
scale : new Float32Array( [ 1, 1, 1 ] )
}
return result
}
HOW TO…

12. var children = []
function render() {
// .. 생략
var i = children.length
var tObject, tProgram, tVBO, tIBO
while (i--) {
tObject = children[i]
tProgram = tObject.program, tVBO = tObject.vbo, tIBO = tObject.ibo
gl.useProgram(tProgram),
gl.bindBuffer(gl.ARRAY_BUFFER, tVBO);
gl.enableVertexAttribArray(tProgram.aVertexPosition);
gl.vertexAttribPointer(tProgram.aVertexPosition, tVBO.itemSize, gl.FLOAT, false, 0, 0);
gl.uniform3fv(tProgram.uRotation,tObject.rotation)
gl.uniform3fv(tProgram.uPosition,tObject.position)
gl.uniform3fv(tProgram.uScale,tObject.scale)
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, tIBO)
gl.drawElements(gl.TRIANGLES, tIBO.numItem, gl.UNSIGNED_SHORT, 0);
}
}
Render Update

13. for (var i = 0; i < 1000; i++) {
var item = new Mesh()
item.position[0] = Math.random() - 0.5 // X
item.position[1] = Math.random() - 0.5 // Y
// Z는 아직 사용 못합니다!
item.scale[0] =
item.scale[1] =
item.scale[2] = Math.random()/5
children.push(item)
}
Host Code

14. Result
http://ligo.kr/k87

15. 베어링(varying) Vertex Shader에서 Fragment Shader로 전달되는 변수
Vertex
Shader Fragment Shader
시스템 적 전달
특정 연산결과 의사적 전달 특정 연산결과 반영
varying

16. 베어링(varying) Vertex Shader에서 Fragment Shader로 전달되는 변수
"uniform vec3 uColor;" +
"varying vec3 vColor;" +
.. 생략
"void main(void) {" +
" gl_Position = " +
" positionMTX(uPosition) * " +
" rotationMTX(uRotation) * " +
" vec4(aVertexPosition, 1.0);" +
“vColor = uColor;" +
"}"
Vertex Shader

17. 베어링(varying) Vertex Shader에서 Fragment Shader로 전달되는 변수
"precision mediump float;" +
"varying vec3 vColor;" + // vertex Shader와 반드시 동일하게 선언
"void main(void) {" +
" gl_FragColor = vec4(vColor, 1.0);" +
//" gl_FragColor = vec4(vColor[0], vColor[1], vColor[2], 1.0);" +
"}"
Fragment Shader

18. Result
http://ligo.kr/eqy

19. DrawCall
활성화된 Buffer를 그리는 명령
프레임당 1000번 정도가 한계!
DrawCall 줄이자!

20. DrawCall 감소의 결과
1000개(1000콜)  12만개(1콜)
모바일 (1만개이상)
http://ligo.kr/gn3

21. 모든 물체는 삼각형의 조합
하나의 버퍼에
삼각형 조합을 모두 입력!

22. 1. 모든 정보를 1개의 버퍼에 입력하는 방법
2. 유동 버퍼와 고정 버퍼를 나눠서 입력하는 방법
3. 유동버퍼를 세분화 하는 방법
HOW TO…
Local Vertex
position
Position,
Color,
Rotation,
..
.
Local Vertex position
Position,
Color,
Rotation,
..
.
Local Vertex position
Position
Rotation
Etc….

23. Think - 모든 정보를 1개의 버퍼에 입력하는 방법
1개의 정점정보 관리만 잘하면 된다
정점 1개의 변화에 대한 성능적 손실이 크다.
maxVertexAttri 제한 (정점별 정보입력수)
장
단
gl.getParameter(gl.MAX_VERTEX_ATTRIBS)
1개의 정점 구성
Local Vertex position
Position,
Color,
Rotation,
..
.

24. Think - 유동 버퍼와 고정 버퍼를 나눠서 입력하는 방법
정점 1개의 변화에 대한 손실이 적다.
maxVertexAttri 제한을 피할 수 있다.
관리 복잡성이 증가.
장
단
1개의 정점 구성
Local Vertex position
Position,
Color,
Rotation,
...
고정버퍼 유동버
퍼
CPU 연산비용 소비

25. Think - 유동버퍼를 세분화 하는 방법
정점 1개의 변화에 대한 손실이 적다.
maxVertexAttri 제한을 피할 수 있다.
관리 복잡성이 더더더더더 증가.
장
단
1개의 정점 구성
Local Vertex position
Position
Rotation
Etc….
CPU 연산비용 개별적 소비

26. HOW TO... 생성된 메쉬 정보를 병합한다!
고정 Buffer
var rectData = [
-.5, -.5, 0.0,
-.5, .5, 0.0,
.5, -.5, 0.0,
.5, .5, 0.0
]
var rectData = [
-.5, -.5, 0.0,
-.5, .5, 0.0,
.5, -.5, 0.0,
.5, .5, 0.0
]
var rectData = [
-.5, -.5, 0.0,
-.5, .5, 0.0,
.5, -.5, 0.0,
.5, .5, 0.0
]+ +
var mergedData = [
…………
]

27. HOW TO... 생성된 메쉬 정보를 병합한다!
function mergeMesh($list) {
var item, i, len = $list.length, tempVBO = [], tempIBO = []
for (i = 0; i < len; i++) {
item = $list[i]
tempVBO.push(rectData[0], rectData[1], rectData[2])
tempVBO.push(rectData[3], rectData[4], rectData[5])
tempVBO.push(rectData[6], rectData[7], rectData[8])
tempVBO.push(rectData[9], rectData[10], rectData[11])
tempIBO.push(
i * 4 + 0, i * 4 + 1, i * 4 + 2, // 사각형의 첫번째 삼각형
I * 4 + 1, I * 4 + 2, I * 4 + 3 // 사각형의 두번째 삼각형
)
}
}
Vertex 1
Vertex 2
Vertex 3
Vertex 4

28. HOW TO... 생성된 메쉬 정보를 병합한다!
function mergeMesh($list) {varitem, i, len = $list.length, tempVBO = [], tempIBO = []
for (i = 0; i < len; i++){
item = $list[i]
tempVBO.push(rectData[0], rectData[1], rectData[2])
tempVBO.push(rectData[3], rectData[4], rectData[5])
tempVBO.push(rectData[6], rectData[7], rectData[8])
tempVBO.push(rectData[9], rectData[10], rectData[11])
tempIBO.push(
i * 4 + 0, i * 4 + 1, i * 4 + 2, // 사각형의 첫번째 삼각형
I * 4 + 1, I * 4 + 2, I * 4 + 3 // 사각형의 두번째 삼각형
)
}
var vboBuffer = gl.createBuffer()
gl.bindBuffer(gl.ARRAY_BUFFER, vboBuffer)
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(tempVBO), gl.STATIC_DRAW)
vboBuffer.itemSize = 3, vboBuffer.numItem = 4 * len
var indexBuffer = gl.createBuffer()
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer)
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(tempIBO), gl.STATIC_DRAW)
indexBuffer.itemSize = 1, indexBuffer.numItem = 6 * len
}

29. HOW TO... 생성된 메쉬 정보를 병합한다!
유동 Property Buffer
하나의 지오메트리를 구성하는 버텍스는
모두 같은 Property를 가진다.
var mesh = {
position : [ 0, 0, 0 ],
rotation : [ 0, 0, 0 ].
scale : [ 1, 1, 1 ]
}
Geometry
mesh.position
mesh.position
mesh.position

30. HOW TO... 생성된 메쉬 정보를 병합한다!
유동 Property Buffer
function mergeMesh($list) {
.. 생략
tempPositionBO.push(item.position[0], item.position[1], 0)
tempPositionBO.push(item.position[0], item.position[1], 0)
tempPositionBO.push(item.position[0], item.position[1], 0)
tempPositionBO.push(item.position[0], item.position[1], 0)
}
var positionBuffer = gl.createBuffer()
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer)
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(tempPositionBO), gl.DYNAMIC_DRAW)
positionBuffer.itemSize = 3
positionBuffer.numItem = 4 * len

31. HOW TO... 생성된 메쉬 정보를 병합한다!
메쉬 병합 결과
var result = {}
result.vbo = vboBuffer
result.ibo = indexBuffer
result.rotationBo = rotationBuffer
result.positionBo = positionBuffer
result.scaleBo = scaleBuffer
result.colorBo = colorBuffer
고정 버퍼
유동버퍼
반 고정 버퍼

32. Shader Update
유니폼 기반에서 버퍼 기반으로 변경
"attribute vec3 aVertexPosition;" +
"attribute vec3 aRotation;" +
"attribute vec3 aPosition;" +
"attribute vec3 aScale;" +
"attribute vec3 aColor;" +
"varying vec3 vColor;" +
"attribute vec3 aVertexPosition;" +
"uniform vec3 uRotation;" +
"uniform vec3 uPosition;" +
"uniform vec3 uScale;" +
"uniform vec3 uColor;" +
"varying vec3 vColor;" +

33. Shader Update
유니폼 기반에서 버퍼 기반으로 변경
"void main(void) {" +
" gl_Position = " +
" positionMTX(aPosition) * " +
"rotationMTX(aRotation) * " +
"scaleMTX(aScale) * " +
"vec4(aVertexPosition, 1.0);" +
'vColor = aColor;' +
"}"
"void main(void) {" +
" gl_Position = " +
"positionMTX(uPosition) * " +
"rotationMTX(uRotation) * " +
"scaleMTX(uScale) * " +
"vec4(aVertexPosition, 1.0);" +
"vColor = uColor;" +
"}"

34. Program Location Update
유니폼 기반에서 버퍼 기반으로 변경
colorProgram.aVertexPosition = gl.getAttribLocation(colorProgram, "aVertexPosition");
colorProgram.aRotation = gl.getAttribLocation(colorProgram, "aRotation");
colorProgram.aPosition = gl.getAttribLocation(colorProgram, "aPosition");
colorProgram.aScale = gl.getAttribLocation(colorProgram, "aScale");
colorProgram.aColor = gl.getAttribLocation(colorProgram, "aColor");

35. Render Update
gl.useProgram(tProgram)
gl.bindBuffer(gl.ARRAY_BUFFER, tObject.vbo);
gl.vertexAttribPointer(tProgram.aVertexPosition, tObject.vbo.itemSize, gl.FLOAT, false, 0, 0);
gl.bindBuffer(gl.ARRAY_BUFFER, tObject.rotationBo);
gl.vertexAttribPointer(tProgram.aRotation, tObject.rotationBo.itemSize, gl.FLOAT, false, 0, 0);
gl.bindBuffer(gl.ARRAY_BUFFER, tObject.positionBo);
gl.vertexAttribPointer(tProgram.aPosition, tObject.positionBo.itemSize, gl.FLOAT, false, 0, 0);
gl.bindBuffer(gl.ARRAY_BUFFER, tObject.scaleBo);
gl.vertexAttribPointer(tProgram.aScale, tObject.scaleBo.itemSize, gl.FLOAT, false, 0, 0);
gl.bindBuffer(gl.ARRAY_BUFFER, tObject.colorBo);
gl.vertexAttribPointer(tProgram.aColor, tObject.colorBo.itemSize, gl.FLOAT, false, 0, 0);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, tIBO)
gl.drawElements(gl.TRIANGLES, tIBO.numItem, gl.UNSIGNED_SHORT, 0);

36. Render Update – 유동 버퍼 데이터 갱신
gl.bindBuffer(gl.ARRAY_BUFFER, tObject.rotationBo)
var temp= tObject.rotationBo.data
for (var k = 0, len = temp.length / 12; k < len; k++) {
var gap = 0.01
var start = k * 12
temp[start] += gap, temp[start + 1] += gap, temp[start + 2] += gap
temp[start + 3] += gap, temp[start + 4] += gap, temp[start + 5] += gap
temp[start + 6] += gap, temp[start + 7] += gap, temp[start + 8] += gap
temp[start + 9] += gap, temp[start + 10] += gap, temp[start + 11] += gap
}
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(temp), gl.DYNAMIC_DRAW)

37. Result
http://ligo.kr/hx9

38. 음 정말로 12만개가 그려지는가!!!!
gl.drawElements(gl.TRIANGLES, tIBO.numItem, gl.UNSIGNED_SHORT, 0)
gl.UNSIGNED_SHORT – 0~ 65,535
그런데 범위 이상 그려지는 것 같다 -_-? 느낌….
연구대상...
그려지지 않는다면 65k 수준에서 2콜로 분기하는 걸 연구 해야함……..

39. 세번째 시간에는..
엔진화를 하려면 뭘 해야 하나…
1. webGL 초기화
2. 버텍스 버퍼 제너레이터/매니저
3. 인덱스 버퍼 제너레이터/매니저
4. Mesh 객체 생성
5. Child 관리
6. 객체별 렌더러
7. 병합메쉬 렌더러
유니폼 배열을 이용해 보자!
또 다른 무언가......

40. End
www.Bswebgl.com – 런치프로젝트 webGL
https://github.com/projectBS/webGL
https://www.facebook.com/groups/bs5js/