WebGL

[Lain Clock(仮)] Three.js と MMD を使って制作した Web 時計アプリ

2026-03-12 | lain

Three.js と MMD を使って制作した Web 時計アプリ。壁紙、時計色、床シェーダー、MotionAssets を設定UIから変更し、localStorage / IndexedDB で保存・復元できます。

カテゴリ： Featured

タグ： #webclock#threejs#mmd#indexeddb#localstorage#webgl

[Noise 入門 #04] Perlin Noise のアルゴリズムを図解で理解する

2026-02-11 | lain

Perlin Noise を“図解”で理解するための基礎記事。グリッド・勾配ベクトル・内積・補間の4ステップで、ノイズがどのように滑らかさを生み出すのかを丁寧に解説します。

カテゴリ： Procedural

タグ： #Noise#Perlin#Simplex#Shader#Three.js#WebGL

【JavaScript 3D 入門講座】HTMLでここまでできる！3D表現の入口 Three.jsをつかってみよう

2025-07-08 | lain

本記事では、軽量3Dライブラリ「Three.js」を使って、Web上で画像を立体的に動かす入門的な方法を丁寧に解説。最小構成から回転アニメーションまで、必要なコードはすべて紹介。エラーの対処法も含めて、3Dの“最初の一歩”を一緒に踏み出しましょう。

カテゴリ： JavaScript

タグ： #初心者向け#Three.js#WebGL#3Dプログラミング#HTML#初心者向け#入門講座#フロントエンド#Web開発#インタラクティブ表現

[Next.js #35] MMD時計アプリの設定UIを実装 — 壁紙・時計色・床シェーダー・MotionAssets保存対応

2026-03-12 | lain

Three.js製MMD時計アプリに設定UIを実装。アナログ時計・デジタル時計・壁紙・床シェーダー・MotionAssetsの各種設定をGUIから変更し、localStorage と IndexedDB で保存・復元できる構成を整備しました。

カテゴリ： Next.js

タグ： #Three.js#MMD#IndexedDB#localStorage#WebGL#GLSL#Shader#UI

[Noise 入門 #33] Procedural Biome と大気散乱 — ノイズ惑星に海と森、そして「青い空」を纏わせる

2026-03-12 | lain

前回錬成したノイズの地形（球体）に「生命の息吹」を与えます。高さ（Height）と傾斜（Slope）に基づいて海や森、雪山を塗り分けるProcedural Biomeの実装と、フレネル反射を用いた大気（Atmosphere）のシミュレーション手法をGLSLで直感的に解説します。

カテゴリ： Procedural Shader Three.js

タグ： #Noise#GLSL#WebGL#Math#3D

[Next.js #33] Interactive Noise Sphere — Three.js × GLSLで球体ノイズにクリック波紋を加える

2026-03-11 | lain

平面で触れるノイズ場を作った前回実装を球体へ拡張。SphereGeometry、Raycaster、GLSLを使い、球体表面にクリック波紋が広がるインタラクティブなノイズ惑星デモを作成。背景用スカイスフィアも加え、触れる3D世界として整理します。

カテゴリ： Next.js

タグ： #Next.js#Three.js#GLSL#Shader#Raycaster#SphereGeometry#Noise#Interactive#WebGL

[Next.js #31] Touching Noise Field — Three.js × GLSLで“触れるノイズ場”を作る

2026-03-10 | lain

Three.jsとGLSLを使い、Raycasterで取得したマウス位置をもとに局所的なDomain Warpingを発生させる“触れるノイズ場”を実装。PlaneGeometry上の頂点変形と色設計を組み合わせ、鑑賞するノイズから体験するノイズへ発展させる。

カテゴリ： Next.js

タグ： #Next.js#Three.js#GLSL#Shader#Raycaster#Domain Warping#Noise#Interactive Art#WebGL

[Noise 入門 #31] 第4集開幕 — Three.js × GLSLで「触れるノイズ」を実装する

2026-03-10 | lain

第4集「Three.js編」が開幕。Raycasterを用いてマウスの動きをGLSLへ伝達し、ユーザーの操作に呼応して空間が歪む「触れるノイズ」の実装手法を解説します。

カテゴリ： Procedural

タグ： #Noise#Three.js#GLSL#WebGL#Interaction

[Next.js #28] MMD時計アプリに Wallpaper カスタマイズ機能を追加 — 背景画像・Tint・UI切替

2026-03-07 | lain

MMD時計アプリの背景壁を単色から画像対応へ拡張し、Wallpaper UIから壁紙・Tint Color・Texture ON/OFFを切り替えられるようにした実装メモ。Three.jsのMeshStandardMaterialに画像テクスチャを適用しつつ、onBeforeCompileで既存シェーダー演出も維持。さらに画面サイズに応じて背景壁が追従するようリサイズ処理も追加した。

カテゴリ： Next.js

タグ： #Next.js#Three.js#MMD#UI#Wallpaper#Shader#Texture#WebGL

カテゴリ：WebGL