014. WebGL – GWTGL – White Triangle

앞서 OpenGL의 가장 기본적인 예제인 glClear을 GWTGL을 이용하여 구현한 예제를 살펴보았다.
이번에는 glClear을 수행한 예제를 바탕으로 흰색 삼각형을 렌더링하는 예제를 작성해 보겠다.
OpenGL ES 2.0은 고정 기능 파이프라인을 지원하지 않으므로, 화면에 무엇인가를 렌더링하기 위해서는 프로그래머가 OpenGL 여러 파이프라인 단계 중 특정 부분을 직접 작성해 주어야 한다.

(위 그림의 주황색으로 표시된, VertexShader & FragmentShader가 사용자가 직접 작성해야 하는 부분이다.)

VertexShader & FragmentShader를 작성할 때 사용하는 프로그래밍 언어를 Shading Language라고 부른다.

OpenGL ES 2.0 Shading Language(ESSL)는 OpenGL Shading Language(GLSL) 버전 1.20에 기반한다
즉, ESSL 1.0은 GLSL 1.20과 유사하다는 것이다.
ESSL에 대한 자세한 내용은 http://www.khronos.org/registry/gles/specs/2.0/GLSL_ES_Specification_1.0.17.pdf에 기술되어 있다.

package jrr.gwtgl.client; import com.google.gwt.core.client.EntryPoint; import com.google.gwt.user.client.ui.RootPanel; import com.googlecode.gwtgl.array.Float32Array; import com.googlecode.gwtgl.binding.*; @SuppressWarnings("static-access") public class GWTGL_Prac03_WhiteTriangle implements EntryPoint{ @Override public void onModuleLoad(){ final WebGLCanvas canvas= new WebGLCanvas("400px", "300px"); RootPanel.get("gwtGL").add(canvas); WebGLRenderingContext gl= canvas.getGlContext(); //#0. 기본 설정. gl.viewport(0, 0, 400, 300); gl.clearColor(0.6f, 0.7f, 0.8f, 1.0f); //#1. 버텍스 버퍼 생성. WebGLBuffer vertBuf= gl.createBuffer(); { gl.bindBuffer(gl.ARRAY_BUFFER, vertBuf); float[] vertAry= { 0.0f, 0.0f, 1.0f, 0.0f, 0.0f, 0.5f }; Float32Array fAry= Float32Array.create(vertAry); gl.bufferData(gl.ARRAY_BUFFER, fAry, gl.STATIC_DRAW); } //#2. 프로그램(GLSL) 작성. WebGLProgram program= gl.createProgram(); { WebGLShader vs= gl.createShader(gl.VERTEX_SHADER); WebGLShader fs= gl.createShader(gl.FRAGMENT_SHADER); { String vsSource= "attribute vec2 vertPos;" + "void main(){" + " gl_Position= vec4(vertPos, 0.0, 1.0);" + "}"; String fsSource= "void main(){" + " gl_FragColor= vec4(1.0, 1.0, 1.0, 1.0);" + "}"; gl.shaderSource(vs, vsSource); gl.shaderSource(fs, fsSource); gl.compileShader(vs); gl.compileShader(fs); if( !gl.getShaderParameterb(vs, gl.COMPILE_STATUS) ){ System.out.println(gl.getShaderInfoLog(vs)); } if( !gl.getShaderParameterb(fs, gl.COMPILE_STATUS) ){ System.out.println(gl.getShaderInfoLog(fs)); } } gl.attachShader(program, vs); gl.attachShader(program, fs); gl.linkProgram(program); if( !gl.getProgramParameterb(program, gl.LINK_STATUS) ){ System.out.println(gl.getProgramInfoLog(program)); } gl.deleteShader(vs); gl.deleteShader(fs); } gl.useProgram(program); int aVertPos= gl.getAttribLocation(program, "vertPos"); //#3. 렌더링 시작 gl.clear(WebGLRenderingContext.COLOR_BUFFER_BIT); gl.enableVertexAttribArray(aVertPos); gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0); gl.drawArrays(gl.TRIANGLES, 0, 3); } }