Delphi web script 갖고 놀기 2
탐구생활/Delphi어떤 물건이든지 익숙해지려면 무조건 써 봐야 만든 사람의 의도를 알 수 있다.
DWScript 로 무얼 만들어보면 좋을까 잠시 고민하다가 Learning WebGL의 첫번째 강좌를 만들어보기로 했다.
문제는 이 강좌가 벡터와 행렬 연산에 자바스크립트용 3D라이브러리인 glMatrix.js를 쓰고 있다는 점인데, 이 부분은 그냥 DWScript의 asm...end 구문을 활용하는 방향으로 타협하자. 자바스크립트 완전 초보인 나로서는 "바보스러울만치 빠르다"는 평가를 받는 이 라이브러리를 DWScript로 다시 짠다고 그만큼의 성능을 낼 자신이 없으니까.
암튼 뚝딱뚝딱 바꿔보자.
이 코드를 어제 소개한 JSCodeGenDemo 에 통째로 붙여넣고 Run 버튼을 눌러보자.
크롬이 기본브라우저로 되어있다면 (개발자라면 대부분 그럴 것이라 믿...) 웹GL 컨텍스트에 예쁘게 랜더링 된 삼각형과 사각형을 볼 수 있을 것이다.
변환되어 나온 소스는 TObject와 Exception이 기본적으로 포함되어 그다지 아름답지는 않다.
아무래도 DWScript의 진가는 객체로 되어있는 기존의 코드를 자바스크립트로 변경할 때 유용할 것이다.
한마디로 표현하자면... 자바스크립트를 공부하려는 늙은 델파이 프로그래머에겐 알라의 요술봉 같은 물건이라고 할까...
오늘은 이정도로 마무리 짓고, 객체의 변환은 다음 기회에...
DWScript 로 무얼 만들어보면 좋을까 잠시 고민하다가 Learning WebGL의 첫번째 강좌를 만들어보기로 했다.
문제는 이 강좌가 벡터와 행렬 연산에 자바스크립트용 3D라이브러리인 glMatrix.js를 쓰고 있다는 점인데, 이 부분은 그냥 DWScript의 asm...end 구문을 활용하는 방향으로 타협하자. 자바스크립트 완전 초보인 나로서는 "바보스러울만치 빠르다"는 평가를 받는 이 라이브러리를 DWScript로 다시 짠다고 그만큼의 성능을 낼 자신이 없으니까.
암튼 뚝딱뚝딱 바꿔보자.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>WebGL lesson-01 by pas2js</title>
<script type="text/javascript" src="http://learningwebgl.com/lessons/lesson01/glMatrix-0.9.5.min.js"></script>
<script type='text/javascript'>
<%pas2js
procedure alert(msg: Variant); external;
var gl : Variant;
var shaderProgram : Variant;
var shader_fs : string =
"precision mediump float; "+
"void main(void) { "+
" gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0); "+
"}";
var shader_vs : string =
"attribute vec3 aVertexPosition; " +
"uniform mat4 uMVMatrix; " +
"uniform mat4 uPMatrix; " +
"void main(void) { " +
" gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0); " +
"}";
function get_fs_shader(ShaderScript: string): Variant;
begin
Result := gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(Result, ShaderScript);
gl.compileShader(Result);
if not gl.getShaderParameter(Result, gl.COMPILE_STATUS) then
alert(gl.getShaderInfoLog(Result));
end;
function get_vs_shader(ShaderScript: string): Variant;
begin
Result := gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(Result, ShaderScript);
gl.compileShader(Result);
if not gl.getShaderParameter(Result, gl.COMPILE_STATUS) then
alert(gl.getShaderInfoLog(Result));
end;
procedure initShaders()
begin
var fragmentShader: Variant = get_fs_shader(shader_fs);
var vertexShader : Variant = get_vs_shader(shader_vs);
shaderProgram := gl.createProgram();
gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram);
if not gl.getProgramParameter(shaderProgram, gl.LINK_STATUS) then
begin
alert("Could not initialise shaders");
Exit;
end;
gl.useProgram(shaderProgram);
shaderProgram.vertexPositionAttribute := gl.getAttribLocation(shaderProgram, "aVertexPosition");
gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);
shaderProgram.pMatrixUniform := gl.getUniformLocation(shaderProgram, "uPMatrix");
shaderProgram.mvMatrixUniform := gl.getUniformLocation(shaderProgram, "uMVMatrix");
end;
var triangleVertexPositionBuffer: Variant;
var squareVertexPositionBuffer: Variant;
procedure initBuffers()
begin
triangleVertexPositionBuffer := gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer);
asm
var vertices = [
0.0, 1.0, 0.0,
-1.0, -1.0, 0.0,
1.0, -1.0, 0.0
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
end;
triangleVertexPositionBuffer.itemSize := 3;
triangleVertexPositionBuffer.numItems := 3;
squareVertexPositionBuffer := gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexPositionBuffer);
asm
vertices = [
1.0, 1.0, 0.0,
-1.0, 1.0, 0.0,
1.0, -1.0, 0.0,
-1.0, -1.0, 0.0
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
end;
squareVertexPositionBuffer.itemSize := 3;
squareVertexPositionBuffer.numItems := 4;
end;
var mvMatrix: Variant;
var pMatrix: Variant;
asm
@mvMatrix = mat4.create();
@pMatrix = mat4.create();
end;
procedure setMatrixUniforms()
begin
gl.uniformMatrix4fv(shaderProgram.pMatrixUniform, false, pMatrix);
gl.uniformMatrix4fv(shaderProgram.mvMatrixUniform, false, mvMatrix);
end;
procedure drawScene();
begin
gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
gl.clear(gl.COLOR_BUFFER_BIT or gl.DEPTH_BUFFER_BIT);
asm
mat4.perspective(45, gl.viewportWidth / gl.viewportHeight, 0.1, 100.0, pMatrix);
mat4.identity(mvMatrix);
mat4.translate(mvMatrix, [-1.5, 0.0, -7.0]);
end;
gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer);
gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, triangleVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
setMatrixUniforms();
gl.drawArrays(gl.TRIANGLES, 0, triangleVertexPositionBuffer.numItems);
asm
mat4.translate(mvMatrix, [3.0, 0.0, 0.0]);
end;
gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexPositionBuffer);
gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, squareVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
setMatrixUniforms();
gl.drawArrays(gl.TRIANGLE_STRIP, 0, squareVertexPositionBuffer.numItems);
end;
procedure initGL(canvas: Variant)
begin
try
gl := canvas.getContext("experimental-webgl");
gl.viewportWidth := canvas.width;
gl.viewportHeight := canvas.height;
except
end;
if not gl then
alert("Could not initialize WebGL, sorry :-(");
end;
%>
function webGLStart() {
var canvas = document.getElementById("gl-canvas");
initGL(canvas);
initShaders();
initBuffers();
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.enable(gl.DEPTH_TEST);
drawScene();
}
</script>
</head>
<body style="margin:10; overflow:hidden" onload="webGLStart();">
<canvas id="gl-canvas" style="border: none;" width="500" height="500"></canvas>
</body>
</html>
이 코드를 어제 소개한 JSCodeGenDemo 에 통째로 붙여넣고 Run 버튼을 눌러보자.
크롬이 기본브라우저로 되어있다면 (개발자라면 대부분 그럴 것이라 믿...) 웹GL 컨텍스트에 예쁘게 랜더링 된 삼각형과 사각형을 볼 수 있을 것이다.
변환되어 나온 소스는 TObject와 Exception이 기본적으로 포함되어 그다지 아름답지는 않다.
아무래도 DWScript의 진가는 객체로 되어있는 기존의 코드를 자바스크립트로 변경할 때 유용할 것이다.
한마디로 표현하자면... 자바스크립트를 공부하려는 늙은 델파이 프로그래머에겐 알라의 요술봉 같은 물건이라고 할까...
오늘은 이정도로 마무리 짓고, 객체의 변환은 다음 기회에...