javascript
あまり無いと思いますが、クロスドメインでベーシック認証をする必要があったので、 忘れないようにメモしておきます。 仕組みとしては以下のイメージ。 クライアント(表示元)にiframeを埋める。 iframeのsrcにベーシック認証先のサーバーに配置したcgiファ…
VuePressのメモです。 VuePressの基礎基礎の続きです。
VuePressとは Vue.jsベースの静的サイトジェネレーターです。 静的サイトジェネレーターとは、Markdownなどで書かれたファイルからHTMLやCSS、JSを生成してくれるツールです。 DBの準備などはいらず、全て静的なファイルになる為、簡単に安心なサイトが作成…
Eslintの設定は基本的には"extends": "eslint:recommended"などを利用しているので、あまり個別に設定することはないのですが、 少し変更するときに毎回調べているのでメモしておこうと思います。 有効・無効の設定 値 内容 0 無効 1 有効(警告) 2 有効(エラ…
カスタムディレクティブ v-xxxのようなオリジナルのディレクティブを作成することができる。 ディレクティブのオプション オプション 内容 bind ディレクティブが対象の要素に紐付いたときに1度だけ実行される inserted 紐ついた要素が挿入されたタイミング…
Code Splitting Vue cliでプロジェクトを作成した場合にrouter.jsのcode-splittingの記述が気になったので調べてみた。
Vueをやりたかったので、調べたことをメモします。 Vue CLI 3になり、ファイル交際やコマンドなども結構変更になっているようです。
AngularJSからAngularへの移行する為に基礎を学びます。 まずは開発環境を構築するためにに雛形ファイルを作成します。 ※ここではangular6.xを使っています。
GPGPU用のヘルパーライブラリであるGPUComputationRenderer.jsの使い方を調べてみました。 GPGPUが難しいので上手く説明できておらず、よくわからない文章になってしまっています。 あまり参考にならないかもしれません。 こちらの「Three.jsのGPGPUのサンプ…
こちらを目指して、グネグネしたメタボール（呼び方がメタボールであってるのかわかりません）を作ってみたいと思い挑戦してみました。 結果としては、実現することが出来ませんでした。。。 実際に作成できたのはこちらです。 難しい。 JS global.THREE = r…
THREE.DataTexture THREE.DataTextureを利用することで、配列データからテクスチャを作ることができます。 GPGPUなどでテクスチャをデータの格納場所として使う場合に使えそうなので、少し調べてみたいと思います。 基本的な使い方 new THREE.DataTexture( d…
webpack-dev-server 開発用サーバを立てることができるモジュールです。 詳しくは公式のドキュメントを見てみてください。 手順 モジュールをインストール。 npm install --save-dev webpack-dev-server package.jsonにscriptを追加。 "scripts": { "start":…
オフスクリーンレンダリングに挑戦してみたいと思います。 オフスクリーンレンダリングとは、画面には表示せずにメモリ空間上に描画することです。 この一時的に描画されるメモリ空間のことを「フレームバッファ」と言います。 今回は以下の図のように、オフ…
フラグメントシェーダをつかってのノイズを作成するためのメモです。
以前mod関数やfor文でタイルレイアウト挑戦しました。 for文でタイルレイアウトをやってみる 今回はfract関数を使ってタイルレイアウトに挑戦してみたいと思います。 fract関数は引数の値の少数点以下の値を返却してくれます。 mod関数で代替するとしたらmod…
行列を使った回転と、拡大縮小をやってみます。 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を学習中の自分用のメモです。
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を使っての簡単な描画表現に挑戦してみます。
フラグメントシェーダーで描画した↓の丸に色を塗りたいと思います。
以前の記事でmod関数をつかってもタイルレイアウトを試したのですが、for文のほうが馴染みがあるのでfor文を使ってやってみます。 最終的な完成イメージは↓のような感じです。
以前の記事のGLSLでフラグメントシェーダーを書く場合のメモで、下記のような描画を試してみました。
フラグメントシェーダーを使った描画についてのメモです。 ちなみに頂点シェーダーを考慮すると難易度が高くなって私には理解できなくなるので、一旦下記のツールを使う前提で書いていきます。 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クラスを使う必要があるみたいです。 しかし、最…
