のぐそんブログ

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

トゲトゲの球体を作る

Sphere SOPの頂点を利用してトゲトゲの球体を作ります。 仕上がりはこちらです。 sample from nogson on Vimeo. ゆらゆらする球体を作る まずは、ゆらゆらする球体を作ります。 これはよくある、Sphere SOP + Noise SOPの組み合わせで作ります。 Transform S…

パーティクルで花火のような演出

TouchDesigner Study WeekendというTouchDesignerの勉強会で学んだことのまとめです。 TouchDesignerは私のような初心者には、高機能すぎて何をしたらよいのかわからなくなることが多いのでこの勉強会は貴重だと思っています。 今回の完成イメージはこちらで…

マウスにパーティクルが追従するような演出

はじめに この記事は、TouchDesigner Study WeekendというTouchDesignerの勉強会で学んだことのまとめです。 TouchDesignerは私のような初心者は高機能すぎて、何をしたらよいのかわからなくなることが多いのでこの勉強会は貴重だと思っています。 完成イメ…

Cache TOPを利用して版ずれのような演出をする

Cache TOPを利用して、印刷の版ずれのような表現をしてみたいと思います。 版ずれさせる3Dオブジェクトを準備 まずは演出の対象となる、3Dのオブジェクトと、カメラ、ライト、ジオメトリを用意します。 noise SOPを挟んでいるのは、Geometoryに動きを出すた…

最近覚えたTouchDesignerのちょっとしたメモ2

最近覚えたTouchDesignerのちょっとしたメモです。 自分用のメモなのであまり参考にはならないと思います。

TouchDesignerでGLSLを使う為の基礎の基礎知識

TouchDesignerでGLSLを使う為の基礎の基礎知識です。

最近覚えたTouchDesignerのちょっとしたメモ1

最近覚えたTouchDesignerのちょっとしたメモです。 自分用のメモなのであまり参考にはならないと思います。

3Dオブジェクトの頂点情報を取得

3Dオブジェクトの頂点座標をデータとして取得する際は、「SOP to CHOP」を利用しました。 だだし、取得できるのはX,Y,Zの座標データのみでした。 ちなみにここでは、「Sphere SOP」を利用してます。

3Dオブジェクトの頂点情報をデータとして利用する

TouchDesignerで3Dオブジェクトから頂点座標を抜き出す 3Dオブジェクトから頂点座標を抜き出して、データとして利用する方法のメモです。 ①SOPから、好きな3Dオブジェクトを配置。 ②オペレーターの右下にある「 + 」ボタンを押す。 ③右クリックでコンテキス…

GPGPUがまったくわからないのでGPUComputationRenderer.jsをまず調べてみるメモ

GPGPU用のヘルパーライブラリであるGPUComputationRenderer.jsの使い方を調べてみました。 GPGPUが難しいので上手く説明できておらず、よくわからない文章になってしまっています。 あまり参考にならないかもしれません。 こちらの「Three.jsのGPGPUのサンプ…

TouchDesignerで使いそうなデータ制御の基礎基礎メモ1

あくまで自分用ですが、使いそうだけど、すぐ忘れてしまいそうな基本的なデータの制御です。 一定の時間でカウントアップする 特定の処理をループしたい場合など、一定時間でカウントアップした値を作成したい場合はLFO CHOPを利用します。 正の整数だけ利用…

THREE.jsでグネグネしたメタボールを作成する

こちらを目指して、グネグネしたメタボール(呼び方がメタボールであってるのかわかりません)を作ってみたいと思い挑戦してみました。 結果としては、実現することが出来ませんでした。。。 実際に作成できたのはこちらです。 難しい。 JS global.THREE = r…

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

メタボールをやってみたいので、 まずは、フラグメントシェーダーで、複数の円をグルグル回転させてみたいと思います。 #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…

webpack-dev-serverを使ってみる

webpack-dev-server 開発用サーバを立てることができるモジュールです。 詳しくは公式のドキュメントを見てみてください。 手順 モジュールをインストール。 npm install --save-dev webpack-dev-server package.jsonにscriptを追加。 "scripts": { "start":…

GLSLでゆらゆらテクスチャ

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

2018年の目標

新年を迎えて、遅くなりましたが2017年の振り返りと、2018年の目標を立てたいと思います。 あまり目標を文字に起こしたことがなかったので、今年はブログに書いておくことにします。

メタボールっぽい演出

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

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

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

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

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

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

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

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

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

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

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

Variable Font について調べる

Variable Font (バリアブルフォント)とは アドビとマクロソフト、グーグル、そしてアップルが共同で開発を進めてきたテクノロジー。 1つのフォントで複数の役割を担うフォント。 1つのフォントで複数フォントを表示できるが、ファイルサイズはそれほど大き…

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

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

セルフユーザービリティテストのメモ

本日UXDTさん主催の「セルフユーザビリティテスト検定講座」に参加してきました。 参加者は30人ほどいて、職種もデザイナーや、エンジニア、セールス、エディタなど職種も様々でした。 はじめは座学でセルフユーザービリティの概要を聞き、最後に実際にワー…

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

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

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…