フラグメントシェーダを使って色を変更してみたいと思います。 基礎の復習 ベースとなるコードです。 js window.onload = () => { let windowWidth = window.innerWidth; let windowHeight = window.innerHeight; // rendererの作成 let renderer = new THRE…

CHOPを使ってみる CHOPは動きを付けるためのオペレータです。 Channelという値を持つ枠を、生成したり加工したりします。 1つのCHOPで複数のChannelを通す事ができます。

パーティクルを作成する際に、new THREE.ParticleSystemクラスを使おうとすると、下記の警告がでました。 THREE.ParticleSystem has been renamed to THREE.Points. パーティクルを作成する場合はTHREE.Pointsクラスを使う必要があるみたいです。 しかし、最…

SOPで作成したネットワークをレンダリングしてみる SOPで作成した3Dオブジェクト群（ネットワーク）をレンダリングしてみます。

TouchDesignerとは TouchDesignerは、オペレーターと呼ばれるプログラムのモジュールをつなげることで、コードを書かなくてもビジュアルプログラミングができる開発環境です。 表現自体は色々できるみたいなのですが、リアルタイムで操作する映像表現などに…

タイポグラフィのメモ 文字はなんとなく感覚で調整していることが多いので、 参考に少し調べてみました。

THREE.BufferGeometryの使い方の基礎的な部分をまとめたいと思います。 THREE.BufferGeometryとは var geometry = new THREE.BufferGeometry(); BufferGeometryはピュアなWebGLのAPIを扱うようにGeometryを作成できます。 BufferGeometryは作成時は何も情報…

THREE.jsにはポストプロセス用のフィルターが用意されている。 使い方を調べてみる。 ポストプロセスはオブジェクトに対して適応するのではなくシーン全体に対して適応する。

Three.jsでは、ビルドインクラスに沢山のGeometry用のクラスが用意されています。 ただ、そのままの形状を使わず、少し頂点座標を動かしてみようと思います。

UVとはポリゴンにテクスチャを貼るためのテクスチャの座標のことです。 UV座標はX、YのVector2(2次元)の情報となります。 主にテクスチャの特定の位置を表示したい場合などに使用します。

基本的なテクスチャの貼り方 一番シンプルな貼り方は下記になります。 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でパーティクルをつくるにはどうすればいいのか調べてみました。

以前、「WebGLを使って三角形を描画する為の基礎知識」の記事をかきましたが、WebGLのラッパーライブラリであるTHREE.jsでも同じようなことができるのでメモしておきます。 当然ですが、ナマのWebGLを触るよりより簡単に書けるようになっています。

サーバー側の知識が限りなくゼロに近いオジサンですが、 expressを使って、まずはindex.htmlを表示だけしてみようと思います。

expressとSocket.ioを使う サーバー側の知識が限りなく0に近いオジサンですが、 Socket.ioを使って、サーバーとクライアントで双方向通信をやってみます。

THREE.Sceneは、オブジェクトを配置する基盤なのですが、THREE.Scene.addしか使ったことがなかったので、他にどんなことができるか調べました。

WebGLを使って三角形を描画する為の基礎知識を学びたいと思います。 ちなみに、こちらに記載されている内容だけでは三角形は描画できません。

私は典型的なマイナス思考型の人間です。 いつからこんなにマイナス思考になったのかわかりませんが、 少なくとも学生時代から劣等感が強い人間だったと思います。 世間のキラキラした人達は「根拠のない自信」が大事だと、白い歯を見せながら言います。 私…

行列とは wikipediaで調べたところ行列とは以下のことらしいです。 数学の線型代数学周辺分野における行列（ぎょうれつ、英: matrix）は、数や記号や式などを行と列に沿って矩形状に配列したものである。行の数と列の数が同じ行列は行列の和（英語版）が成分…

Three.jsで使いそうなマテリアルです。 MeshBasicMaterial 面用のマテリアル。 陰がつかないので塗りつぶした状態になる。 new THREE.MeshBasicMaterial({color: 0x66B6FF});

3Dを使う上で必須の数学の知識があります。 まずは基礎からやっていこうと思います。

AR.jsがリリースされたので、導入手順をメモしました。 わからないパラメータや処理があり、わかったら追記していこうとおもっています。 手順 AR.js導入手順。 ArToolkitSourceを作成 ArToolkitContextを作成 ArMarkerControlsを作成 ARで表示するオブジェ…

カメラの定義方法 カメラの基本的な定義方法は下記。 ※レンダーとシーンの作成は割愛

SELECT文だけの修飾 DISTINCT 検索結果の中で重複した行を取り除いてくれます。 用途としては、データの種類を取得する場合などに使用します。 SELECT DISTINCT 列名 FROM テーブル名