-
Notifications
You must be signed in to change notification settings - Fork 4
/
index.html
65 lines (59 loc) · 3.09 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<html>
<head>
<style>
html, body {
text-align: center;
font-family: georgia,times,serif;
font-size:0.9em;
margin: 0;
border: 0;
}
body {
background: center top url("background.png") repeat-y #d9d4ca;
}
#comment {
position: relative;
text-align: justify;
margin: auto;
bottom: 0px;
}
.content {
width: 630px;
padding: 5px;
margin: auto;
}
a {
color: black;
}
a img {
border: none;
}
h1, h4 {
font-family: verdana,sans-serif;
}
</style>
<script src="voxel.js" type="text/javascript"></script>
<title>Javascript Voxel demo (using canvas and ImageData)</title>
<link type="image/gif" href="favicon.gif" rel="icon"/>
</head>
<body onload="voxel.start('map.jpg', 'texture.jpg')" onkeydown="voxel.eventHandler(event)" onkeyup="voxel.keyTrap(event)" onkeypress="voxel.keyTrap(event)" onmousemove="voxel.mouseHandler(event)" onmousedown="voxel.mouseHandler(event)" onmouseup="voxel.mouseHandler(event)">
<div class="content"><img src="title.png" alt="Javascipt Voxel Spacing"/></div>
<canvas id="canvas" width="640px" height="400px"></canvas>
<div class="content">
<br/><span id="fps"></span>
<p>use <b>directional arrows</b> or left-click/move to move, <b>w</b>/<b>s</b> to go up/down, <b>a</b> to turn on/off anti-aliasing and <b>q</b> to swich hight/low resoltion</p>
<div id="comment">
<h4>What is this?</h4>
<p>It's a very simple demo that use canvas and <a href="https://developer.mozilla.org/En/HTML/Canvas/Pixel_manipulation_with_canvas">ImageData</a> to draw a landscape using the voxel spacing technique. An image is read with the getImageData method and used as a heightmap. The landscape is then rendered column after column using the voxel spacing method. The image is then copied to the canvas with a scale factor.</p>
<h4>Where does it work?</h4>
<p>In every browser supporting canvas and ImageData. Firefox, Safari or Chrome will do just fine. This is the second release to this demo, it's twice as fast as before in Firefox, not much improved in Chrome and way slower in Safari which means they all runs more or less at the same speed now (~10fps on my laptop).</p>
<p>I will try to figure out exactly why is Safari slower now, for some news about my progress follow <a href="http://www.twitter.com/gameQuery">http://www.twitter.com/gameQuery</a></p>
<h4>License</h4>
<p>The code and the image are under <a href="MIT-LICENSE.txt" target="_blank">MIT license</a>. If you do anything with the code I'll be happy to ear about it.</p>
<h4>Other</h4>
<p>You may want to take a look at some of my other javascript projects like <a href="http://gamequery.onaluf.org" target="_blank">gameQuery</a> and <a href="http://forest.onaluf.org" target="_blank">a Forest</a></p>
</div>
<a href="http://www.chromeexperiments.com/detail/javascript-voxel-spacing/"><img src="badge.png" alt="See my Experiment on ChromeExperiments.com" /></a>
</div>
</body>
</html>