Permalink
Browse files

Added skybox demo for ipad

  • Loading branch information...
1 parent 209041b commit e543a8a73a12a8376b7889cf8b8c3d93deea470e @mariusGundersen committed Jan 2, 2012
View
@@ -0,0 +1,24 @@
+Skybox Islands by Deelkar
+
+my first attempt on a skybox for 3d game maps
+
+render_program: tg0811
+render_time: 30m 22s
+
+texture_size: 512x512 px
+
+Camera position:
+altitude above sea level: 250m
+altitude above ground: 250m
+
+camera orientation for textures (direction and elevation)
+n: 0� 0�
+e: 90� 0�
+s: 180� 0�
+w: 270� 0�
+t: 0� 90�
+b: 0� -90�
+
+
+Description:
+some islands in the sea on a sunny day
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -151,6 +151,7 @@ function playGame(time){
var speed = time/20;
+
moveEnemy(speed);
var input = getUserInput(speed);
@@ -41,9 +41,10 @@ function getUserInput(speed){
function drawGUI(){
- if(Origami.world.videos[0].video.duration > 0){
- Origami.world.canvas.video.context2d.drawImage(Origami.world.videos[0].video, 0, 0);
- }
+ if(Origami.world.videos[0].video.duration > 0){
+ Origami.world.canvas.video.context2d.drawImage(Origami.world.videos[0].video, 0, 0);
+ }
+
}
View
@@ -0,0 +1,48 @@
+<html>
+<head>
+ <title>Skybox</title>
+
+ <meta name="apple-mobile-web-app-capable" content="yes">
+ <link rel="apple-touch-icon-precomposed" href="gfx/skybox_w.jpg">
+ <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+
+ <style>
+ html,body{
+ background: black;
+ height: 100%;
+ width: 100%;
+ }
+ *{
+ margin:0;
+ padding:0;
+ }
+ canvas{
+ width: 100%;
+ height: 100%;
+ border: 0px solid #000;
+ margin: 0 auto;
+ }
+ </style>
+
+</head>
+<body>
+ <canvas id="c"
+ width="320"
+ height="320"
+ style="border:0px solid #000; display:block; background: #888;"></canvas>
+</body>
+<script type="text/javascript" src="../util/Loader.js"></script>
+<script type="text/javascript">
+Loader.load(["../util/InterfaceOrientation.js",
+ "../util/Mouse.js",
+ "../util/FPS.js",
+ "../util/Animation.js",
+ "../Origami/Origami.js",
+ "../Origami/OrigamiDraw.js",
+ "../Origami/OrigamiRender.js",
+ "../Origami/OrigamiUtil.js",
+ "skybox/world.js",
+ "skybox/common.js",
+ "skybox/game.js"]);
+</script>
+</html>
No changes.
View
@@ -0,0 +1,172 @@
+
+var downPos = {x:0, y:0};
+var intval;
+
+
+function render(){
+ /*var sun = Origami.world.light.sun;
+ sun.yr -= 1/90;
+ sun.x = Math.sin(sun.yr);
+ sun.z = Math.cos(sun.yr);
+ if(Origami.world.shapes.length > 1){
+ Origami.world.shapes[1].x = sun.x*1000;
+ Origami.world.shapes[1].z = sun.z*1000;
+ }*/
+ /*var radius = Mouse.pos.z;
+ if(Mouse.isPressed(0)){
+ downPos.x = Mouse.pos.x;
+ downPos.y = Mouse.pos.y;
+ }
+ if(Mouse.isDown(0)){
+ Origami.cam.ry += (downPos.x-Mouse.pos.x)/Origami.size.hw*Math.PI;
+ Origami.cam.rx -= (downPos.y-Mouse.pos.y)/Origami.size.h*Math.PI;
+ downPos.x = Mouse.pos.x;
+ downPos.y = Mouse.pos.y;
+ }
+ Origami.cam.y = Math.sin(Origami.cam.rx)*radius;
+ var r = Math.cos(Origami.cam.rx)*radius;
+ Origami.cam.x = -Math.sin(Origami.cam.ry)*r;
+ Origami.cam.z = -Math.cos(Origami.cam.ry)*r;*/
+
+
+ Origami.cam.ry = currentOrientation.alpha;
+ Origami.cam.rx = Math.PI/2 - currentOrientation.beta;
+
+
+
+ Origami.render();
+ FPS.frameComplete();
+ Origami.ctx.fillText(Origami.statistics.polyCount+" Polygons", 0, 15);
+
+};
+
+
+function worldLoaded(world, cam){
+
+ splitWorld(Origami.world, 5);
+
+ downPos = {x:0, y:0};
+ Origami.initWorld(function(){
+ Animation.start(render);
+ });
+};
+
+var currentOrientation = {alpha:0,beta:0, gamma:0};
+function setRotation(e){
+ currentOrientation.alpha = e.alpha*Math.PI/180;
+ currentOrientation.beta = e.beta*Math.PI/180;
+ currentOrientation.gamma = e.gamma*Math.PI/180;
+}
+
+function splitWorld(world, divisions){
+ function buildRect(corner, vector1, vector2, divisions, image, width, height, world){
+ function splitRect(p1, p2, p3, p4, divisions){
+ function splitTriangle(p1, p2, p3, divisions){
+ function buildTriangle(p1, p2, p3){
+ return {p1:{a:p1.x, b:p1.y},
+ p2:{a:p2.x, b:p2.y},
+ p3:{a:p3.x, b:p3.y}};
+ }
+ if(divisions <= 0){
+ return [buildTriangle(p1, p2, p3)];
+ }else{
+ var p4 = {x:(p2.x + p3.x)/2,
+ y:(p2.y + p3.y)/2};
+ var triangles = [];
+ triangles = triangles.concat(splitTriangle(p4, p1, p2, divisions - 1));
+ triangles = triangles.concat(splitTriangle(p4, p3, p1, divisions - 1));
+ return triangles;
+ }
+ }
+ var triangles = [];
+ triangles = triangles.concat(splitTriangle(p1, p2, p4, divisions - 1));
+ triangles = triangles.concat(splitTriangle(p3, p4, p2, divisions - 1));
+ return triangles
+ }
+ var shape = {};
+ shape.type = "polygon";
+ var verts = shape.verts = [];
+ var polygons = shape.polygons = [];
+ var textures = world.textures;
+
+
+ var triangles = splitRect({x:0, y:0}, {x:1, y:0}, {x:1, y:1}, {x:0, y:1}, divisions);
+ for(var i=0; i<triangles.length; i++){
+ var t = triangles[i];
+ for(var p in t){
+ verts.push({x:corner.x + t[p].a*vector1.x + t[p].b*vector2.x,
+ y:corner.y + t[p].a*vector1.y + t[p].b*vector2.y,
+ z:corner.z + t[p].a*vector1.z + t[p].b*vector2.z})
+ }
+ polygons.push({v1: verts.length - 3,
+ v2: verts.length - 2,
+ v3: verts.length - 1,
+ texture: image+i});
+ textures[image+i] = ({
+ p1:{x:width*t.p1.a, y:height*t.p1.b},
+ p2:{x:width*t.p2.a, y:height*t.p2.b},
+ p3:{x:width*t.p3.a, y:height*t.p3.b},
+ image: image
+ });
+ }
+
+ world.shapes.push(shape);
+ }
+ buildRect({x:1000, y:1000, z:1000},
+ {x:-2000, y:0, z:0},
+ {x:0, y:-2000, z:0},
+ divisions,
+ "north",
+ 512, 512, world);
+
+ buildRect({x:-1000, y:1000, z:1000},
+ {x:0, y:0, z:-2000},
+ {x:0, y:-2000, z:0},
+ divisions,
+ "east",
+ 512, 512, world);
+
+ buildRect({x:-1000, y:1000, z:-1000},
+ {x:2000, y:0, z:0},
+ {x:0, y:-2000, z:0},
+ divisions,
+ "south",
+ 512, 512, world);
+
+ buildRect({x:1000, y:1000, z:-1000},
+ {x:0, y:0, z:2000},
+ {x:0, y:-2000, z:0},
+ divisions,
+ "west",
+ 512, 512, world);
+
+ buildRect({x:-1000, y:1000, z:-1000},
+ {x:0, y:0, z:2000},
+ {x:2000, y:0, z:0},
+ divisions,
+ "up",
+ 512, 512, world);
+
+ buildRect({x:1000, y:-1000, z:-1000},
+ {x:0, y:0, z:2000},
+ {x:-2000, y:0, z:0},
+ divisions,
+ "down",
+ 512, 512, world);
+
+
+
+
+}
+
+Origami.canvas = document.getElementById("c");
+
+Origami.ctx.fillStyle = "#000000";
+Origami.ctx.fillRect(0, 0, Origami.size.w, Origami.size.h);
+
+
+Mouse.init(window, document.getElementById("c"));
+Mouse.pos.z = 300;
+FPS.color = "#FFFFFF";
+window.addEventListener("interfaceorientation", setRotation, false);
+window.addEventListener("load", worldLoaded, false);
Oops, something went wrong.

0 comments on commit e543a8a

Please sign in to comment.