WebGL & Three.js

2023年12月11日

Three.jsのコードをシェーダ言語GLSLに書き換えたサンプルコードをデモ付きで解説します。
WebGL(GLSL)の入門として一番最初に知っておくといい内容になっています。

Three.j ...

2023年12月11日

ブラウザ上で3Dグラフィクスを描いてみたいと考えたとき、
よく出てくる言葉として「WebGL」や「Three.js」と出会う機会があります。
WebGLとThree.jsの違い、そもそもどういう意味 ...

WebGL(GLSL)を使って画像を切り替えエフェクト、遷移時にノイズをかける方法を紹介します。
またノイズを応用することで画像を歪ませながら遷移させることもできます。
合わせてデモをたくさん用意し ...

2023年12月8日

Three.jsで数値をGUIで変更することができるようになるlil-gui(dat-gui)のカスタマイズ方法と、
パフォーマンスを測ることができるstat-jsの使い方を紹介します。
lil-g ...

WebGL(GLSL)でよく使うglslifyのノイズ(noise)の使い方を紹介します。
デモもあるので確認してみてください。

【GLSL】glslifyのノイズ(noise)のデモ通常の2Dノイズ ...

2023年12月7日

WebGL(GLSL)のフラグメントシェーダで色を入れ替えたり、色を反転させたり、色の座標をずらしたり、ゆっくりと色を変化させたり、画像を繰り返したりする方法を紹介します。
元画像の表示から分かるように7つ ...

2023年12月7日

WebGL(GLSL)を扱うときに必ずでてくる頂点シェーダー(vertexShader、バーテックスシェーダー）とは何か、何に使うのかについて説明します。
また、　attributeについても説明します。 ...

2023年12月7日

WebGL(GLSL)を学習する上で、必ず理解しないといけないものの一つに、フラグメントシェーダー(Fragment Shader)があります。
フラグメントシェーダーとは何かについて、説明します。 ...

2023年12月7日

WebGL(GLSL)において、データを受け渡しする方法には3つあります。

attribute
varying
uniform

その中でもvaryingは特にわかりにくいです。 ...

2023年12月7日

WebGLにおいてGLSLを書く時、どうしても数学がでてきます。
ここでは数学(三角関数、ベクトル)を文系エンジニアのために、まず最初に抑えておきたいポイントだけ解説します。
難しいことは私もわかり ...

2023年12月7日

WebGL(GLSL)で定数を定義する方法を紹介します。

定数を定義するのは、2通りあります。

define
const

この2つの使い方、その違いからくる注意点をみてみましょう ...

2023年12月7日

WebGL(GLSL)で円や三角形、四角形、八角形、十角形といった多角形の図形を描写する方法を紹介します。

基本的なGLSLの計算方法については、GLSLで使う数学(三角関数、ベクトル)を文系エンジニア ...

2023年12月7日

Three.jsのShaderMaterialを使って画像や動画を出力する方法を紹介します。
WebGL(GLSL)を使うので、これができるとWebサイトなどでは即応用ができるようになります。
デモ ...

2023年12月5日

Three.jsでマテリアルのテスクチャーに画像や動画を設定する方法を紹介します。
さっそくデモを確認してみましょう。

3Dモデルを表示

Three.jsのShaderMateria ...

2023年11月24日

Three.jsを使って、物体(メッシュ)を複数個、ランダムに生成して散りばめる方法を紹介します。
またその応用として、ライトが必要な物体や、物体をランダムに移動させる方法も紹介しています。
大きさ ...

2023年11月22日

Three.jsを使って物体を回転、並行移動、スケールする方法を紹介します。
デモもあるので、一度確認してみてください。

Three.jsを使って物体を回転、並行移動、スケールするデモサンプルコード ...

2023年11月22日

Three.jsの最も基本的でよく使うライトであるAmbientLight, DirectionalLight, PointLightの使い方を紹介します。
　ライトがない状態のデモがあるとわかりやすいので ...

Three.jsでライトを使ったとき、物体の影を落とす方法を紹介します。
また影を薄くしたり、濃くしたり、影がギザギザのときの対処方法といった調整のやり方も紹介しています。
まずはサンプルデモがある ...

Three.jsで物体を複製する方法を紹介します。
具体的なコードとデモが見たい場合は、【WebGL&Three.js入門】Three.jsの一番シンプルなサンプルコードのチュートリアルの解説でデモ ...

2023年11月16日

WebGL&Three.jsの入門としてThree.jsのチュートリアルに記載されているサンプルコードの基本を解説します。
とっつきにくそうではなりますが、ちょっと中身がわかれば全然そんなことがな ...

Three.jsでOrbitControlsを使って簡単にマウスで視点の操作する方法を紹介します。

まずはデモを確認してみましょう。

OrbitControlsとは？

OrbitControl ...

2023年11月16日

Three.jsでMaterial(マテリアル)の色を設定するとき、いろいろな方法があります。
知らないと混乱したり、便利な使い方もあるので、色の設定方法を一覧できるように紹介します。

もしTh ...

2023年11月16日

Three.jsのMaterial(マテリアル)の基本的な種類を実際に3Dモデルのデモを動かしながら確認してみてましょう。
もしThree.jsの基本的な操作の一連の流れを知らないという場合は、Three. ...

2023年11月16日

Three.jsのGeometry(ジオメトリ)の基本的な種類を実際に3Dモデルのデモを動かしながら確認してみてましょう。
もしThree.jsの基本的な操作の一連の流れを知らないという場合は、Three. ...

2023年11月16日

Three.jsは、WebGLを簡単に使用するための現状最も有名なJavaScriptライブラリです。
Three.jsやWebGLが何？という場合は、WebGLとThree.jsの違いって何？押さえておき ...