empty custom phong

by Tamsen Pozzolo

HTML

<!-- 
Custom three.js Shader / ShaderMaterial 
with all MeshPhongMaterial's shader features.
the basic 'phong template' is setup for uniforms, 
vertex and fragment shaders, and code is simply 
injected in program to allow for changing the vertex
positions and the diffuse color before default lighting is applied.

by @gsynuh 
-->

<!-- three.js r84 -->
<script src="https://labs.gsynuh.com/three.84.min.js"></script>

<!-- vertex shader code included in the program outside main() -->
<script type="x-shader/x-vertex" id="vertCode" >
uniform float time;
</script>

<!-- vertex shader code included at the end of the main() function -->
<script type="x-shader/x-vertex" id="vertMain" >
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
</script>


<!-- Shader code included in the fragment program , outside of the main() function. -->
<script type="x-shader/x-fragment" id="fragCode" >

</script>

<!-- Shader code injected in the fragment shader's main() 
'color' is a vec3 that will be used as the diffuse color once combined to a vec4 with the material's opacity.
-->
<script type="x-shader/x-fragment" id="fragColor" >;
color = vec3(1.0);
</script>

CSS

body {
	margin: 0;
}

JavaScript

(function() {
  var scene = new THREE.Scene();
  var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

  var renderer = new THREE.WebGLRenderer();
  renderer.setClearColor( 0xE8DED2,1.0);
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  var geometry = new THREE.SphereGeometry(4, 64, 64);

  var uniforms = THREE.UniformsUtils.merge([
    THREE.UniformsLib['ambient'],
    THREE.UniformsLib['lights'],
    THREE.UniformsUtils.clone(THREE.ShaderLib.phong.uniforms),
	{
      "diffuse": {type: 'c',value: new THREE.Color(0xFF00FF)},
      "dirSpecularWeight": {type: "v3",value: new THREE.Vector3(1, 1, 1)},
      "time": {type: 'f',value: 0.0}
    }
  ]);

  var vertex = [
    "#define PHONG",
    "varying vec3 vViewPosition;",
    "varying vec2 vUv;",
    "varying vec3 vNormal;",
    THREE.ShaderChunk["common"],
    THREE.ShaderChunk["uv_pars_vertex"],
    THREE.ShaderChunk["uv2_pars_vertex"],
    THREE.ShaderChunk["displacementmap_pars_vertex"],
    THREE.ShaderChunk["envmap_pars_vertex"],
    THREE.ShaderChunk["color_pars_vertex"],
    THREE.ShaderChunk["fog_pars_vertex"],
    THREE.ShaderChunk["morphtarget_pars_vertex"],
    THREE.ShaderChunk["skinning_pars_vertex"],
    THREE.ShaderChunk["shadowmap_pars_vertex"],
    THREE.ShaderChunk["logdepthbuf_pars_vertex"],
    THREE.ShaderChunk["clipping_planes_pars_vertex"],
	document.getElementById("vertCode").text,
    "void main() {",
    THREE.ShaderChunk["uv_vertex"],
    THREE.ShaderChunk["uv2_vertex"],
    THREE.ShaderChunk["color_vertex"],
    THREE.ShaderChunk["beginnormal_vertex"],
    THREE.ShaderChunk["morphnormal_vertex"],
    THREE.ShaderChunk["skinbase_vertex"],
    THREE.ShaderChunk["skinnormal_vertex"],
    THREE.ShaderChunk["defaultnormal_vertex"],
    "vNormal = normalize( transformedNormal);",
    THREE.ShaderChunk["begin_vertex"],
    THREE.ShaderChunk["displacementmap_vertex"],
   ...