diff --git a/example1/example1.html b/example1/example1.html index 13650c638419a59e4fbecf1469c9bd13a740d9ff..7ad5c62e2c2f996677f59451caea62787f98cb90 100644 --- a/example1/example1.html +++ b/example1/example1.html @@ -41,4 +41,4 @@ } </script> </body> -</html> +</html> \ No newline at end of file diff --git a/example1/subwaySurfer.js b/example1/subwaySurfer.js index b79ce0392019a7111007e1aca669f689a0a28c9d..7be8f8943e9275a2987968c7c45e8967c0335c7d 100644 --- a/example1/subwaySurfer.js +++ b/example1/subwaySurfer.js @@ -21,28 +21,55 @@ var currentLane = 1; // Start in the middle lane var obstacleSpeed = 0.1; var obstacleFrequency = 100; // Higher value = less frequent -// Adjusted dimensions based on provided image and reduced by half -var torsoHeight = 1.0; -var torsoWidth = 0.5; -var upperArmHeight = 0.5; -var lowerArmHeight = 0.4; -var armWidth = 0.15; -var upperLegHeight = 0.6; -var lowerLegHeight = 0.5; -var legWidth = 0.2; -var headHeight = 0.3; -var headWidth = 0.3; - -var armAngle = 0; -var legAngle = 0; -var armSpeed = 5; -var legSpeed = 5; - var startTime; var gameOver = false; var score = 0; -// Vertices for player (cube shape) +var torsoId = 0; +var headId = 1; +var head1Id = 1; +var head2Id = 10; +var leftUpperArmId = 2; +var leftLowerArmId = 3; +var rightUpperArmId = 4; +var rightLowerArmId = 5; +var leftUpperLegId = 6; +var leftLowerLegId = 7; +var rightUpperLegId = 8; +var rightLowerLegId = 9; + +var scaleFactor = 0.5; // ��ü ũ�⸦ ���̱� ���� ������ ���� + +var torsoHeight = 2.0 * scaleFactor; +var torsoWidth = 1.5 * scaleFactor; +var upperArmHeight = 1.0 * scaleFactor; +var lowerArmHeight = 1.0 * scaleFactor; +var upperArmWidth = 0.5 * scaleFactor; +var lowerArmWidth = 0.5 * scaleFactor; +var upperLegWidth = 0.5 * scaleFactor; +var lowerLegWidth = 0.5 * scaleFactor; +var lowerLegHeight = 1.0 * scaleFactor; +var upperLegHeight = 1.0 * scaleFactor; +var headHeight = 0.75 * scaleFactor; +var headWidth = 0.75 * scaleFactor; + + + +var numNodes = 10; +var numAngles = 11; +var angle = 0; + +var theta = [0, 0, 0, 0, 0, 0, 180, 0, 180, 0, 0]; + +var stack = []; +var figure = []; + +for( var i=0; i<numNodes; i++) figure[i] = createNode(null, null, null, null); + +var instanceMatrix; +var playerBuffer; +var hurdleBuffer; + var playerVertices = [ vec4(-0.5, -0.5, 0.5, 1.0), vec4(-0.5, 0.5, 0.5, 1.0), @@ -54,9 +81,7 @@ var playerVertices = [ vec4(0.5, -0.5, -0.5, 1.0) ]; -// Vertices for hurdle (centered) var hurdleVertices = [ - // Vertices for the left post vec4(-0.7, -0.5, 0.1, 1.0), vec4(-0.7, 0.5, 0.1, 1.0), vec4(-0.5, 0.5, 0.1, 1.0), @@ -66,7 +91,6 @@ var hurdleVertices = [ vec4(-0.5, 0.5, -0.1, 1.0), vec4(-0.5, -0.5, -0.1, 1.0), - // Vertices for the right post vec4(0.3, -0.5, 0.1, 1.0), vec4(0.3, 0.5, 0.1, 1.0), vec4(0.5, 0.5, 0.1, 1.0), @@ -76,7 +100,6 @@ var hurdleVertices = [ vec4(0.5, 0.5, -0.1, 1.0), vec4(0.5, -0.5, -0.1, 1.0), - // Vertices for the horizontal bar vec4(-0.7, 0.4, 0.1, 1.0), vec4(0.5, 0.4, 0.1, 1.0), vec4(0.5, 0.6, 0.1, 1.0), @@ -90,8 +113,175 @@ var hurdleVertices = [ var playerPointsArray = []; var hurdlePointsArray = []; -var playerBuffer; -var hurdleBuffer; +function createNode(transform, render, sibling, child){ + var node = { + transform: transform, + render: render, + sibling: sibling, + child: child + } + return node; +} + +function scale4(a, b, c) { + var result = mat4(); + result[0][0] = a; + result[1][1] = b; + result[2][2] = c; + return result; +} + +function initNodes(Id) { + var m = mat4(); + + switch(Id) { + case torsoId: + m = translate(0.0, 0.5 * torsoHeight, 0.0); + m = mult(m, rotate(theta[torsoId], 0, 1, 0 )); + figure[torsoId] = createNode( m, torso, null, headId ); + break; + + case headId: + case head1Id: + case head2Id: + m = translate(0.0, torsoHeight + 0.5 * headHeight, 0.0); + m = mult(m, rotate(theta[head1Id], 1, 0, 0)); + m = mult(m, rotate(theta[head2Id], 0, 1, 0)); + figure[headId] = createNode( m, head, leftUpperArmId, null); + break; + + case leftUpperArmId: + m = translate(-0.5 * (torsoWidth + upperArmWidth), 0.9 * torsoHeight, 0.0); // ���� ���뿡 �� ������ ���� + m = mult(m, rotate(theta[leftUpperArmId], 1, 0, 0)); + figure[leftUpperArmId] = createNode( m, leftUpperArm, rightUpperArmId, leftLowerArmId ); + break; + + case rightUpperArmId: + m = translate(0.5 * (torsoWidth + upperArmWidth), 0.9 * torsoHeight, 0.0); // ���� ���뿡 �� ������ ���� + m = mult(m, rotate(theta[rightUpperArmId], 1, 0, 0)); + figure[rightUpperArmId] = createNode( m, rightUpperArm, leftUpperLegId, rightLowerArmId ); + break; + + case leftUpperLegId: + m = translate(-0.5 * upperLegWidth, 0.1 * upperLegHeight, 0.0); + m = mult(m , rotate(theta[leftUpperLegId], 1, 0, 0)); + figure[leftUpperLegId] = createNode( m, leftUpperLeg, rightUpperLegId, leftLowerLegId ); + break; + + case rightUpperLegId: + m = translate(0.5 * upperLegWidth, 0.1 * upperLegHeight, 0.0); + m = mult(m, rotate(theta[rightUpperLegId], 1, 0, 0)); + figure[rightUpperLegId] = createNode( m, rightUpperLeg, null, rightLowerLegId ); + break; + + case leftLowerArmId: + m = translate(0.0, upperArmHeight, 0.0); + m = mult(m, rotate(theta[leftLowerArmId], 1, 0, 0)); + figure[leftLowerArmId] = createNode( m, leftLowerArm, null, null ); + break; + + case rightLowerArmId: + m = translate(0.0, upperArmHeight, 0.0); + m = mult(m, rotate(theta[rightLowerArmId], 1, 0, 0)); + figure[rightLowerArmId] = createNode( m, rightLowerArm, null, null ); + break; + + case leftLowerLegId: + m = translate(0.0, upperLegHeight, 0.0); + m = mult(m, rotate(theta[leftLowerLegId], 1, 0, 0)); + figure[leftLowerLegId] = createNode( m, leftLowerLeg, null, null ); + break; + + case rightLowerLegId: + m = translate(0.0, upperLegHeight, 0.0); + m = mult(m, rotate(theta[rightLowerLegId], 1, 0, 0)); + figure[rightLowerLegId] = createNode( m, rightLowerLeg, null, null ); + break; + } +} + + + +function traverse(Id) { + if(Id == null) return; + stack.push(modelViewMatrix); + modelViewMatrix = mult(modelViewMatrix, figure[Id].transform); + figure[Id].render(); + if(figure[Id].child != null) traverse(figure[Id].child); + modelViewMatrix = stack.pop(); + if(figure[Id].sibling != null) traverse(figure[Id].sibling); +} + +function torso() { + instanceMatrix = mult(modelViewMatrix, translate(0.0, 0.5 * torsoHeight, 0.0) ); + instanceMatrix = mult(instanceMatrix, scale4(torsoWidth, torsoHeight, torsoWidth)); + gl.uniformMatrix4fv(modelViewMatrixLoc, false, flatten(instanceMatrix)); + drawCube(); +} + +function head() { + instanceMatrix = mult(modelViewMatrix, translate(0.0, 0.5 * headHeight, 0.0 )); + instanceMatrix = mult(instanceMatrix, scale4(headWidth, headHeight, headWidth)); + gl.uniformMatrix4fv(modelViewMatrixLoc, false, flatten(instanceMatrix)); + drawCube(); +} + +function leftUpperArm() { + instanceMatrix = mult(modelViewMatrix, translate(0.0, 0.5 * upperArmHeight, 0.0) ); + instanceMatrix = mult(instanceMatrix, scale4(upperArmWidth, upperArmHeight, upperArmWidth)); + gl.uniformMatrix4fv(modelViewMatrixLoc, false, flatten(instanceMatrix)); + drawCube(); +} + +function leftLowerArm() { + instanceMatrix = mult(modelViewMatrix, translate(0.0, 0.5 * lowerArmHeight, 0.0) ); + instanceMatrix = mult(instanceMatrix, scale4(lowerArmWidth, lowerArmHeight, lowerArmWidth)); + gl.uniformMatrix4fv(modelViewMatrixLoc, false, flatten(instanceMatrix)); + drawCube(); +} + +function rightUpperArm() { + instanceMatrix = mult(modelViewMatrix, translate(0.0, 0.5 * upperArmHeight, 0.0) ); + instanceMatrix = mult(instanceMatrix, scale4(upperArmWidth, upperArmHeight, upperArmWidth)); + gl.uniformMatrix4fv(modelViewMatrixLoc, false, flatten(instanceMatrix)); + drawCube(); +} + +function rightLowerArm() { + instanceMatrix = mult(modelViewMatrix, translate(0.0, 0.5 * lowerArmHeight, 0.0) ); + instanceMatrix = mult(instanceMatrix, scale4(lowerArmWidth, lowerArmHeight, lowerArmWidth)); + gl.uniformMatrix4fv(modelViewMatrixLoc, false, flatten(instanceMatrix)); + drawCube(); +} + +function leftUpperLeg() { + instanceMatrix = mult(modelViewMatrix, translate(0.0, 0.5 * upperLegHeight, 0.0) ); + instanceMatrix = mult(instanceMatrix, scale4(upperLegWidth, upperLegHeight, upperLegWidth)); + gl.uniformMatrix4fv(modelViewMatrixLoc, false, flatten(instanceMatrix)); + drawCube(); +} + +function leftLowerLeg() { + instanceMatrix = mult(modelViewMatrix, translate(0.0, 0.5 * lowerLegHeight, 0.0) ); + instanceMatrix = mult(instanceMatrix, scale4(lowerLegWidth, lowerLegHeight, lowerLegWidth)); + gl.uniformMatrix4fv(modelViewMatrixLoc, false, flatten(instanceMatrix)); + drawCube(); +} + +function rightUpperLeg() { + instanceMatrix = mult(modelViewMatrix, translate(0.0, 0.5 * upperLegHeight, 0.0) ); + instanceMatrix = mult(instanceMatrix, scale4(upperLegWidth, upperLegHeight, upperLegWidth)); + gl.uniformMatrix4fv(modelViewMatrixLoc, false, flatten(instanceMatrix)); + drawCube(); +} + +function rightLowerLeg() { + instanceMatrix = mult(modelViewMatrix, translate(0.0, 0.5 * lowerLegHeight, 0.0) ); + instanceMatrix = mult(instanceMatrix, scale4(lowerLegWidth, lowerLegHeight, lowerLegWidth)); + gl.uniformMatrix4fv(modelViewMatrixLoc, false, flatten(instanceMatrix)); + drawCube(); +} + function quad(a, b, c, d, pointsArray, vertices) { pointsArray.push(vertices[a]); @@ -110,7 +300,6 @@ function cube() { } function hurdle() { - // Left post quad(0, 1, 2, 3, hurdlePointsArray, hurdleVertices); quad(4, 5, 6, 7, hurdlePointsArray, hurdleVertices); quad(0, 1, 5, 4, hurdlePointsArray, hurdleVertices); @@ -118,7 +307,6 @@ function hurdle() { quad(0, 3, 7, 4, hurdlePointsArray, hurdleVertices); quad(1, 2, 6, 5, hurdlePointsArray, hurdleVertices); - // Right post quad(8, 9, 10, 11, hurdlePointsArray, hurdleVertices); quad(12, 13, 14, 15, hurdlePointsArray, hurdleVertices); quad(8, 9, 13, 12, hurdlePointsArray, hurdleVertices); @@ -126,7 +314,6 @@ function hurdle() { quad(8, 11, 15, 12, hurdlePointsArray, hurdleVertices); quad(9, 10, 14, 13, hurdlePointsArray, hurdleVertices); - // Horizontal bar quad(16, 17, 18, 19, hurdlePointsArray, hurdleVertices); quad(20, 21, 22, 23, hurdlePointsArray, hurdleVertices); quad(16, 17, 21, 20, hurdlePointsArray, hurdleVertices); @@ -135,65 +322,53 @@ function hurdle() { quad(17, 18, 22, 21, hurdlePointsArray, hurdleVertices); } -// Initialize WebGL context and shaders window.onload = function init() { canvas = document.getElementById("gl-canvas"); gl = WebGLUtils.setupWebGL(canvas); if (!gl) { alert("WebGL isn't available"); } - // Set viewport and clear color gl.viewport(0, 0, canvas.width, canvas.height); gl.clearColor(0.5, 0.7, 1.0, 1.0); gl.enable(gl.DEPTH_TEST); - // Load and compile shaders program = initShaders(gl, "vertex-shader", "fragment-shader"); gl.useProgram(program); - // Set up projection matrix + instanceMatrix = mat4(); + var aspect = canvas.width / canvas.height; projectionMatrix = perspective(45, aspect, 0.1, 100.0); projectionMatrixLoc = gl.getUniformLocation(program, "projectionMatrix"); gl.uniformMatrix4fv(projectionMatrixLoc, false, flatten(projectionMatrix)); - // Set up view matrix (camera) - viewMatrix = lookAt(vec3(0, 2, 6), vec3(0, 0, -15), vec3(0, 1, 0)); // Adjusted for better perspective + viewMatrix = lookAt(vec3(0, 2, 6), vec3(0, 0, -30), vec3(0, 1, 0)); // Adjusted for better perspective viewMatrixLoc = gl.getUniformLocation(program, "viewMatrix"); gl.uniformMatrix4fv(viewMatrixLoc, false, flatten(viewMatrix)); modelViewMatrixLoc = gl.getUniformLocation(program, "modelViewMatrix"); fColorLoc = gl.getUniformLocation(program, "fColor"); - // Create the player figure player = createPlayer(); - - // Create cube geometry cube(); - - // Create hurdle geometry hurdle(); - // Buffer setup for player playerBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, playerBuffer); gl.bufferData(gl.ARRAY_BUFFER, flatten(playerPointsArray), gl.STATIC_DRAW); - // Buffer setup for hurdle hurdleBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, hurdleBuffer); gl.bufferData(gl.ARRAY_BUFFER, flatten(hurdlePointsArray), gl.STATIC_DRAW); var vPosition = gl.getAttribLocation(program, "vPosition"); - - // Bind player buffer gl.bindBuffer(gl.ARRAY_BUFFER, playerBuffer); gl.vertexAttribPointer(vPosition, 4, gl.FLOAT, false, 0, 0); gl.enableVertexAttribArray(vPosition); - // Initialize event listeners window.addEventListener("keydown", handleKeyDown); - // Start the game + for (var i = 0; i < numNodes; i++) initNodes(i); + startGame(); }; @@ -218,6 +393,7 @@ function handleKeyDown(event) { if (currentLane < 2) currentLane++; break; } + player.position[0] = lanes[currentLane]; } function createPlayer() { @@ -267,18 +443,7 @@ function render() { gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); - // Update player position based on current lane - player.position[0] = lanes[currentLane]; - - // Update angles for running animation - var now = Date.now() / 100; - armAngle = Math.sin(now) * 30; - legAngle = Math.cos(now) * 30; - - // Render player drawPlayer(player.position); - - // Update and render obstacles updateObstacles(); for (var i = 0; i < obstacles.length; i++) { modelViewMatrix = mult(viewMatrix, translate(obstacles[i].position)); @@ -292,97 +457,17 @@ function render() { } function drawPlayer(position) { - // Bind player buffer var vPosition = gl.getAttribLocation(program, "vPosition"); gl.bindBuffer(gl.ARRAY_BUFFER, playerBuffer); gl.vertexAttribPointer(vPosition, 4, gl.FLOAT, false, 0, 0); gl.enableVertexAttribArray(vPosition); - // Draw torso modelViewMatrix = mult(viewMatrix, translate(position)); - modelViewMatrix = mult(modelViewMatrix, scalem(torsoWidth, torsoHeight, torsoWidth)); + modelViewMatrix = mult(modelViewMatrix, scalem(1.0, 1.0, 1.0)); gl.uniformMatrix4fv(modelViewMatrixLoc, false, flatten(modelViewMatrix)); - gl.uniform4fv(fColorLoc, [0.0, 1.0, 0.0, 1.0]); // Green color for torso - drawCube(); + gl.uniform4fv(fColorLoc, [1.0, 0.0, 0.0, 1.0]); // Player color (red) - // Draw head - var headPosition = vec3(position[0], position[1] + torsoHeight / 2 + headHeight / 2, position[2]); - modelViewMatrix = mult(viewMatrix, translate(headPosition)); - modelViewMatrix = mult(modelViewMatrix, scalem(headWidth, headHeight, headWidth)); - gl.uniformMatrix4fv(modelViewMatrixLoc, false, flatten(modelViewMatrix)); - gl.uniform4fv(fColorLoc, [1.0, 0.0, 0.0, 1.0]); // Red color for upper parts - drawCube(); - - // Draw left upper arm - var leftUpperArmPosition = vec3(position[0] - torsoWidth / 2 - armWidth / 2, position[1] + torsoHeight / 4, position[2]); - modelViewMatrix = mult(viewMatrix, translate(leftUpperArmPosition)); - modelViewMatrix = mult(modelViewMatrix, rotate(armAngle, vec3(1, 0, 0))); - modelViewMatrix = mult(modelViewMatrix, scalem(armWidth, upperArmHeight, armWidth)); - gl.uniformMatrix4fv(modelViewMatrixLoc, false, flatten(modelViewMatrix)); - drawCube(); - - // Draw right upper arm - var rightUpperArmPosition = vec3(position[0] + torsoWidth / 2 + armWidth / 2, position[1] + torsoHeight / 4, position[2]); - modelViewMatrix = mult(viewMatrix, translate(rightUpperArmPosition)); - modelViewMatrix = mult(modelViewMatrix, rotate(-armAngle, vec3(1, 0, 0))); - modelViewMatrix = mult(modelViewMatrix, scalem(armWidth, upperArmHeight, armWidth)); - gl.uniformMatrix4fv(modelViewMatrixLoc, false, flatten(modelViewMatrix)); - drawCube(); - - // Draw left lower arm - var leftLowerArmPosition = vec3(0, -upperArmHeight / 2, 0); - modelViewMatrix = mult(viewMatrix, translate(leftUpperArmPosition)); - modelViewMatrix = mult(modelViewMatrix, rotate(armAngle, vec3(1, 0, 0))); - modelViewMatrix = mult(modelViewMatrix, translate(leftLowerArmPosition)); - modelViewMatrix = mult(modelViewMatrix, scalem(armWidth, lowerArmHeight, armWidth)); - gl.uniformMatrix4fv(modelViewMatrixLoc, false, flatten(modelViewMatrix)); - gl.uniform4fv(fColorLoc, [0.0, 0.0, 1.0, 1.0]); // Blue color for lower parts - drawCube(); - - // Draw right lower arm - var rightLowerArmPosition = vec3(0, -upperArmHeight / 2, 0); - modelViewMatrix = mult(viewMatrix, translate(rightUpperArmPosition)); - modelViewMatrix = mult(modelViewMatrix, rotate(-armAngle, vec3(1, 0, 0))); - modelViewMatrix = mult(modelViewMatrix, translate(rightLowerArmPosition)); - modelViewMatrix = mult(modelViewMatrix, scalem(armWidth, lowerArmHeight, armWidth)); - gl.uniformMatrix4fv(modelViewMatrixLoc, false, flatten(modelViewMatrix)); - drawCube(); - - // Draw left upper leg - var leftUpperLegPosition = vec3(position[0] - torsoWidth / 4, position[1] - torsoHeight / 2, position[2]); - modelViewMatrix = mult(viewMatrix, translate(leftUpperLegPosition)); - modelViewMatrix = mult(modelViewMatrix, rotate(legAngle, vec3(1, 0, 0))); - modelViewMatrix = mult(modelViewMatrix, scalem(legWidth, upperLegHeight, legWidth)); - gl.uniformMatrix4fv(modelViewMatrixLoc, false, flatten(modelViewMatrix)); - gl.uniform4fv(fColorLoc, [1.0, 0.0, 0.0, 1.0]); // Red color for upper parts - drawCube(); - - // Draw right upper leg - var rightUpperLegPosition = vec3(position[0] + torsoWidth / 4, position[1] - torsoHeight / 2, position[2]); - modelViewMatrix = mult(viewMatrix, translate(rightUpperLegPosition)); - modelViewMatrix = mult(modelViewMatrix, rotate(-legAngle, vec3(1, 0, 0))); - modelViewMatrix = mult(modelViewMatrix, scalem(legWidth, upperLegHeight, legWidth)); - gl.uniformMatrix4fv(modelViewMatrixLoc, false, flatten(modelViewMatrix)); - drawCube(); - - // Draw left lower leg - var leftLowerLegPosition = vec3(0, -upperLegHeight / 2, 0); - modelViewMatrix = mult(viewMatrix, translate(leftUpperLegPosition)); - modelViewMatrix = mult(modelViewMatrix, rotate(legAngle, vec3(1, 0, 0))); - modelViewMatrix = mult(modelViewMatrix, translate(leftLowerLegPosition)); - modelViewMatrix = mult(modelViewMatrix, scalem(legWidth, lowerLegHeight, legWidth)); - gl.uniformMatrix4fv(modelViewMatrixLoc, false, flatten(modelViewMatrix)); - gl.uniform4fv(fColorLoc, [0.0, 0.0, 1.0, 1.0]); // Blue color for lower parts - drawCube(); - - // Draw right lower leg - var rightLowerLegPosition = vec3(0, -upperLegHeight / 2, 0); - modelViewMatrix = mult(viewMatrix, translate(rightUpperLegPosition)); - modelViewMatrix = mult(modelViewMatrix, rotate(-legAngle, vec3(1, 0, 0))); - modelViewMatrix = mult(modelViewMatrix, translate(rightLowerLegPosition)); - modelViewMatrix = mult(modelViewMatrix, scalem(legWidth, lowerLegHeight, legWidth)); - gl.uniformMatrix4fv(modelViewMatrixLoc, false, flatten(modelViewMatrix)); - drawCube(); + traverse(torsoId); } function drawCube() { @@ -390,12 +475,10 @@ function drawCube() { } function drawHurdle() { - // Bind hurdle buffer var vPosition = gl.getAttribLocation(program, "vPosition"); gl.bindBuffer(gl.ARRAY_BUFFER, hurdleBuffer); gl.vertexAttribPointer(vPosition, 4, gl.FLOAT, false, 0, 0); gl.enableVertexAttribArray(vPosition); - // Draw the hurdle for (var i = 0; i < 6 * 3; i++) gl.drawArrays(gl.TRIANGLE_FAN, 4 * i, 4); -} +} \ No newline at end of file