3次元グラフィックスは、WebGLまたはWebGL
ベースのライブラリを使用するだけでなく、HTML5 Canvas関数を使用して2Dキャンバスに簡単にレンダリングすることで、ブラウザに実装できます。
HTML5 Canvasを使用して、一部のブラウザーゲームで描画、グラフ、さらにはアニメーションを表示する方法については、インターネット上に多くの本、記事、および情報があります。
ただし、キャンバスを直接使用して3次元オブジェクトを表示する可能性はほとんど考慮されていません。
これについて詳しく説明します。3Dシューティング
ゲームなどの3次元コンピューターゲームを作成する場合、開発者はそれを可能な限り現実的なものにし、グラフィックアクセラレーターを使用しようとします。この場合、適切なソフトウェアツールがないと実行できません。このようなブラウザーのゲームでは、WebGLとThree.jsを使用するのが理にかなっています。最も重要なのは、これらのソフトウェアツール用に設計されたシェーダーの助けを借りて、シーンとシーン上のオブジェクトのリアルなライティングを実現できることです。
ただし、すべての側面から3次元オブジェクトを表示するだけの場合は、WebGLとシェーダーなしで実行できます。たとえば、一部のCAD / CAMプログラムは、オブジェクトの形状をモデル化することのみを目的としており、現実的な照明の使用を含みません。Canvas and Geometryの
Webサイトで、HTML5 Canvasだけを使用して、3D多面体モデルの画像を作成する方法を一貫して詳細に説明しています。
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- . , , , ( ) .
canvas2Dライブラリは、モデルをレンダリングしてキャンバスにサイズ変更するために作成されました。
これは、実際にはHTML5 Canvas関数の小さなラッパーです。
同時に、canvas2Dライブラリに含まれている関数は、WebGeometryライブラリに含まれている関数と一緒に使用するのに最も便利な方法で作成されています
。
WebGeometry. , , 3D- . , . WebGeometry
, , .
. WebGeometry。このような変換を実行する必要がある場合は、対応する関数が見つかります。three.jsを使用している場合は、このライブラリ自体または一般的なglMatrixライブラリにあります。
ただし、これらの2つのライブラリには、解析ジオメトリの問題を解決するための機能はほとんどありません。
したがって、関数のライブラリWebGeometryが作成されました。
Sylvesterライブラリーにはそのような関数の一部（すべてではない）があるため、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).
ページ、様々なカットの 36モデルが含まれているこのサイトのページに行くことができます。
これらのページの表示は、純粋な WebGL APIを使用して行われます。
また、ここから、 C / C ++ および OpenGLで作成された Windows用の私のプログラムの exeファイルをダウンロードして、カットモデルを表示できます。複数のモデルの DLLファイルが同じページからダウンロードされます。
- ページ上
クレイジーダイヤモンドに輝いてください！同じサイトで、ステージ内をピンクフロイドや他の音楽グループの音楽に移動し、カットモデルを見ることができます。モーションコントロール-マウスとキーボード（←、→、↑、↓、<、>）。コンピュータゲームと同じです。表示は three.jsを使用して行われます。
私の意見では、それは非常に興味深いことがわかりました。見ているときに音を鳴らすことを忘れないでください！
私のサイトが3Dグラフィックスと計算幾何学を研究して使用する人々を助けることを願っています。サイトの閲覧に加えて、私のリポジトリにアクセスできます。
私の記事を見てくれてありがとう！