![[Chrome Add-on] ChatGPT Question Redactor](https://humanxai.info/images/uploads/chatgpt-question-redactor.webp)
![[Next.js #24] 3D時計UIを“作品”に変えるタイポグラフィ設計（Three.js×MMD）](https://humanxai.info/images/uploads/nextjs-24-font-matter-ui-typography-threejs-mmd.webp)
[Next.js #24] 3D時計UIを“作品”に変えるタイポグラフィ設計（Three.js×MMD）
2026-03-04 | lain
3D時計（Next.js×Three.js×MMD）にUIパネルを実装したので、次は“フォントで仕上げる”。数字・曜日・HUD・パネルを統一するためのタイポグラフィ方針、サイズ階層、文字間、影、可読性、そしてCSS変数による運用をまとめる。
AIと創作の記録をここに。
「AIと人が、共に学び、創る場所」
学びと再出発の旅路へ。
注目のプロジェクト
注目
![[ブロック崩しゲーム] ブロック☆パレット 魔法で描く不思議な世界](https://humanxai.info/images/uploads/project4.webp)
[ブロック崩しゲーム] ブロック☆パレット 魔法で描く不思議な世界
「ブロック☆パレット 魔法で描く不思議な世界」は、ブロック崩しゲームの新しいアプローチを取り入れた作品です。魔法とアニメーションの要素を融合させ、プレイヤーに魅力的な体験を提供します。
注目
![[PIECE BY PIECE] 記憶のカケラ：失われたピースを集める神経衰弱ゲーム](https://humanxai.info/images/uploads/project2.webp)
[PIECE BY PIECE] 記憶のカケラ：失われたピースを集める神経衰弱ゲーム
「記憶のカケラ」は、失われた記憶を取り戻すためにピースを集める神経衰弱ゲーム。ひとつひとつのピースがあなたの記憶を呼び覚まし、挑戦する度に新しい発見が待っています。
注目
注目
おすすめ記事
最新記事
![[Noise 入門 #25] Three.js × GLSL の架け橋 — ShaderMaterial と EffectComposer でノイズをブラウザに解き放つ](https://humanxai.info/images/uploads/noise-intro-25-threejs-shader-bridge.webp)
[Noise 入門 #25] Three.js × GLSL の架け橋 — ShaderMaterial と EffectComposer でノイズをブラウザに解き放つ
2026-03-04 | lain
数式としてのノイズを、ブラウザ上で美しく統治する。Three.jsのShaderMaterialとEffectComposerを用いて、数学をWebエンジニアリングへと昇華させる具体的な実装手法を解説。
![[Next.js #23] Three.js×MMD：ランダム歩行・ランダム会話・VPDポーズで“動く3D時計”へ進化](https://humanxai.info/images/uploads/nextjs-23-threejs-mmd-random-walk-talk-vpd.webp)
[Next.js #23] Three.js×MMD：ランダム歩行・ランダム会話・VPDポーズで“動く3D時計”へ進化
2026-03-03 | lain
Three.jsの3D時計 UI に、MMDキャラクターのランダム歩行・ランダム会話・VPDポーズ連動を追加し、動的なデスクトップマスコットのように進化させる実装手順。
![[Noise 入門 #24] Post-Processing × Noise — 世界を歪める「空間ハック」の魔法（水中の揺らぎ・陽炎・グリッチ）](https://humanxai.info/images/uploads/noise-intro-24-post-processing.webp)
[Noise 入門 #24] Post-Processing × Noise — 世界を歪める「空間ハック」の魔法（水中の揺らぎ・陽炎・グリッチ）
2026-03-03 | lain
ポストプロセス（Post-Processing）とノイズを組み合わせ、画面全体を歪ませる手法を解説。水中の揺らぎ、陽炎（Heat Haze）、グリッチエフェクトなど、レンダリング結果そのものをハックするShaderの実装に迫ります。
![[Next.js #22] Three.jsで作る理想のWEB時計：3Dアナログ×3Dデジタル×ノイズ背景×lil-gui調整](https://humanxai.info/images/uploads/nextjs-22-threejs-3d-clock-ui-noise-gui.webp)
[Next.js #22] Three.jsで作る理想のWEB時計：3Dアナログ×3Dデジタル×ノイズ背景×lil-gui調整
2026-03-02 | lain
Three.jsで3Dアナログ時計＋3Dデジタルパネルを構築し、onBeforeCompileの背景ノイズとlil-guiのインスペクターで光・色・ノイズ・床を即時調整できるWEB時計を作る。MMD(PMX)歩行はおまけ。
![[Noise 入門 #23] 極座標 × 4D Noise — GLSLで「プロシージャルな魔法陣」を展開する](https://humanxai.info/images/uploads/noise-intro-23-polar-coordinates-magic-circle.webp)
[Noise 入門 #23] 極座標 × 4D Noise — GLSLで「プロシージャルな魔法陣」を展開する
2026-03-02 | lain
Noise 入門シリーズ第23回。直交座標から極座標へ視点を移し、GLSLで「プロシージャルな魔法陣 / ノイズオーラ」を実装。数式の秩序と4Dノイズの混沌を融合させ、円環状の美しいエフェクトを錬成する手法を図解とコードで解説します。
![[Next.js #21] Canvas 2Dで挑む「タイムパイロット」式 全方位カメラと無限の雲海](https://humanxai.info/images/uploads/nextjs-21-canvas-2d-screen-rotation-shooter-procedural-noise.webp)
[Next.js #21] Canvas 2Dで挑む「タイムパイロット」式 全方位カメラと無限の雲海
2026-03-01 | lain
Canvas 2Dの座標変換を駆使し、自機を中心に世界が回転・ズームする3D的なカメラワークと、決定論的ノイズによる無限の背景生成を実装した実験記録。
![[Noise 入門 #22] Domain Warping の真骨頂 — GLSLで空間をねじ曲げ「ブラックホール」を錬成する](https://humanxai.info/images/uploads/noise-intro-22-blackhole-domain-warping.webp)
[Noise 入門 #22] Domain Warping の真骨頂 — GLSLで空間をねじ曲げ「ブラックホール」を錬成する
2026-03-01 | lain
Noise 入門シリーズ第22回。Domain Warpingの真骨頂として、GLSLを用いたPost-Processing（後処理）エフェクトで空間そのものをねじ曲げ、光を飲み込む「ブラックホール」を実装する手法を解説します。
![[Next.js #20] R3F×GLSL ドメイン・ワーピング：Bloom不要の発光と流体表現](https://humanxai.info/images/uploads/nextjs-20-r3f-domain-warping-chroma.webp)
[Next.js #20] R3F×GLSL ドメイン・ワーピング：Bloom不要の発光と流体表現
2026-03-01 | lain
ノイズ連載21回分の集大成。ドメイン・ワーピングとカスタムシェーダーを組み合わせ、ライブラリ不要の爆発的な視覚エフェクトを実装します。