_shader

シェーダーの勉強日記にする。

_shader

シェーダーの勉強日記にする。

記事一覧

shadertoy

Shadertoyの作例をサイトに移植するときのメモ。 (例えばこちらをサイトに移し替えたいとき。) `mainImage`を`main`にして、始めに`fragCoord`を定義しておく。 (引数…

_shader
4か月前
1

線形補完(マウス)メモ

var pos = { x: 0, y: 0, cx: 0, cy: 0 };window.addEventListener('mousemove', move, false);requestAnimationFrame(render); move()関数 function move(e) { pos.x = …

_shader
4か月前

Shaderを扱う基本(メモ)

ひとまずこれだけ書けばGLSLが表示されるはず、というメモ。 index.html<script id="vs" type="x-shader/x-vertex">の中に頂点シェーダー、<script id="fs" type="x-shade…

_shader
4か月前

Three.jsでShaderを扱う基本(メモ)

ひとまずこれだけ書けばThree.jsを介してGLSLが表示されるはず、というメモ。 index.html<script id="vs" type="x-shader/x-vertex">の中に頂点シェーダー、<script id="f…

_shader
1年前
2

メモ

GLSLを書くときに便利なツールをまとめておくページ。 2023.09.04 追記

_shader
1年前

本腰

読んでるだけじゃまったく捗らないので習ったことをここにメモしてゆく事にした。のちのち長いまとめを書くとき用のメモですね。まずは用語の洗い出し。 メッシュポリゴン…

_shader
1年前
1

進捗

引越して新天地! GLSLを使えそうな案件を手に入れて俄然勉強に力が入るや否や、いい感じなサイトを発見して機運も高まる今日この頃、調子良さげです。 このページ、探し…

_shader
1年前

【noteのエラー報告】
①ログアウトしてもすぐログインしてしまう
②audio再生中に違うタブを開いているとプログレスバーが止まってしまう

_shader
1年前

シェーダー描きたい

この動画で使われてるみたいなシェーダーを自分で描けるようになりたいな。それを自分のWebサイトで使うんだ。ワキワキ

_shader
1年前

依然進捗はないけれど

このページが理解できるようになりたい。 あとブラウザのタブに溜まってる読み物追加。 シェーダーで描画することをお絵描きって言うんだね。 ライブペインティングみた…

_shader
1年前

GLSLを使いたい

Webサイト上でWebGLを使って3Dアニメーションを動かしたいっと思って早幾年、何度も挑戦しては挫折を繰り返し、なんかもうとっても難しいというか、僕がやりたいこと、“や…

_shader
1年前
2

shadertoy

Shadertoyの作例をサイトに移植するときのメモ。
(例えばこちらをサイトに移し替えたいとき。)

`mainImage`を`main`にして、始めに`fragCoord`を定義しておく。
(引数は消してしまっても良い)

void mainImage( out vec4 fragColor, in vec2 fragCoord ) {

void main() { vec2 fragCoor

もっとみる

線形補完(マウス)メモ

var pos = { x: 0, y: 0, cx: 0, cy: 0 };window.addEventListener('mousemove', move, false);requestAnimationFrame(render);

move()関数

function move(e) { pos.x = e.screenX; pos.y = e.screenY;}

線形補完とイージング

もっとみる

Shaderを扱う基本(メモ)

ひとまずこれだけ書けばGLSLが表示されるはず、というメモ。

index.html<script id="vs" type="x-shader/x-vertex">の中に頂点シェーダー、<script id="fs" type="x-shader/x-fragment">の中にフラグメントシェーダーを書く。
<body>の中は<canvas>のみ。

<!DOCTYPE html><html l

もっとみる

Three.jsでShaderを扱う基本(メモ)

ひとまずこれだけ書けばThree.jsを介してGLSLが表示されるはず、というメモ。

index.html<script id="vs" type="x-shader/x-vertex">の中に頂点シェーダー、<script id="fs" type="x-shader/x-fragment">の中にフラグメントシェーダーを書く。
Three.jsの読み込みは公式ドキュメントに倣う。
<body

もっとみる

メモ

GLSLを書くときに便利なツールをまとめておくページ。

2023.09.04 追記

本腰

読んでるだけじゃまったく捗らないので習ったことをここにメモしてゆく事にした。のちのち長いまとめを書くとき用のメモですね。まずは用語の洗い出し。

メッシュポリゴンの集合体。頂点やエッジ、サブメッシュなどの情報を持つ、オブジェクトの形状を定義したもの。

マテリアルテクスチャの色や質感、光の反射などの情報を含む、オブジェクト表面の見た目を定義したもの。

シェーダー頂点シェーダー(Vertex Sh

もっとみる

進捗

引越して新天地!
GLSLを使えそうな案件を手に入れて俄然勉強に力が入るや否や、いい感じなサイトを発見して機運も高まる今日この頃、調子良さげです。

このページ、探し求めてた資料だ!
パーリンノイズじゃなくて「psrdnoise」かなるほどなるほど…(分かってない)。
…じっくりコードを眺めて勉強を進めるゾ!

てなもんで。

【noteのエラー報告】
①ログアウトしてもすぐログインしてしまう
②audio再生中に違うタブを開いているとプログレスバーが止まってしまう

シェーダー描きたい

この動画で使われてるみたいなシェーダーを自分で描けるようになりたいな。それを自分のWebサイトで使うんだ。ワキワキ

依然進捗はないけれど

このページが理解できるようになりたい。

あとブラウザのタブに溜まってる読み物追加。

シェーダーで描画することをお絵描きって言うんだね。
ライブペインティングみたいにライブコーディングできるまでになりたい(ライブペインティングもした事はない)。

GLSLを使いたい

Webサイト上でWebGLを使って3Dアニメーションを動かしたいっと思って早幾年、何度も挑戦しては挫折を繰り返し、なんかもうとっても難しいというか、僕がやりたいこと、“やって楽しい事と難しさ”が釣り合ってない!と思ったんです。3Dをどうこうするよりも、2Dを変形したり加工したりする方が楽しい事に気付きました。
そこでGLSLです。シェーディング言語と言って、結局3Dグラフィックスなんだけど、「何か

もっとみる