�ݺ�ߣ

80줄로 웹지엘
입문하기

canvas
javascript
WebGL Library
GLSL
개발환경

WEBGL
WebGL 프로그래밍을 한다는 것은?
javascript로 만들어진 데이터를 기반으로
javscript형식의 webGL API를 통해 GPU를 동작시키는것
javascript GLSL

1. Context3D 검색
2. 렌더러 준비
var gl = canvas.getContext(‘webgl’) // webgl Context 요청
gl.drawArray() // 전용 API
function render(){
gl.clearColor(Math.random(),Math.random(),Math.random(), 1)
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT)
}
setInterval(render,16)

GPU 그래픽스의 기본
삼각형을 그려서 어떠한 형상을 그려내는 것

문제는
CPU에 있는 데이터를
GPU에 어떻게 전달/실행 시킬 것인가

버퍼(Buffer)
쉐이더(��󲹻��)
프로그램(Program)
유니폼(Uniform)

Viewport
Canvas Area
-1 1
-1
1

Bs webgl소모임001 uniform버전

HOW TO..
var triangleData = [ 0.0, 1.0, 0.0, -1.0, -1.0, 0.0, 1.0, -1.0, 0.0 ]
var triangleBuffer = gl.createBuffer()
// 1.버퍼생성
gl.bindBuffer(gl.ARRAY_BUFFER,triangleBuffer)
// 2.버퍼를 GPU에 바인딩
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(triangleData),gl.STATIC_DRAW)
// 3.버퍼에 데이터를 입력
triangleBuffer.itemSize = 3
triangleBuffer.numItem = 3
// 4.생성된 버퍼를 담아둔 JS 오브젝트에 추가정보입력

쉐이더(��󲹻��)

쉐이더(��󲹻��)
Geometry
Vertex Shader

쉐이더(��󲹻��)
Fragment Shader

Vertex Shader Fragment Shader
레스터 라이즈

HOW TO..
var firstShader = gl.createShader(gl.VERTEX_SHADER)
gl.shaderSource(firstShader, 쉐이더소스)
gl.compileShader(firstShader)
컴파일을 왜 해?
GPU입장에서 넘어온 데이터는 단순 문자열!
이게 프로그램이니 컴파일을 해두라고 명령… 쉐이더

HOW TO..
var vertexShaderStr = ""+
"attribute vec3 aVertexPosition;" +
"void main(void) {" +
" gl_Position = vec4(aVertexPosition, 1.0);" +
"}“
버텍스 쉐이더의 최종 목적 : gl_Position

HOW TO..
var fragmentShaderStr = ""+
" gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);" +
"}"
프래그먼트 쉐이더의 최종 목적 : gl_FragColor

프로그램(program)
var firstProgram = gl.createProgram()
gl.attachShader(firstProgram , vertexShader)
gl.attachShader(firstProgram, fragmentShader)
gl.linkProgram(firstProgram)
firstProgram.aVertexPosition =
gl.getAttribLocation(firstProgram, "aVertexPosition");

gl.useProgram(fristProgram)
gl.bindBuffer(gl.ARRAY_BUFFER, triangleBuffer)

gl.enableVertexAttribArray(firstProgram.aVertexPosition)
gl.vertexAttribPointer(
firstProgram.aVertexPosition,
triangleBuffer.itemSize, // x,y,z
gl.FLOAT, false, 0, 0
)

gl.enableVertexAttribArray(firstProgram.aVertexPosition)
gl.vertexAttribPointer(firstProgram.aVertexPosition, triangleBuffer.itemSize, gl.FLOAT, false, 0, 0)
gl.drawArrays(gl.TRIANGLES, 0, triangleBuffer.numItem)

유니폼(uniform) Draw가 진행되는 동안 상수처럼 유지되는 변수
var vertexShaderStr = "" +
"attribute vec3 aVertexPosition;" +
"uniform vec3 uRotation;" +
"uniform vec3 uPosition;" +
…
firstProgram.uRotation = gl.getUniformLocation(firstProgram, "uRotation");
firstProgram.uPosition = gl.getUniformLocation(firstProgram, "uPosition");

" gl_Position = " +
" positionMTX(uPosition) * " +
" rotationMTX(uRotation) * " +
" vec4(aVertexPosition, 1.0);" +
"}"

var rotation = 0
var position = 0
function render() {
.. 생략
gl.vertexAttribPointer(firstProgram.aVertexPosition, triangleBuffer.itemSize, gl.FLOAT, false, 0, 0);
rotation += 0.1
position += 0.1
gl.uniform3fv(firstProgram.uRotation, [rotation, rotation, rotation])
gl.uniform3fv(firstProgram.uPosition, [Math.sin(position), Math.cos(position), 0])
gl.drawArrays(gl.TRIANGLES, 0, triangleBuffer.numItem);
}

gl.uniform3fv(firstProgram.uRotation, [rotation, rotation, rotation])
gl.uniform3fv(firstProgram.uPosition, [Math.sin(position), Math.cos(position), 0])
gl.uniform3fv(firstProgram.uRotation, [0, 0, 0])
gl.uniform3fv(firstProgram.uPosition, [0, 0, 0])

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

�ݺ�ߣ

Bs webgl소모임001 uniform버전

More Related Content

What's hot (20)

Viewers also liked (12)

Similar to Bs webgl소모임001 uniform버전 (20)

Bs webgl소모임001 uniform버전

Editor's Notes