Three.js
GLSL Tech Night 2018というイベントで、モーフィングのデモをみて感動したので挑戦してみました。 探してみると参考になる記事が結構沢山ありました。 まずはモーフィングさせるシェイプを描くために必要な距離関数について調べてみました。 距離関数とは …
メタボールをやってみたいので、 まずは、フラグメントシェーダーで、複数の円をグルグル回転させてみたいと思います。 #ifdef GL_ES precision highp float; #endif uniform float time; uniform vec2 resolution; #define XSpeed 1.50 #define YSpeed 1.50…
THREE.DataTexture THREE.DataTextureを利用することで、配列データからテクスチャを作ることができます。 GPGPUなどでテクスチャをデータの格納場所として使う場合に使えそうなので、少し調べてみたいと思います。 基本的な使い方 new THREE.DataTexture( d…
ゆらゆらテクスチャをやってみたいと思います。 最終目標はこちらですが、まずは簡単なのからやっていきたいと思います。
メタボールっぽい演出。 【サンプル】 こんな感じになります。
グリッチの練習メモです。
前回「THREE.jsでオリジナルのポストプロセスをやってみる」と題しましてポストプロセスについての記事を書きました。 よくよく調べると、THREE.jsにはポストプロセスを行う仕組み自体が用意されており、それを利用すればオリジナルのポストプロセスも簡単に…
前回オフスクリーンレンダリングについて書きました。 今回は、オフスクリーンレンダリングを利用して、ポストプロセスをやってみたいと思います。 ポストプロセスを簡単に言うと、作成済みのシーンに対して、あとから何か処理を行うことです。 今回は以下の…
オフスクリーンレンダリングに挑戦してみたいと思います。 オフスクリーンレンダリングとは、画面には表示せずにメモリ空間上に描画することです。 この一時的に描画されるメモリ空間のことを「フレームバッファ」と言います。 今回は以下の図のように、オフ…
グリッチ(glitch)ぽい表現 フラグメントシェーダーを利用して、デジタル表現でよくあるグリッチに挑戦したいと思います。 理想は↓です。ただし私ではこの完成度は無理ですが、まずは挑戦してみます。 https://codepen.io/ykob/pen/GmEzoQ
板ポリゴンを作成して、テクスチャを貼ってみたいと思います。 まずは、画面全体に板ポリゴンを貼ってみたいと思います。 Geometryクラスと、BufferGeometryクラスで少し書き方が異なるみたいだったので、両方書いておきます。
フラグメントシェーダーでモノクロエフェクトをやってみます。 このエフェクトは比較的分かりやすかったです。 下の画像をモノクロ表示してみたいと思います。
Three.jsを使ってテクスチャを読み込むのはとても簡単です。 THREE.jsのテクスチャについて調べる let textuerLoader = new THREE.TextureLoader(); let mat = new THREE.MeshPhongMaterial(); let geom = new THREE.BoxGeometry(3, 3, 3); textuerLoader.lo…
フラグメントシェーダーを使った描画についてのメモです。 ちなみに頂点シェーダーを考慮すると難易度が高くなって私には理解できなくなるので、一旦下記のツールを使う前提で書いていきます。 http://glslsandbox.com/
音データを使って、ビジュアル表現をしたかったので音データのとり方を調べました。
アルファブレンディングとはその名の通り、不透明表示のことです。 ポイントはmaterialのtransparentをtrueにすることです。 GLSLでテクスチャを貼っているので、フラグメントシェーダー側で透明度を設定します。 ※GLSLでテクスチャを貼っている意味はあまり…
glsl側でテクスチャを貼ってみたいと思います。 画像はTHREE.ImageUtils.loadTextureで読み込んでuniform変数として渡します。 渡した画像は、glslのビルドイン関数であるtexture2Dを利用します。 テクスチャの型はsampler2Dを利用します。 precision medium…
WebGLでライトを実装する為に最低限理解しておく必要基礎知識でライトと法線の関係について記載しましたが、実際に法線をつかってライトを表現してみようと思います。 ライトベクトル ライトの向きのことをライトベクトルと言います。 ライトと記載していま…
フラグメントシェーダを使って色を変更してみたいと思います。 基礎の復習 ベースとなるコードです。 js window.onload = () => { let windowWidth = window.innerWidth; let windowHeight = window.innerHeight; // rendererの作成 let renderer = new THRE…
パーティクルを作成する際に、new THREE.ParticleSystemクラスを使おうとすると、下記の警告がでました。 THREE.ParticleSystem has been renamed to THREE.Points. パーティクルを作成する場合はTHREE.Pointsクラスを使う必要があるみたいです。 しかし、最…
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…
環境マッピングとは 環境マッピングとは、オブジェクトの周りの環境を、オブジェクトの表面に映り込ませるたり、屈折させたりすることです。 サングラスに周りの風景が映り込むイメージです。 環境マッピングの準備 よりリアルに環境マッピングを表現するた…
PLYファイルからパーティクルシステムを作成してみます。 PLYファイルとは PLY(Polygon Model File)3Dファイル形式の一つです。 ポリゴンファイルのフォーマットで、3Dスキャナから得られた情報を保持するためによく利用されます。 PLYファイルをTHREE.jsで…
GLSLの基礎 「WebGLを使って三角形を描画する為の基礎知識」でも少しかきましたが、GLSLは頂点シェーダーと、フラグメントシェーダーがあります。 頂点シェーダーではgl_Positionという組み込み変数に頂点データを必ず渡す必要があります。 フラグメントシェ…
Three.jsでパーティクルをつくるにはどうすればいいのか調べてみました。
以前、「WebGLを使って三角形を描画する為の基礎知識」の記事をかきましたが、WebGLのラッパーライブラリであるTHREE.jsでも同じようなことができるのでメモしておきます。 当然ですが、ナマのWebGLを触るよりより簡単に書けるようになっています。
THREE.Sceneは、オブジェクトを配置する基盤なのですが、THREE.Scene.addしか使ったことがなかったので、他にどんなことができるか調べました。
Three.jsで使いそうなマテリアルです。 MeshBasicMaterial 面用のマテリアル。 陰がつかないので塗りつぶした状態になる。 new THREE.MeshBasicMaterial({color: 0x66B6FF});
