Three-dimensional graphics can be implemented in the browser not only using WebGL or
libraries based on WebGL , but also by simple rendering on a 2D canvas using the functions of HTML5 Canvas for this .
There are many books, articles, and information on the Internet on how to use
HTML5 Canvas to display drawings, graphs, and even animation 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 a three-dimensional computer game is being created, for example a 3D shooter, then the developers try to make it as realistic as possible and use graphics accelerators for this. In this case, it will not be possible to do without the appropriate software tools. For such games in the browser, it makes sense to use WebGL and Three.js . Most importantly, with the help of shaders designed for these software tools, you can achieve realistic lighting of the scene and objects on the scene.
But if you just need to show a three-dimensional object from all sides, then 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.
On the Canvas and Geometry site, I consistently and in great detail explain how using exclusively HTML5 Canvas, you can create images of 3D polyhedron models.
Three.js , 30 () Three.js
3D- three.js. HTML5 Canvas. . .
— three.js . .
, -:
- , ..
- .
- .
- ( three.js RayCaster').
- .
- . / .
- 3D- . three.js .
- .
- .
- .
WebGL/three.js — Z-.
Canvas ( ) .
online- JavaScript.
, prototype WebGeometry, . prototype. JavaScript. «», . .
C/C++ JavaScript .
, ( Chrome Firefox) Notepad++ JavaScript — —
.
, .
.
( ) Visual Studio.
, ,
Visul C++ . Chrome Firefox .
JavaScript React, Angular, Vue.
. . ( ) ES6.
.
online- . , , , ( ) .
The
canvas2D library was made to render the models and size them onto the canvas ,
which is actually a small wrapper around HTML5 Canvas functions .
At the same time, the functions included in the canvas2D library are made in such a way that they are most convenient to use together with the functions included in the WebGeometry library
.
WebGeometry. , , 3D- . , . WebGeometry
, , .
. WebGeometry . If you need to perform such transformations, then the corresponding functions can be found, if you use three.js , then in this library itself or in the popular glMatrix library
However, these two mentioned libraries have practically no functions for solving analytical geometry problems.
Therefore, the library of functions WebGeometry was made . The
Sylvester library has some (but not all required) such functions and therefore I decided to make a library completely suitable for my tasks from scratch based on the existing functions in C / C ++ .
, three.js.
OpenGL OpenGL .
, , .
, ,
:
Three.js 16 WebGeometry ( ), three.js.
Diamond Cuts 7 WebGeometry three.js. .
three.js.
Diamond Cuts collection in environments
Diamond Cuts with Dispersion Light .
three.js.
Visual C++ . (three.js API WebGL).
Pages, you can go to the pages of this site which contain 36 models of various cuts.
The display on these pages is done using the pure WebGL API .
Also from here you can download the exe- file of my program for Windows made in C / C ++
and OpenGL for viewing cut models. DLL files of several models are downloaded from the same page.
- On pages
Shine on You Crazy Diamond! on the same site, you canmove around the stageto the music of Pink Floyd and other music groups and look at the cut models. Motion control - mouse and keyboard (←, →, ↑, ↓, <,>) as in computer games. The display is done using three.js .
In my opinion, it turned out very interesting. Don't forget to turn on the sound when watching!
I hope that my sites will help those who study and use 3D graphics and computational geometry. In addition to browsing sites, you can go to my repository .
Thanks everyone for watching my article!