javascript
THREE.BufferGeometryの使い方の基礎的な部分をまとめたいと思います。 THREE.BufferGeometryとは var geometry = new THREE.BufferGeometry(); BufferGeometryはピュアなWebGLのAPIを扱うようにGeometryを作成できます。 BufferGeometryは作成時は何も情報…
THREE.jsにはポストプロセス用のフィルターが用意されている。 使い方を調べてみる。 ポストプロセスはオブジェクトに対して適応するのではなくシーン全体に対して適応する。
基本的なテクスチャの貼り方 一番シンプルな貼り方は下記になります。 let textuerLoader = new THREE.TextureLoader(); let mat = new THREE.MeshPhongMaterial(); let geom = new THREE.BoxGeometry(3, 3, 3); textuerLoader.load('images/n.jpg', functio…
環境マッピングとは 環境マッピングとは、オブジェクトの周りの環境を、オブジェクトの表面に映り込ませるたり、屈折させたりすることです。 サングラスに周りの風景が映り込むイメージです。 環境マッピングの準備 よりリアルに環境マッピングを表現するた…
WebGLでの頂点をどのように描画するかの指定をプリミティブタイプで行います。 頂点を3つ使ってポリゴンを描くか、頂点を2つ使って線を描くか、頂点を1つ使って点を描くかなどの指定することができます。 基礎的な部分ですが、種類が沢山あるのでまとめてお…
PLYファイルからパーティクルシステムを作成してみます。 PLYファイルとは PLY(Polygon Model File)3Dファイル形式の一つです。 ポリゴンファイルのフォーマットで、3Dスキャナから得られた情報を保持するためによく利用されます。 PLYファイルをTHREE.jsで…
今回はWebGLでライトを実装する為に最低限理解しておく必要があることについてまとめました。 法線 法線とは向きを表すベクトルです。法線ベクトルと呼ぶ場合のあります。
GLSLの基礎 「WebGLを使って三角形を描画する為の基礎知識」でも少しかきましたが、GLSLは頂点シェーダーと、フラグメントシェーダーがあります。 頂点シェーダーではgl_Positionという組み込み変数に頂点データを必ず渡す必要があります。 フラグメントシェ…
WebGLでの行列による変換処理を理解する上で、最低限しっていないといけない言葉について書きたいと思います。 下記を参考にさせていただきました。 3D 描画の基礎知識
Three.jsでパーティクルをつくるにはどうすればいいのか調べてみました。
3Dを使う上で必須の数学の知識があります。 まずは基礎からやっていこうと思います。
AR.jsがリリースされたので、導入手順をメモしました。 わからないパラメータや処理があり、わかったら追記していこうとおもっています。 手順 AR.js導入手順。 ArToolkitSourceを作成 ArToolkitContextを作成 ArMarkerControlsを作成 ARで表示するオブジェ…
カメラの定義方法 カメラの基本的な定義方法は下記。 ※レンダーとシーンの作成は割愛
three.jsのライトについて three.jsでは他のオブジェクトとと同じようにライトも追加することができます。 【ライト追加前】 【ライト追加後】 上記のように、ライトは明るさもですが、影の描画に大きく影響します。
