計算機はCPUやメモリ、電源ユニットやキーボード・マウスといった入力デバイスで構成されている。GPUはグラフィックスを専門に受け持つ、計算機の部品のひとつ。

spinning slices #art #creativecoding #generativeart #trippy #loop #loopgang https://t.co/GexvnSVVJo

ノイズについて良く知らないので今日は勉強させてもらうつもりでやって参りましたが、今はなぜか壇上におります

トランスフォーメーションデザインセンター（XDC）は未来のユーザ体験・事業機会を可視化するデザインストラテジー部門です。

レイマーチングで使える複雑めな距離関数を収集していきます。 球や直方体など単純な図形に関しては以下にまとまっているので、ここでは触れません。 Inigo Quilez :: fractals, computer graphics, mathematics, shaders, demoscene and more Recursive Tetrahedron http://glslsandbox.com/e#55834.0 四面体のIFSによる繰り返しです。最終的に四面体の頂点に対して距離を計算しています。 #define ITERATIONS 8 float deRecursiveTetrahedron(vec3 p, vec3 offset, float scale) { vec4 z = vec4(p, 1.0); for (int i = 0; i < ITERATIONS; i++)

前置き 最近は距離関数の事をSDFと表現することが多く見られるようになりました。以後距離関数をSDFと呼んでいきます。SDFはsigned distance fanctionの略です。 何故、符号付にこだわるかについて軽く書きます。第一に負数が存在しないと法線計算で正しく法線が取れない。もう一点はブーリアン演算のSubtractionが正しく機能しない。Subtractionはmax(-d1,d2)とマイナス距離を必要とするからです。法線計算がちょっとおかしいは許容できてもブーリアン演算の方は許容できません。 SDFはlength()とdot()しか使わないで説明していきます。多少の例外はありますが、その度説明します。length()とdot()だけでSDFが出来るのは不思議でしょうがカラクリがあります。それがfold(折りたたみ)です。これを駆使してプリミティブを作っていきます。 今回説

Please visit my the landing page to find video tutorials on computer graphics and other resources; this page contains only the written tutorials. I write them in my spare time, but I hope you enjoy them despite the errors or imprecisions they might contain. If you do and feel like it, you can support this work through Patreon or PayPal. Lastly, all code snippets you'll find are under the MIT licen

今夜はアニメ「正解するカド」の最終回ですね。 フラクタル図形（カド）や折り紙（ワム）が重要な要素になっていて、個人的にとても刺さるアニメでした。 最終回は楽しみですが、今日で終わってしまうと思うと寂しくも感じます。 さて、レイマーチング（スフィアトレーシング）は「カド」のようなフラクタル図形の描画がとても得意です。 そこで、WebGLによるレイマーチングでカドのレンダリングに挑戦しました！！ レイマーチングでカド(MandelBox)を描画した結果です。 次のリンクからブラウザ上から動かすこともできます。 http://gam0022.net/webgl/#raymarching_kado PauseをOFFにすると、カドがアニメーションします（負荷注意）。 描画の負荷が重たすぎる場合には、Pixel Ratioを1/2xか1/4xにしてください。 解説 制作における工夫点や参考資料を紹介

~ この記事はTech KAYAC Advent Calendar 2020の18日目の記事になります ~ こんにちは！クライアントワークチーム・フロントエンドエンジニアの深澤です。web や unity の実装を担当しています。 今日は three.js で soft particle （ソフトパーティクル）を実装する方法を紹介していきたいと思います。 ソフトパーティクルを使って、霧のような雰囲気の中をキツネが駆けるシーンを作ってみました。 この動作デモはこちらから、動作デモのソースはこちらのリポジトリからご覧いただくことができます。 ソフトパーティクルについて ソフトパーティクルとは 特徴 実装方針 three.jsでの実装 JavaScript GLSL 改善点 霧の表現 最後に ソフトパーティクルについて ソフトパーティクルとは おおまかに一言でまとめると「深度値の比較をして透過率

GLSLで物理ベースシェーディングを試すために、いろいろなBRDFを実装してみました。 サンプルを以下においておきました。マクロで使用するBRDFを変更することができます。 http://glslsandbox.com/e#54592.0 マウス位置のx方向でroughnessパラメータを、y方向でmetallicパラメータを変更することができます。 下準備 BRDFを定義する際に使用する変数です。 \begin{eqnarray} \rho_{d}&:& 拡散リフレクタンス\\ \rho_{s}&:& 鏡面リフレクタンス\\ \vec{n}&:& 法線(normal)ベクトル\\ \vec{v}&:& 視線(view)ベクトル\\ \vec{l}&:& 光源(light)ベクトル\\ \vec{r}&:& 反射(reflect)ベクトル\\ \vec{h}&:& ハーフ(half)ベクト