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
|
---
title: A basic ray-caster
slug: Web/API/Canvas_API/A_basic_ray-caster
tags:
- Advanced
- Canvas
- Example
- Graphics
- HTML
- Web
translation_of: Web/API/Canvas_API/A_basic_ray-caster
original_slug: A_Basic_RayCaster
---
<div>{{CanvasSidebar}}</div>
<p>This article provides an interesting real-world example of using the {{HTMLElement("canvas")}} element to do software rendering of a 3D environment using ray-casting.</p>
<p>{{EmbedGHLiveSample("canvas-raycaster/index.html", 900, 300)}}</p>
<p><strong><a href="http://mdn.github.io/canvas-raycaster/">Open in new window</a></strong></p>
<h2 id="Why.3F" name="Why.3F">Why?</h2>
<p>After realizing, to my delight, that the nifty <code><canvas></code> element I'd been <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#dynamic">reading about</a> was not only soon to be supported in Firefox, but was <strong>already</strong> supported in the current version of Safari, I had to try a little experiment.</p>
<p>The canvas <a href="/en-US/docs/Web/API/Canvas_API">overview</a> and <a href="https://developer.mozilla.org/en-US/docs/Canvas_tutorial">tutorial</a> I found here at MDN are great, but nobody had written about animation yet, so I thought I'd try a port of a basic raycaster I'd worked on a while ago, and see what sort of performance we can expect from a JavaScript-controlled pixel buffer.</p>
<h2 id="How.3F" name="How.3F">How?</h2>
<p>The basic idea is to use {{domxref("window.setInterval","setInterval()")}} at some arbitrary delay that corresponds to a desired frame rate. After every interval an update function will repaint the canvas showing the current view. I know I could have started with a simpler example, but I'm sure the canvas tutorial will <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations">get to that</a>, and I wanted to see if I could do this.</p>
<p>So every update, the raycaster looks to see if you've pressed any keys lately, to conserve calculations by not casting if you're idle. If you have, then the canvas is cleared, the ground and sky are drawn, the camera position and/or orientation are updated, and the rays are cast out. As the rays intersect walls, then they render a vertical sliver of canvas in the color of the wall they've hit, blended with a darker version of the color according to the distance to the wall. The height of the sliver is also modulated by the distance from the camera to the wall, and is drawn centered over the horizon line.</p>
<p>The code I ended up with is a regurgitated amalgam of the raycaster chapters from an old André LaMothe<em>Tricks of the Game Programming Gurus</em> book (<small>ISBN: 0672305070</small>), and a <a class="external" href="http://www.shinelife.co.uk/java-maze/">java raycaster</a> I found online, filtered through my compulsion to rename everything so it makes sense to me, and all the tinkering that had to be done to make things work well.</p>
<h2 id="Results" name="Results">Results</h2>
<p>The canvas in Safari 2.0.1 performed surprisingly well. With the blockiness factor cranked up to render slivers 8 pixels wide, I can run a 320 x 240 window at 24 fps on my Apple mini. Firefox 1.5 Beta 1 is even faster; I can run 320 x 240 at 24 fps with 4 pixel slivers. Not exactly a new member of the ID software family, but pretty decent considering it's a fully interpreted environment, and I didn't have to worry about memory allocation or video modes or coding inner routines in assembler or anything. The code does attempt to be very efficient, using array look-ups of pre-computed values, but I'm no optimization guru, so things could probably be written faster.</p>
<p>Also, it leaves a lot to be desired in terms of trying to be any sort of game engine—there are no wall textures, no sprites, no doors, not even any teleporters to get to another level. But I'm pretty confident all those things could be added given enough time. The canvas API supports pixel copying of images, so textures seem feasible. I'll leave that for another article, probably from another person. =)</p>
<h2 id="The_RayCaster" name="The_RayCaster">The ray-caster</h2>
<p>The nice people here have manually copied my files up so you can take a <a href="http://mdn.github.io/canvas-raycaster/">look</a>, and for your hacking enjoyment I've posted the individual file contents as code listings (see below).</p>
<p>So there you are, fire up Safari 1.3+ or Firefox 1.5+ or some other browser that supports the <code><canvas></code> element and enjoy!<br>
<br>
<small><a href="https://github.com/mdn/canvas-raycaster/blob/master/input.js">input.js</a> | <a href="https://github.com/mdn/canvas-raycaster/blob/master/Level.js">Level.js</a> | <a href="https://github.com/mdn/canvas-raycaster/blob/master/Player.js">Player.js</a> | <a href="https://github.com/mdn/canvas-raycaster/blob/master/index.html">RayCaster.html</a> | <a href="https://github.com/mdn/canvas-raycaster/blob/master/RayCaster.js">RayCaster.js</a> | <a href="https://github.com/mdn/canvas-raycaster/blob/master/trace.css">trace.css</a> | <a href="https://github.com/mdn/canvas-raycaster/blob/master/trace.js">trace.js</a> </small></p>
<h2 id="See_also" name="See_also">See also</h2>
<ul>
<li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas tutorial</a></li>
</ul>
|
