WebGL & Three.js
【GLSL】Three.jsのShaderMaterialを使って画像や動画を出力する方法(デモ付き)
Three.jsのShaderMaterialを使って画像や動画を出力する方法を紹介します。 WebGL(GLSL)を使うので、これができるとWebサイトなどでは即応用ができるようになります。 デモもあるのでまずは確認してみてください。 もしGLSLを書かずに、Three.js…
CATEGORY
WebGL & Three.js
WebGL & Three.jsに関する基礎、実装例、トラブル解決の記事をまとめています。
26ARTICLES
WebGL & Three.js
【WebGL】GLSLの曲者varyingとuniformとは？その挙動の説明と使い方について
WebGL(GLSL)でデータを受け渡すattribute・varying・uniformのうち、特にわかりにくいvaryingの挙動（頂点シェーダからフラグメントシェーダへ線形補間されて渡る仕組み）とuniformの違い、WebGL2でのout/inの書き方まで解説します。
WebGL & Three.js
Three.js Lightの使い方と種類｜AmbientLight・DirectionalLight・PointLightを比較
Three.jsのAmbientLight・DirectionalLight・PointLightの違いと使い方を解説します。Materialとの関係、色・intensity、target、distance・decay、candela・lumen、LightHelper、組み合わせ方、暗い・反映されない原因まで確認できます。
WebGL & Three.js
【Three.js】マテリアルのテスクチャーに画像や動画を設定する方法(デモ付き)
Three.jsでマテリアルに画像や動画を貼る方法です。画像はTextureLoaderで読み込んでmapに渡し、動画はVideoTextureを使います。色が暗くなるときのcolorSpace設定、テクスチャーの切り替えとdisposeまでデモ付きで解説します。
WebGL & Three.js
Three.js Geometryの種類と変更方法｜BufferGeometry・頂点更新を解説
Three.jsのGeometryの種類と選び方を初心者向けに解説します。Box・Sphere・Planeなどの基本形状、BufferGeometryのposition・normal・uv、頂点の変更、サイズ変更、EdgesGeometry、セグメント数、disposeまで実装例で確認できます。
WebGL & Three.js
【Three.js】OrbitControlsを使って視点の操作する簡単な方法(デモあり)
Three.jsのOrbitControlsでマウスによる視点操作(回転・ズーム・移動)を実装する方法をデモつきで紹介します。importのパス、enableDampingとupdate()の関係、動かないときの確認ポイントも解説します。
WebGL & Three.js
【GLSL】glslifyのノイズ(noise)の使い方とデモ
GLSLでノイズ(noise)を使う方法を、glslifyとglsl-noiseのシンプレックスノイズで解説します。2D・3Dノイズの読み込み、スケール・移動・波・時間変化の書き方、画像を水面のように揺らすShaderMaterialの実例をデモ付きで紹介します。
WebGL & Three.js
WebGLとThree.jsの違いとは？GLSL・WebGPUとの関係を初心者向けに解説
WebGLとThree.jsの違いを初心者向けに解説します。APIとライブラリの関係、Three.jsが省略してくれる処理、GLSL・WebGL 1/2・WebGPUとの違い、目的別の選び方と学習順序を整理します。
WebGL & Three.js
Three.js Materialの種類と使い方｜選び方・変更・透明度を解説
Three.jsのMaterialを目的別に比較し、MeshBasic・Standard・Physical・Toon・Matcapなどの選び方、生成後の変更、透明度、side、wireframe、needsUpdate、disposeまで初心者向けに解説します。
WebGL & Three.js
Codex Microとは？価格・機能・使い方・対応環境をわかりやすく解説
Codex Microの価格、在庫、機能、対応OS、通常のChatGPT・Codexとの違いを解説。RGBキー、承認・却下、音声入力、ジョイスティック、推論レベル調整の使いどころと購入前の注意点を整理します。
WebGL & Three.js
Three.jsで回転・移動・拡大縮小する方法｜position・rotation・scale
Three.jsでMeshやGroupを回転・移動・拡大縮小する方法を解説します。position・rotation・scale、ローカル/ワールド座標、Quaternion、pivot、親子階層、Timerを使ったフレームレート非依存アニメーションまで確認できます。
WebGL & Three.js
Three.jsでMaterialの色を設定する方法｜Color・RGB・HSL・色空間を解説
Three.jsでMaterialの色を設定・変更する方法を解説します。16進数、CSS色、RGB、HSL、Color.set・copy・lerp、emissive、vertex color、textureとの乗算、sRGB・Linear-sRGB、色が暗い・違う原因まで実装例で確認できます。
WebGL & Three.js
Three.jsでlil-guiとstats.jsを使う方法｜GUI調整・FPS計測
Three.jsへlil-guiとstats.jsを導入し、位置・Material・色・uniformをGUIで調整する方法と、FPS・MS・draw callを計測する方法を解説します。dat.GUIからの移行、controllersRecursive、save/load、破棄まで対応します。
WebGL & Three.js
Three.js入門｜回転する立方体をViteで表示する最小チュートリアル
Three.js初心者向けに、npmとViteの準備から回転する立方体の表示まで解説します。Scene、Camera、Renderer、Geometry、Material、Meshの役割、レスポンシブ対応、アニメーション、後片付けまで一つずつ確認できます。
WebGL & Three.js
Three.jsでオブジェクトを複製する方法｜clone・Material共有・SkinnedMesh対応
Three.jsでMesh・Group・Material・Geometry・glTFを複製する方法を解説します。Object3D.cloneのrecursive、共有されるGeometry・Material・Texture、独立copy、SkeletonUtils、InstancedMesh、dispose時の注意まで実装例で確認できます。
WebGL & Three.js
【WebGL】Three.jsのコードをシェーダ言語GLSLに書き換えたサンプルコードをデモ付きで解説
Three.jsのコードをシェーダ言語GLSLに書き換えたサンプルコードをデモ付きで解説します。 WebGL(GLSL)の入門として一番最初に知っておくといい内容になっています。 Three.jsをちょっと知ったくらいの…
WebGL & Three.js
【GLSL】画像を切り替えエフェクト：遷移時にノイズをかけたり、歪ませたりする方法(デモあり)
WebGL(GLSL)を使って画像を切り替えエフェクト、遷移時にノイズをかける方法を紹介します。 またノイズを応用することで画像を歪ませながら遷移させることもできます。 合わせてデモをたくさん用意したので、まずは確認して…
WebGL & Three.js
【GLSL】画像の色の入れ替え、反転、座標をずらす、ゆっくり変化させる方法(デモ付き)
WebGL(GLSL)のフラグメントシェーダで色を入れ替えたり、色を反転させたり、色の座標をずらしたり、ゆっくりと色を変化させたり、画像を繰り返したりする方法を紹介します。 元画像の表示から分かるように7つほどデモを用意…
WebGL & Three.js
【WebGL】GLSLの頂点シェーダー(vertexShader バーテックスシェーダー)と頂点データ(attribute,頂点属性)とは？
WebGL(GLSL)を扱うときに必ずでてくる頂点シェーダー(vertexShader、バーテックスシェーダー）とは何か、何に使うのかについて説明します。 また、 attributeについても説明します。 頂点シェーダー…
WebGL & Three.js
【WebGL】GLSLのフラグメントシェーダー(Fragment Shader)とは？わかりやすく解説
WebGL(GLSL)を学習する上で、必ず理解しないといけないものの一つに、フラグメントシェーダー(Fragment Shader)があります。 フラグメントシェーダーとは何かについて、説明します。 Three.jsやW…
WebGL & Three.js
【WebGL】GLSLで使う数学(三角関数、ベクトル)を文系エンジニアのために実務でいるところだけ解説
WebGLにおいてGLSLを書く時、どうしても数学がでてきます。 ここでは数学(三角関数、ベクトル)を文系エンジニアのために、まず最初に抑えておきたいポイントだけ解説します。 難しいことは私もわかりませんし、GLSLを扱…
WebGL & Three.js
【WebGL】GLSLで定数を定義する方法(define, constとその違いと注意点)
WebGL(GLSL)で定数を定義する方法を紹介します。 定数を定義するのは、2通りあります。 define const この2つの使い方、その違いからくる注意点をみてみましょう。 基本的なGLSLの計算方法については、…
WebGL & Three.js
【WebGL】GLSLで円や三角形、四角形、その他多角形の図形を描写する方法
WebGL(GLSL)で円や三角形、四角形、八角形、十角形といった多角形の図形を描写する方法を紹介します。 基本的なGLSLの計算方法については、GLSLで使う数学(三角関数、ベクトル)を文系エンジニアのために実務でいる…
WebGL & Three.js
【Three.js】物体(メッシュ)を複数ランダムに生成して散りばめる方法(デモあり)
Three.jsを使って、物体(メッシュ)を複数個、ランダムに生成して散りばめる方法を紹介します。 またその応用として、ライトが必要な物体や、物体をランダムに移動させる方法も紹介しています。 大きさも、ジオメトリの種類も…
WebGL & Three.js
【Three.js】ライトで影を落とす方法と影の調整のやり方(デモつき)
Three.jsでライトを使ったとき、物体の影を落とす方法を紹介します。 また影を薄くしたり、濃くしたり、影がギザギザのときの対処方法といった調整のやり方も紹介しています。 まずはサンプルデモがあるので、以下をご確認くだ…
WebGL & Three.js
【Three.js】Three.jsの基本的な操作の一連の流れを解説
Three.jsは、WebGLを簡単に使用するための現状最も有名なJavaScriptライブラリです。 Three.jsやWebGLが何？という場合は、WebGLとThree.jsの違いって何？押さえておきたい基本的なこ…