Three-dimensional graphics can be implemented in a browser not only using WebGL or
libraries created on the basis of WebGL , but also by simple rendering on a 2D canvas using the HTML5 Canvas functions for this.


There are many books, articles, and online information on how to use canvas
HTML5 Canvas for displaying graphics, graphics, and even animations in some browser games.

However, the possibility of directly using the canvas to display three-dimensional objects is almost never considered.


Let’s dwell on this in more detail.

If you are creating a three-dimensional computer game, for example, a 3D shooter, then the developers are trying to make it as realistic as possible and use graphics accelerators. In this case, it will not be possible to do without appropriate software tools. For such games, the browser makes direct sense to use WebGL and Three.js . Most importantly, with the help of shaders intended for these software tools, you can realistically illuminate the scene and objects on the scene.


But if you just want to show a three-dimensional object from all sides, you can do without WebGL and shaders . For example, some CAD/CAM programs are intended only for modeling the shape of objects and do not involve the use of realistic lighting.

At Canvas and Geometry , I explain in a consistent and very detailed way how to use exclusively HTML5 Canvas you can create images of 3D models of polyhedra.


Six months ago, my article was published Three.js and geometry , which belonged to a series of 30 of chapters (lessons) on the website of the same name Three.js and geometry where
I described the display of 3D models of polyhedra using three.js . Now all the models on the new site are created using HTML5 Canvas only. However, the calculation of the coordinates of the vertices of the models on both sites is done exactly the same. The only difference is the way the image is displayed on the screen.


In principle, these two sites can be considered as a single training course in which
We consider two ways to display the same models on a canvas - using the three.js library and displaying models on a canvas without using this library. You can see what the program for displaying the same polyhedron looks like by going in turn or simultaneously on both sites.

I will list some of the features that are available on both sites, but they are made differently on them:


  • You can set almost all the model parameters that determine the dimensions of its individual parts, the inclination of the model’s faces, etc.
  • View model vertex numbering.
  • Scaling the model.
  • The ability to select any face of the model with the mouse (when using three.js this is done using RayCaster 'a).
  • The ability to view the coordinates of the any point located on the surface of the model.
  • Validation of the constructed model. If you wish, you can turn off/on the verification of the correctness of building the model.
  • It is shown how on the 3D -model to display the dimensions of its parts using extension and dimension lines. On a site made using three.js this feature is missing.
  • Simulation of simple lighting.
  • Sets the color and brightness of the light incident on the model.
  • Set the transparency of the model.

If you are using WebGL/three.js , the programmer may not have to worry about deleting invisible lines - this is done automatically using the Z buffer.

The site Canvas and geometry shows how you can display only the outer (directed towards the observer) faces of the model in two different ways.


When creating online programs located on the site, only the simplest constructions of the JavaScript language were used.

The most complex construction of this language that is used on sites is the prototype in my WebGeometry library, which is used to perform geometric calculations. Although it would be possible, in principle, to create this library without the prototype . At the very beginning of my work on displaying 3D models in a browser, I was very unusual to use JavaScript . It seemed to me “wild” that there are no predefined data types in the language. And some of its other features also seemed very strange.

For many years I programmed in C/C++ and therefore at first JavaScript seemed to me a flawed language.

But after a while it dawned on me that having only a browser (I mostly use Chrome and sometimes Firefox ) and Notepad ++ work on JavaScript is very convenient - the result is visible immediately - especially the small ones
graphic programs.


If you don’t prejudice biased to the features of the language, then it turns out to be quite comfortable.

Therefore, now I have changed my attitude to this language in a much better direction for it.
Sometimes it’s true that I longingly recall the wonderful (this is my personal opinion) debugger in Visual Studio .

Therefore, when you need to find a complex error in geometric calculations,
I am referring to Visul C++ and this debugger. But the debuggers in Chrome and Firefox also make the best impression.


Now for creating large programs on JavaScript all the time there are new tools such as React , Angular , Vue .

Mastering these programs requires considerable effort. Fortunately, you can do without them to create simple graphics programs. I have not yet had the need to use the new (at the moment, no longer new) features of ES6 .


However, to understand how these programs work, some experience is required in using mouse event handlers that occur when it moves around the canvas and when you press its keys.

All online programs are made as interactive as possible. Using the mouse, you can not only select any face of the model, but also see the coordinates of the model at any point on it, the coordinates of the points on the canvas itself, rotate the model and (on one page of the site) scale the model with the mouse wheel.


A library was created to draw models and apply their sizes to the canvas
canvas2D ,
which is actually a small wrapper around the HTML5 Canvas functions.

At the same time, the functions included in the canvas2D library are made in such a way that it is most convenient to use them together with the functions included in the library
WebGeometry

, designed for geometric calculations on the plane and in space.

A few words about using the WebGeometry library. This library is designed so that the programmer who creates the 3D model from scratch does not think about how to solve the next task of analytic geometry on the plane and in space for lines and planes. Basically, to solve such problems, you need good knowledge of working with matrices, and if you do not have the corresponding ready-made functions, then you will have additional problems. There are no functions in the WebGeometry library
for perspective transformations in space, which are performed using not three-dimensional, but four-dimensional matrices.

Perspective transformations are not required when creating three-dimensional models. Therefore, they are not included in the WebGeometry library. If you need to perform such transformations, the corresponding functions can be found; if you use three.js , then in this library itself or in the popular library glMatrix

.

However, in these two mentioned libraries there are practically no functions for solving problems of analytic geometry.

Therefore, the library of functions WebGeometry was made.In the library
Sylvester there are some (but not all required) such functions and therefore I decided to make the library fully suitable for my tasks from scratch based on pre-existing C/C++ functions.

For myself, I concluded that a simple rendering of three-dimensional models without realistic lighting on the canvas can be done quite simply and much easier than using three.js .

In my opinion, this can be compared as rendering a three-dimensional model using OpenGL with a fixed pipeline, rendering the same model and using OpenGL with a programmable pipeline.

For example, in the second case, you have to do triangulation of polygons, which greatly complicates the programming process.


Those who are interested in this site may find some interesting
other pages of my sites related to the display of models on a computer screen:


On the site Three.js and geometry all 16 polyhedron models are calculated using the WebGeometry library (as well as on the current site), but they are displayed on the canvas using three.js .


On the site Diamond Cuts of the 7 polyhedron model also Calculated using the WebGeometry library and displayed on the canvas using three.js . In this case, several types of shaders and cubic textures are used. All programs on this site are provided with detailed comments, and therefore you can see on their example how
shaders are embedded in three.js .


On the pages Diamond Cuts collection in environments
and Diamond Cuts with Dispersion Light you can find many models of different polyhedra rendered using shaders and cubic textures.

Displaying models from these pages using three.js .

When determining the coordinates of the vertices of all these models, the coordinates were previously calculated on Visual C++ and their values ​​were written to the files . These files with the coordinate values ​​stored in them are used in the programs for displaying models on the screen ( three.js and WebGL API ).

  • By link

Pages you can go to the pages of this site on which 36 patterns of various cuts.

These pages are displayed using the pure WebGL API .
Also from here you can download the exe file of my program under Windows made in C/C++
and OpenGL to view cut models. DLL files of several models are downloaded from the same page.

  • On the pages

Shine on You Crazy Diamond! of the same site you can listen to music Pink Floyd and other music groups to move around the stage and view cut models. Motion control - mouse and keyboard (←, →, ↑, ↓, & lt ;, >) as in computer games. Display is done using three.js .
In my opinion it turned out very interesting. Do not forget to turn on the sound when viewing!

I hope that my sites will help those who study and use three-dimensional graphics and computational geometry. In addition to viewing sites, you can go to my repository .

Thanks everyone for watching my article!

.

Source