WebGL & Three.js
WebGLとThree.jsの違いとは？GLSL・WebGPUとの関係を初心者向けに解説
WebGLとThree.jsの違いを初心者向けに解説します。APIとライブラリの関係、Three.jsが省略してくれる処理、GLSL・WebGL 1/2・WebGPUとの違い、目的別の選び方と学習順序を整理します。
CATEGORY
WebGL & Three.js
WebGL & Three.jsに関する基礎、実装例、トラブル解決の記事をまとめています。
25ARTICLES
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 Materialの種類と使い方｜選び方・変更・透明度を解説
Three.jsのMaterialを目的別に比較し、MeshBasic・Standard・Physical・Toon・Matcapなどの選び方、生成後の変更、透明度、side、wireframe、needsUpdate、disposeまで初心者向けに解説します。
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 Geometryの種類と変更方法｜BufferGeometry・頂点更新を解説
Three.jsのGeometryの種類と選び方を初心者向けに解説します。Box・Sphere・Planeなどの基本形状、BufferGeometryのposition・normal・uv、頂点の変更、サイズ変更、EdgesGeometry、セグメント数、disposeまで実装例で確認できます。
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
Three.jsライトの使い方｜Ambient・Directional・Point Lightを比較
Three.jsのAmbientLight・DirectionalLight・PointLightの違いと使い方を解説します。Materialとの関係、色・intensity、target、distance・decay、candela・lumen、LightHelper、組み合わせ方、暗い・反映されない原因まで確認できます。
WebGL & Three.js
【WebGL】Three.jsのコードをシェーダ言語GLSLに書き換えたサンプルコードをデモ付きで解説
Three.jsのコードをシェーダ言語GLSLに書き換えたサンプルコードをデモ付きで解説します。 WebGL(GLSL)の入門として一番最初に知っておくといい内容になっています。 Three.jsをちょっと知ったくらいの…
WebGL & Three.js
【GLSL】画像を切り替えエフェクト：遷移時にノイズをかけたり、歪ませたりする方法(デモあり)
WebGL(GLSL)を使って画像を切り替えエフェクト、遷移時にノイズをかける方法を紹介します。 またノイズを応用することで画像を歪ませながら遷移させることもできます。 合わせてデモをたくさん用意したので、まずは確認して…
WebGL & Three.js
【GLSL】glslifyのノイズ(noise)の使い方とデモ
WebGL(GLSL)でよく使うglslifyのノイズ(noise)の使い方を紹介します。 デモもあるので確認してみてください。 【GLSL】glslifyのノイズ(noise)のデモ 通常の2Dノイズ 時間経過と共に細…
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の曲者varyingとuniformとは？その挙動の説明と使い方について
WebGL(GLSL)において、データを受け渡しする方法には3つあります。 attribute varying uniform その中でもvaryingは特にわかりにくいです。 varyingの挙動が理解できればほぼわか…
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
【GLSL】Three.jsのShaderMaterialを使って画像や動画を出力する方法(デモ付き)
Three.jsのShaderMaterialを使って画像や動画を出力する方法を紹介します。 WebGL(GLSL)を使うので、これができるとWebサイトなどでは即応用ができるようになります。 デモもあるのでまずは確認し…
WebGL & Three.js
【Three.js】マテリアルのテスクチャーに画像や動画を設定する方法(デモ付き)
Three.jsでマテリアルのテスクチャーに画像や動画を設定する方法を紹介します。 さっそくデモを確認してみましょう。 3Dモデルを表示 Three.jsのShaderMaterialを使ってGLSLを記述した画像の貼り…
WebGL & Three.js
【Three.js】物体(メッシュ)を複数ランダムに生成して散りばめる方法(デモあり)
Three.jsを使って、物体(メッシュ)を複数個、ランダムに生成して散りばめる方法を紹介します。 またその応用として、ライトが必要な物体や、物体をランダムに移動させる方法も紹介しています。 大きさも、ジオメトリの種類も…
WebGL & Three.js
【Three.js】ライトで影を落とす方法と影の調整のやり方(デモつき)
Three.jsでライトを使ったとき、物体の影を落とす方法を紹介します。 また影を薄くしたり、濃くしたり、影がギザギザのときの対処方法といった調整のやり方も紹介しています。 まずはサンプルデモがあるので、以下をご確認くだ…
WebGL & Three.js
【Three.js】OrbitControlsを使って視点の操作する簡単な方法(デモあり)
Three.jsでOrbitControlsを使って簡単にマウスで視点の操作する方法を紹介します。 まずはデモを確認してみましょう。 OrbitControlsとは？ OrbitControlsは、3Dシーン内でのカメラ…
WebGL & Three.js
【Three.js】Three.jsの基本的な操作の一連の流れを解説
Three.jsは、WebGLを簡単に使用するための現状最も有名なJavaScriptライブラリです。 Three.jsやWebGLが何？という場合は、WebGLとThree.jsの違いって何？押さえておきたい基本的なこ…