Un raycaster basique
Un article de MDC.
Voir la démonstration en temps réel.
Sommaire |
[modifier] Les raisons de cette démonstration
Après avoir réalisé, à mon grand plaisir, que l'élégant élément <canvas> dont j'avais entendu parler était non seulement sur le point d'être utilisable dans Firefox, mais était aussi déjà utilisable dans la version courante de Safari, il fallait que je tente une petite expérience.
La présentation et le tutoriel que j'ai trouvés ici sur MDC sont excellents, mais personne n'avait encore réalisé de véritable animation. J'ai donc pensé que j'allais essayer de porter un raycaster basique sur lequel j'avais travaillé il y a longtemps, et voir ce à quoi on pouvait s'attendre en termes de performances avec un buffer de pixels contrôlé en JavaScript.
[modifier] Mise en œuvre
L'idée de base est d'utiliser setInterval à un certain délai arbitraire correspondant au taux de rafraichissement désiré de l'image. Après chaque intervalle, une fonction de mise à jour redessinera le canevas pour afficher la vue courante. Je sais que j'aurais pu commencer avec un exemple plus simple, mais je suis sûr que le tutoriel canvas servira à cela, et je voulais savoir si j'en étais capable.
Donc à chaque mise à jour, le raycaster regarde si vous avez appuyé sur une touche récemment, pour conserver les calculs et ne pas redessiner si vous n'avez pas bougé. Si c'est le cas, le sol et le ciel sont dessinés, la position de la caméra et/ou son orientation sont mises à jour et les rayons sont lancés. Lorsqu'ils rencontrent un mur, une barre verticale est dessinée dans le canevas dans la couleur du mur qui a été touché, ombré avec une version plus simbre de la couleur selon la distance à laquelle se trouve le mur. La hauteur de la barre est également modulée selon la distance entre la caméra et le mur, et est dessinée centrée sur la ligne d'horizon.
Le code auquel j'ai abouti est un amalgame régurgité des chapitres raycaster d'un vieux livre d'André LaMothe Tricks of the Game Programming Gurus (ISBN: 0672305070) et d'un raycaster en Java que j'ai trouvé en ligne, filtrés au travers de mon envie compulsive de renommer tout jusqu'à ce que ça ait un sens pour moi, et de tout les bricolages nécessaires pour que cela fonctionne bien.
[modifier] Les résultats obtenus
Le canvas dans Safari 2.0.1 s'est comporté étonnament bien. Avec le facteur de bloc positionné pour rendre des barres de 8 pixels de large, il est possible d'afficher une fenêtre de 320×240 à 24 fps sur mon Apple mini. Firefox 1.5 Beta 1 est encore plus rapide ; il peut gérer le 320×240 à 24 fps avec des barres de 4 pixels de large. Pas exactement un nouveau membre de la famille ID software, mais plutôt décent si l'on considère qu'il s'agit d'un environnement complètement interprété, et que je n'ai pas eu besoin de me préoccupé d'allocations mémoire, de modes vidéo ou de coder des routines internes en assembleur ou quoi que ce soit. Le code essaie d'être très efficient, en utilisant des recherches dans des tableaux de valeurs précalculées, mais je ne suis pas un gourou de l'optimisation, il pourrait probablement être écrit pour tourner plus rapidement.
De plus, il laisse beaucoup à désirer en termes de ressemblance à un moteur de jeu de quelque sorte que ce soit : il n'y a pas de textures sur les murs, pas de sprites, pas de portes, ni de téléporteurs pour passer à un autre niveau. Mais je suis assez confiant sur le fait que toutes ces choses pourraient être ajoutées avec suffisamment de temps. L'API canvas permet la copie d'images pixel par pixel, donc les textures semblent faisables. Je laisserai ça pour un autre article, probablement écrit par une autre personne. =)
[modifier] Le raycaster
Les sympathiques personnes de MDC ont manuellement copié mes fichiers ici afin que vous puissiez y jeter un coup d'œil, et pour votre plus grand plaisir en matière de bidouillage, j'ai publié le contenu de chacun des fichiers en listings de code (voir ci-dessous).
Vous y êtes, lancez Safari 1.3+ ou Firefox 1.5+ ou un autre navigateur gérant l'élément <canvas> et profitez-en !
input.js |
Level.js |
Player.js |
RayCaster.html |
RayCaster.js |
trace.css |
trace.js