【WebGL】GLSLの曲者varyingとuniformとは？その挙動の説明と使い方について
WebGL(GLSL)において、データを受け渡しする方法には3つあります。
attributevarying
uniform
その中でもvaryingは特にわかりにくいです。 ...
【WebGL】GLSLのフラグメントシェーダー(Fragment Shader)とは？わかりやすく解説
WebGL(GLSL)を学習する上で、必ず理解しないといけないものの一つに、フラグメントシェーダー(Fragment Shader)があります。
フラグメントシェーダーとは何かについて、説明します。 ...
【WebGL】GLSLの頂点シェーダー(vertexShader バーテックスシェーダー)と頂点データ(attribute,頂点属性)とは？
WebGL(GLSL)を扱うときに必ずでてくる頂点シェーダー(vertexShader、バーテックスシェーダー）とは何か、何に使うのかについて説明します。
また、 attributeについても説明します。 ...
【WebGL】Three.jsのコードをシェーダ言語GLSLに書き換えたサンプルコードをデモ付きで解説
Three.jsのコードをシェーダ言語GLSLに書き換えたサンプルコードをデモ付きで解説します。
WebGL(GLSL)の入門として一番最初に知っておくといい内容になっています。
Three.j ...
【Three.js】lil-gui(dat-gui)のカスタマイズとstat-jsでパフォーマンスを測る方法(デモつき)
Three.jsで数値をGUIで変更することができるようになるlil-gui(dat-gui)のカスタマイズ方法と、
パフォーマンスを測ることができるstat-jsの使い方を紹介します。
lil-g ...
【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の一番シンプルなサンプルコードのチュートリアルの解説でデモ ...
【Three.js】物体を回転、並行移動、スケールする方法(デモあり)
Three.jsを使って物体を回転、並行移動、スケールする方法を紹介します。
デモもあるので、一度確認してみてください。