自作でphongを使いたい時用。
PhongをShaderMaterialで書くとこんな感じ。
var phongShader = THREE.ShaderLib.phong;
var uniforms = THREE.UniformsUtils.clone(phongShader.uniforms);
material = new THREE.ShaderMaterial({
uniforms: uniforms,
vertexShader: phongShader.vertexShader,
fragmentShader: phongShader.fragmentShader,
lights:true//ライトの影響を受けられるように
});
phongShader.vertexShader,
phongShader.fragmentShaderを改造すればよい。
phongのvert / frag のソースはこれ
中身をみると#includeが並んでいるが、これはthreejsが自前でincludeする実装している。includeの行をコメントアウトし（削除しないとエラーになるかも）、代わりに自分のコードを描けばよい
https://github.com/mrdoob/three.js/blob/master/src/renderers/shaders/ShaderLib/meshphong_vert.glsl
https://github.com/mrdoob/three.js/blob/master/src/renderers/shaders/ShaderLib/meshphong_frag.glsl
はまりポイント
- lights:trueというのを渡すとライトが有効になります。（fog: true というのもあります。）
- map:trueというのは無くて、#define USE_MAPってシェーダーの一番上に書くとmapが使えます。
- そのほかUSE_なんとか、がいっぱいありますので、適当に有効にします。
※要はmaterial共通のものか/固有のものか、で上記のような違いがあるようです。lights:trueになってると、どっかでまとめてlightの情報をuniformに渡しているようです。
USE_なんとか 一覧（未完）
r87で確認中（phongで使われないものも含む
https://github.com/mrdoob/three.js/tree/master/src/renderers/shaders/ShaderChunk
| 名称 | 該当する主なvert/frag | 備考 |
|---|---|---|
| USE_ALPHAMAP | alphamap_fragment.glsl | |
| ALPHATEST | alphatest_fragment.glsl | |
| USE_AOMAP | aomap_fragment.glsl | |
| USE_BUMPMAP | bumpmap_pars_fragment.glsl | |
| USE_COLOR | color_fragment.glsl | 頂点カラー |
| ENVMAP_TYPE_CUBE_UV | cube_uv_reflection_fragment.glsl | |
| USE_DISPLACEMENTMAP | displacementmap_vertex.glsl | 頂点を変形するマップ |
| USE_EMISSIVEMAP | emissivemap_fragment.glsl | |
| USE_ENVMAP | envmap_fragment.glsl | |
| USE_FOG | fog_fragment.glsl | |
| USE_LIGHTMAP | lightmap_fragment.glsl | |
| TOON | gradientmap_pars_fragment.glsl | |
| --- | ||
| --- | ||
| --- | ||
| --- |
そのほかシェーダーのソース群
https://github.com/mrdoob/three.js/tree/master/src/renderers/shaders
* THREE.ShaderChunk = 共通で使われるGLSLのコード片
* THREE.UniformsUtils = uniformsの定義を操作するユーティリティ関数群
* THREE.UniformsLib = 共通で使われるuniforms定義
* THREE.ShaderLib = 各マテリアルで使用するシェーダー定義