Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.

ESte artículo proporciona un interesante ejemplo de la vida real usando el elemento <canvas>  para hacer software rendering de un entorno 3D usando ray-casting.

Abrir en una nueva ventana

¿Por qué?

 

Después de darme cuenta, para mi satisfacción, de que el ingenioso <canvas> elemento sobre el que había estado leyendo no solo era pronto compatible con Firefox, sino que ya era compatible con la versión actual de Safari, tuve que probar un pequeño experimento.

El resumen de lienzo y el tutorial que encontré aquí en MDN son geniales, pero nadie había escrito sobre animación todavía, así que pensé en probar un puerto de un raycaster básico en el que había trabajado hace un tiempo, y ver qué tipo de rendimiento puede esperar de un búfer de píxeles controlado por JavaScript.

 

¿Cómo?

La idea básica es usar setInterval () con un retraso arbitrario que corresponde a la velocidad de fotogramas deseada. Después de cada intervalo, una función de actualización volverá a pintar el lienzo que muestra la vista actual. Sé que podría haber empezado con un ejemplo más simple, pero estoy seguro de que el tutorial de lienzo get to that, y quería ver si podía hacer esto.

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.

The code I ended up with is a regurgitated amalgam of the raycaster chapters from an old André LaMotheTricks of the Game Programming Gurus book (ISBN: 0672305070), and a java raycaster 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.

Resultados

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.

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. =)

El ray-caster

The nice people here have manually copied my files up so you can take a look, and for your hacking enjoyment I've posted the individual file contents as code listings (see below).

So there you are, fire up Safari 1.3+ or Firefox 1.5+ or some other browser that supports the <canvas> element and enjoy!

input.js | Level.js | Player.js | RayCaster.html | RayCaster.js | trace.css | trace.js

Ver también

Etiquetas y colaboradores del documento

Colaboradores en esta página: Fandres91, dkocho4, preteric
Última actualización por: Fandres91,