【WebGL】Three.jsのコードをシェーダ言語GLSLに書き換えたサンプルコードをデモ付きで解説
Three.jsのコードをシェーダ言語GLSLに書き換えたサンプルコードをデモ付きで解説します。
WebGL(GLSL)の入門として一番最初に知っておくといい内容になっています。
Three.j ...
WebGLとThree.jsの違いって何？押さえておきたい基本的なことのみ解説(GLSL)
ブラウザ上で3Dグラフィクスを描いてみたいと考えたとき、
よく出てくる言葉として「WebGL」や「Three.js」と出会う機会があります。
WebGLとThree.jsの違い、そもそもどういう意味 ...
【Three.js】lil-gui(dat-gui)のカスタマイズとstat-jsでパフォーマンスを測る方法(デモつき)
Three.jsで数値をGUIで変更することができるようになるlil-gui(dat-gui)のカスタマイズ方法と、
パフォーマンスを測ることができるstat-jsの使い方を紹介します。
lil-g ...
【WebGL】GLSLの頂点シェーダー(vertexShader バーテックスシェーダー)と頂点データ(attribute,頂点属性)とは？
WebGL(GLSL)を扱うときに必ずでてくる頂点シェーダー(vertexShader、バーテックスシェーダー）とは何か、何に使うのかについて説明します。
また、 attributeについても説明します。 ...
【WebGL】GLSLのフラグメントシェーダー(Fragment Shader)とは？わかりやすく解説
WebGL(GLSL)を学習する上で、必ず理解しないといけないものの一つに、フラグメントシェーダー(Fragment Shader)があります。
フラグメントシェーダーとは何かについて、説明します。 ...
【WebGL】GLSLの曲者varyingとuniformとは？その挙動の説明と使い方について
WebGL(GLSL)において、データを受け渡しする方法には3つあります。
attributevarying
uniform
その中でもvaryingは特にわかりにくいです。 ...
【Three.js】マテリアルのテスクチャーに画像や動画を設定する方法(デモ付き)
Three.jsでマテリアルのテスクチャーに画像や動画を設定する方法を紹介します。
さっそくデモを確認してみましょう。
3Dモデルを表示
Three.jsのShaderMateria ...
【Three.js】物体(メッシュ)を複数ランダムに生成して散りばめる方法(デモあり)
Three.jsを使って、物体(メッシュ)を複数個、ランダムに生成して散りばめる方法を紹介します。
またその応用として、ライトが必要な物体や、物体をランダムに移動させる方法も紹介しています。
大きさ ...
【Three.js】物体を回転、並行移動、スケールする方法(デモあり)
Three.jsを使って物体を回転、並行移動、スケールする方法を紹介します。
デモもあるので、一度確認してみてください。
【Three.js】基本のライト:AmbientLight, DirectionalLight, PointLightの使い方とサンプルデモ
Three.jsの最も基本的でよく使うライトであるAmbientLight, DirectionalLight, PointLightの使い方を紹介します。
ライトがない状態のデモがあるとわかりやすいので ...
【Three.js】ライトで影を落とす方法と影の調整のやり方(デモつき)
Three.jsでライトを使ったとき、物体の影を落とす方法を紹介します。
また影を薄くしたり、濃くしたり、影がギザギザのときの対処方法といった調整のやり方も紹介しています。
まずはサンプルデモがある ...
【Three.js】物体を複製(クローン)する方法clone()と注意点(デモあり)
Three.jsで物体を複製する方法を紹介します。
具体的なコードとデモが見たい場合は、【WebGL&Three.js入門】Three.jsの一番シンプルなサンプルコードのチュートリアルの解説でデモ ...
【WebGL&Three.js入門】Three.jsの一番シンプルなサンプルコードのチュートリアルの解説
WebGL&Three.jsの入門としてThree.jsのチュートリアルに記載されているサンプルコードの基本を解説します。
とっつきにくそうではなりますが、ちょっと中身がわかれば全然そんなことがな ...
【Three.js】OrbitControlsを使って視点の操作する簡単な方法(デモあり)
Three.jsでOrbitControlsを使って簡単にマウスで視点の操作する方法を紹介します。
まずはデモを確認してみましょう。
OrbitControlsとは？OrbitControl ...
【Three.js】Material(マテリアル)の色の設定方法一覧
Three.jsでMaterial(マテリアル)の色を設定するとき、いろいろな方法があります。
知らないと混乱したり、便利な使い方もあるので、色の設定方法を一覧できるように紹介します。
もしTh ...
【Three.js】Material(マテリアル)の種類と変更方法-3Dモデルのデモ付きで紹介
Three.jsのMaterial(マテリアル)の基本的な種類を実際に3Dモデルのデモを動かしながら確認してみてましょう。
もしThree.jsの基本的な操作の一連の流れを知らないという場合は、Three. ...
【Three.js】Geometry(ジオメトリ)の種類と変更方法-3Dモデルのデモ付きで紹介
Three.jsのGeometry(ジオメトリ)の基本的な種類を実際に3Dモデルのデモを動かしながら確認してみてましょう。
もしThree.jsの基本的な操作の一連の流れを知らないという場合は、Three. ...
【Three.js】Three.jsの基本的な操作の一連の流れを解説
Three.jsは、WebGLを簡単に使用するための現状最も有名なJavaScriptライブラリです。
Three.jsやWebGLが何？という場合は、WebGLとThree.jsの違いって何？押さえておき ...