のぐそんブログ

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

WebGL

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

グリッチ(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でノイズを使うメモ

フラグメントシェーダをつかってのノイズを作成するためのメモです。

fract関数でタイルレイアウトに挑戦メモ

以前mod関数やfor文でタイルレイアウト挑戦しました。 for文でタイルレイアウトをやってみる 今回はfract関数を使ってタイルレイアウトに挑戦してみたいと思います。 fract関数は引数の値の少数点以下の値を返却してくれます。 mod関数で代替するとしたらmod…

GLSLで行列で回転・縮小をする為のメモ

行列を使った回転と、拡大縮小をやってみます。 sin,cosで円を回転 sin、cosを使って回転してみます。 const float PI = 3.14159265359; void main( void ) { vec2 st = (gl_FragCoord.xy * 2.0 - resolution) /min(resolution.x,resolution.y); float p = 0…

フラグメントシェーダーを使って円を描く

フラグメントシェーダーを使って円を描いてみます。 三平方の定理で円を描く void main( void ) { vec2 st = (gl_FragCoord.xy * 2.0 - resolution) / min(resolution.x, resolution.y); vec4 c = vec4(1.0); if(pow(st.x,2.0) + pow(st.y,2.0) <= 0.5){ c =…

GLSLのstep()を使っての矩形の描き方

閾値を超えたら1.0を返し、超えなかったら0.0を返すstep関数を使って矩形を描画してみたいと思います。

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

GLSLを学習中の自分用のメモです。

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

GLSLを学習中の自分用のメモです。 step関数 step(a,b) a・・・閾値 b・・・チェックされる値 bがa(閾値)より小さい値には全て0.0 を返し、a(閾値)以上の値には 1.0 を返します。 void main() { //0.0 ~ 1.0に正規化する vec2 uv = gl_FragCoord.xy/resoluti…

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

GLSLを使っての簡単な描画表現に挑戦してみます。

HSVを使って色をぬる

フラグメントシェーダーで描画した↓の丸に色を塗りたいと思います。

for文でタイルレイアウトをやってみる

以前の記事でmod関数をつかってもタイルレイアウトを試したのですが、for文のほうが馴染みがあるのでfor文を使ってやってみます。 最終的な完成イメージは↓のような感じです。

フラグメントシェーダーでタイル風レイアウトをやってみる

以前の記事の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…

WebGLでのプリミティブタイプについて

WebGLでの頂点をどのように描画するかの指定をプリミティブタイプで行います。 頂点を3つ使ってポリゴンを描くか、頂点を2つ使って線を描くか、頂点を1つ使って点を描くかなどの指定することができます。 基礎的な部分ですが、種類が沢山あるのでまとめてお…

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

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

WebGLでライトを実装する為に最低限理解しておく必要基礎知識

今回はWebGLでライトを実装する為に最低限理解しておく必要があることについてまとめました。 法線 法線とは向きを表すベクトルです。法線ベクトルと呼ぶ場合のあります。

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

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

WebGLでの行列による変換処理を理解する上で、最低限知る必要がある言葉

WebGLでの行列による変換処理を理解する上で、最低限しっていないといけない言葉について書きたいと思います。 下記を参考にさせていただきました。 3D 描画の基礎知識

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

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

WebGLを使って三角形を描画する為の基礎知識

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

3Dで使う行列の基礎について

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