November 23, 2017 at 14:11Ray casting in the web world today
- Transfer
The publication contains part of the translation of the article by Jacob Seidelin (Jacob Seidelin) on the creation of a three-dimensional game using the method of "casting rays" - Ray casting , in JavaScript and HTML, as well as several examples of the implementation of this method. The purpose of the publication is to demonstrate the capabilities of Ray casting and introduce the reader to the project of the mentioned author.
With the accelerated performance of browsers, it has recently become easier to develop games in JavaScript more complicated than tic-tac-toe. Now we don’t really need Flash and can easily make quite complex and attractive games using the canvas element (canvas).
Before tackling this topic, I tested the game Wolfenstien. At first there was an attempt to create the most ordinary 3D engine using canvas, then I switched to re-casting using the DOM .
In this article, I will discuss in detail how to create a full-fledged pseudo-three-dimensional engine using rakecasting. I add the word “pseudo”, because in reality we will just create a 2D map, similar to the maze from the game Maze ( one of the first 3D games in the world.) This map will describe how the world will be drawn for the player. The game will rotate only on one axis, so as not to complicate the project. Vertical lines will render exactly like vertical lines. The player will not be able to squat or jump. Although this can be implemented quite simply. I will not go deep into the theoretical part, especially since the Internet already has an excellent guide covering the entire cycle of creating three-dimensional graphics using the casting technique. The author of this guide is F. Permadi.
Using the materials from this article requires a good command of the JavaScript language, familiarity with the HTML5 canvas element, and school knowledge of trigonometry. Some parts of the project are quite fully disassembled in the article. Just keep in mind that my explanations of individual sections of the code cannot cover all aspects. To get a complete picture of the project and to be able to read comments on each section of the code, I recommend downloading the archive to your computer ...
Test the final result of the author. .
For those who are not familiar with reykasting: the peculiarity of this method is that the effect of three-dimensional space is created not by special tools built into the browser, as is the case with CSS 3D transforms, but by the programming language itself and HTML5 features. The entire mathematical apparatus for representing two-dimensional markup language objects in the form of pseudo-three-dimensional objects is implemented directly in the code. The simplest engine usually contains the implementation of three basic methods necessary for building 3D: rotation, translation, translation, intersection.
Almost any basic implementation can be conditionally divided into three blocks: 1) camera control - rotation, movement. 2) beam casting - determining the distance from the camera to each pixel (or a larger sector, depends on the implementation) falling into the camera’s field of view. 3) rendering of the space in the field of view of the camera.
In fact, rekasting allows you to create a full-fledged 3D engine from scratch, without using ready-made libraries. In a simple case, an implementation may take 200-300 lines of code, such as in the engine from this article: “First-person game engine in 256 lines of code.” By the way, this article is also a quick guide to rakecasting.
If you are interested in the method of rakasting and there is a desire to understand it using a simple example, then, it seems to me, it is worth starting the acquaintance with the most simple project. Of all the JavaScript implementations, I managed to find about ten, the simplest - without textures, additional objects, and even without a 2D map output - you can look at the github at this link. Below is a screenshot from the project:
About more serious project in which Ray casting was applied, it is possible to get acquainted in this article on Habr.
An article that led me to search for material about this method.
Creating pseudo-three-dimensional games using HTML, canvas and the Ray casting method
Introduction
With the accelerated performance of browsers, it has recently become easier to develop games in JavaScript more complicated than tic-tac-toe. Now we don’t really need Flash and can easily make quite complex and attractive games using the canvas element (canvas).
Game or game engine?
Before tackling this topic, I tested the game Wolfenstien. At first there was an attempt to create the most ordinary 3D engine using canvas, then I switched to re-casting using the DOM .
In this article, I will discuss in detail how to create a full-fledged pseudo-three-dimensional engine using rakecasting. I add the word “pseudo”, because in reality we will just create a 2D map, similar to the maze from the game Maze ( one of the first 3D games in the world.) This map will describe how the world will be drawn for the player. The game will rotate only on one axis, so as not to complicate the project. Vertical lines will render exactly like vertical lines. The player will not be able to squat or jump. Although this can be implemented quite simply. I will not go deep into the theoretical part, especially since the Internet already has an excellent guide covering the entire cycle of creating three-dimensional graphics using the casting technique. The author of this guide is F. Permadi.
Using the materials from this article requires a good command of the JavaScript language, familiarity with the HTML5 canvas element, and school knowledge of trigonometry. Some parts of the project are quite fully disassembled in the article. Just keep in mind that my explanations of individual sections of the code cannot cover all aspects. To get a complete picture of the project and to be able to read comments on each section of the code, I recommend downloading the archive to your computer ...
Test the final result of the author. .
From translator
For those who are not familiar with reykasting: the peculiarity of this method is that the effect of three-dimensional space is created not by special tools built into the browser, as is the case with CSS 3D transforms, but by the programming language itself and HTML5 features. The entire mathematical apparatus for representing two-dimensional markup language objects in the form of pseudo-three-dimensional objects is implemented directly in the code. The simplest engine usually contains the implementation of three basic methods necessary for building 3D: rotation, translation, translation, intersection.
Almost any basic implementation can be conditionally divided into three blocks: 1) camera control - rotation, movement. 2) beam casting - determining the distance from the camera to each pixel (or a larger sector, depends on the implementation) falling into the camera’s field of view. 3) rendering of the space in the field of view of the camera.
In fact, rekasting allows you to create a full-fledged 3D engine from scratch, without using ready-made libraries. In a simple case, an implementation may take 200-300 lines of code, such as in the engine from this article: “First-person game engine in 256 lines of code.” By the way, this article is also a quick guide to rakecasting.
If you are interested in the method of rakasting and there is a desire to understand it using a simple example, then, it seems to me, it is worth starting the acquaintance with the most simple project. Of all the JavaScript implementations, I managed to find about ten, the simplest - without textures, additional objects, and even without a 2D map output - you can look at the github at this link. Below is a screenshot from the project:
Instead of a conclusion. About the benefits of Ray casting for the web
- An essential feature of the method is that the map can be of any size, and this will not affect performance in any way, since in the rakasting method the speed of rendering the image depends on the number of rays cast, respectively, the smaller the area of the window with the output of the constructed world, the faster the engine will work. In other words, the ray-throwing function always processes only one hard-set section of space (it examines a certain number of points in the array relative to the position of the player).
- From the previous paragraph it follows the possibility of creating
frame caching based on an attempt to predict where a player can move relative to his current location. - Building any space does not require 3D skills, as it can be done by simply editing an array with a map. At the same time, it should be noted that an array of space in the code, with careful formatting, in itself looks like a map on top.
Those. if you need to show the floor plan in perspective, there is no need to load any massive 3D editor, just open a text one and
outline the plan manually or scan / recognize the floor plan in a certain format. - Well-organized transitions between cards allow you to create the effect of a large space, so in fact there are no restrictions on either the size of the card or the number of cards for one project.
PS
About more serious project in which Ray casting was applied, it is possible to get acquainted in this article on Habr.
An article that led me to search for material about this method.