のぐそんブログ

暗いおじさんがシコシコ書くブログです。

Three.js

フラグメントシェーダーで複数の円をグルグル回転させる

メタボールをやってみたいので、 まずは、フラグメントシェーダーで、複数の円をグルグル回転させてみたいと思います。 #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 THREE.DataTextureを利用することで、配列データからテクスチャを作ることができます。 GPGPUなどでテクスチャをデータの格納場所として使う場合に使えそうなので、少し調べてみたいと思います。 基本的な使い方 new THREE.DataTexture( d…

GLSLでゆらゆらテクスチャ

ゆらゆらテクスチャをやってみたいと思います。 最終目標はこちらですが、まずは簡単なのからやっていきたいと思います。

メタボールっぽい演出

メタボールっぽい演出。 【サンプル】 こんな感じになります。

Three.jsでグリッチの練習メモ

グリッチの練習メモです。

THREE.jsのEffectComposerでオリジナルのポストプロセスをやってみる

前回「THREE.jsでオリジナルのポストプロセスをやってみる」と題しましてポストプロセスについての記事を書きました。 よくよく調べると、THREE.jsにはポストプロセスを行う仕組み自体が用意されており、それを利用すればオリジナルのポストプロセスも簡単に…

THREE.jsでオリジナルのポストプロセスをやってみる

前回オフスクリーンレンダリングについて書きました。 今回は、オフスクリーンレンダリングを利用して、ポストプロセスをやってみたいと思います。 ポストプロセスを簡単に言うと、作成済みのシーンに対して、あとから何か処理を行うことです。 今回は以下の…

THREE.jsでオフスクリーンレンダリングを試してみる為のメモ

オフスクリーンレンダリングに挑戦してみたいと思います。 オフスクリーンレンダリングとは、画面には表示せずにメモリ空間上に描画することです。 この一時的に描画されるメモリ空間のことを「フレームバッファ」と言います。 今回は以下の図のように、オフ…

フラグメントシェーダーでグリッチをやりたいけど上手くいかない

グリッチ(glitch)ぽい表現 フラグメントシェーダーを利用して、デジタル表現でよくあるグリッチに挑戦したいと思います。 理想は↓です。ただし私ではこの完成度は無理ですが、まずは挑戦してみます。 https://codepen.io/ykob/pen/GmEzoQ

Three.jsで画面全体に板ポリゴンを貼る

板ポリゴンを作成して、テクスチャを貼ってみたいと思います。 まずは、画面全体に板ポリゴンを貼ってみたいと思います。 Geometryクラスと、BufferGeometryクラスで少し書き方が異なるみたいだったので、両方書いておきます。

フラグメントシェーダーでモノクロエフェクトするためのメモ

フラグメントシェーダーでモノクロエフェクトをやってみます。 このエフェクトは比較的分かりやすかったです。 下の画像をモノクロ表示してみたいと思います。

Three.jsを使ってuniformsでテクスチャを渡すメモ

Three.jsを使ってテクスチャを読み込むのはとても簡単です。 THREE.jsのテクスチャについて調べる let textuerLoader = new THREE.TextureLoader(); let mat = new THREE.MeshPhongMaterial(); let geom = new THREE.BoxGeometry(3, 3, 3); textuerLoader.lo…

GLSLでフラグメントシェーダーを書く場合のメモ

フラグメントシェーダーを使った描画についてのメモです。 ちなみに頂点シェーダーを考慮すると難易度が高くなって私には理解できなくなるので、一旦下記のツールを使う前提で書いていきます。 http://glslsandbox.com/

jsでの音データの使い方メモ

音データを使って、ビジュアル表現をしたかったので音データのとり方を調べました。

アルファブレンディングやってみる

アルファブレンディングとはその名の通り、不透明表示のことです。 ポイントはmaterialのtransparentをtrueにすることです。 GLSLでテクスチャを貼っているので、フラグメントシェーダー側で透明度を設定します。 ※GLSLでテクスチャを貼っている意味はあまり…

glslでテクスチャをはる

glsl側でテクスチャを貼ってみたいと思います。 画像はTHREE.ImageUtils.loadTextureで読み込んでuniform変数として渡します。 渡した画像は、glslのビルドイン関数であるtexture2Dを利用します。 テクスチャの型はsampler2Dを利用します。 precision medium…

法線でライトを表現する

WebGLでライトを実装する為に最低限理解しておく必要基礎知識でライトと法線の関係について記載しましたが、実際に法線をつかってライトを表現してみようと思います。 ライトベクトル ライトの向きのことをライトベクトルと言います。 ライトと記載していま…

THREE.jsでフラグメントシェーダを使ってみるの基礎基礎メモ1

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

THREE.GPUParticleSystemを使ってみる

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

THREE.BufferGeometryの使い方を調べる

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

Three.jsでポストプロセスを試してみる

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

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…

THREE.jsでの環境マッピング

環境マッピングとは 環境マッピングとは、オブジェクトの周りの環境を、オブジェクトの表面に映り込ませるたり、屈折させたりすることです。 サングラスに周りの風景が映り込むイメージです。 環境マッピングの準備 よりリアルに環境マッピングを表現するた…

PLYファイルを使ってパーティクルを作成

PLYファイルからパーティクルシステムを作成してみます。 PLYファイルとは PLY(Polygon Model File)3Dファイル形式の一つです。 ポリゴンファイルのフォーマットで、3Dスキャナから得られた情報を保持するためによく利用されます。 PLYファイルをTHREE.jsで…

Three.jsでGLSLを触るための基礎基礎メモ

GLSLの基礎 「WebGLを使って三角形を描画する為の基礎知識」でも少しかきましたが、GLSLは頂点シェーダーと、フラグメントシェーダーがあります。 頂点シェーダーではgl_Positionという組み込み変数に頂点データを必ず渡す必要があります。 フラグメントシェ…

Three.jsでパーティクルを作ろうと思った際に調べたこと

Three.jsでパーティクルをつくるにはどうすればいいのか調べてみました。

Three.jsで頂点座標を指定して三角形を描く

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

THREE.Sceneについて少し調べる

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

Three.jsの使いそうなマテリアル

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

Three.jsのカメラについて

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