記事一覧
線形補完(マウス)メモ
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
依然進捗はないけれど
このページが理解できるようになりたい。
あとブラウザのタブに溜まってる読み物追加。
シェーダーで描画することをお絵描きって言うんだね。
ライブペインティングみたいにライブコーディングできるまでになりたい(ライブペインティングもした事はない)。