From aea081b45a71b02a9d7c09381a66abb33a0e8fa0 Mon Sep 17 00:00:00 2001
From: Lee Stemkoski <stemkoski@gmail.com>
Date: Sun, 27 Mar 2022 23:16:26 -0400
Subject: [PATCH] experimenting with THREE.ShaderChunk

---
 shader-chunk-lambert.html | 228 ++++++++++++++++++++++++++++++++++++++
 shader-chunk-phong.html   | 200 +++++++++++++++++++++++++++++++++
 2 files changed, 428 insertions(+)
 create mode 100644 shader-chunk-lambert.html
 create mode 100644 shader-chunk-phong.html
diff --git a/shader-chunk-lambert.html b/shader-chunk-lambert.html
new file mode 100644
index 0000000..3fcb566
--- /dev/null
+++ b/shader-chunk-lambert.html
@@ -0,0 +1,228 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+	<title>A-Frame - using shader chunk</title>
+	<script src="js/aframe-master-v1.3.0.min.js"></script>
+	<script src="js/aframe-environment-component.js"></script>
+
+
+</head>
+
+<body>
+<script>
+
+
+var customMaterial = new THREE.ShaderMaterial({
+   uniforms: THREE.UniformsUtils.merge([
+      THREE.UniformsLib[ "common" ],  // defines uniforms and sets defaults: vec3 diffuse, float opacity, mat3 uvTransform, sampler2D map 
+      THREE.UniformsLib[ "lights" ],  // values automatically sent by three.js
+      
+ 			THREE.UniformsLib[ "fog" ],     // values automatically sent by three.js
+    	{
+     		time:      { value: 0 },
+        // color:     { value: new THREE.Color("#FFFFFF") },
+        // diffuseMap: { type: 't' }
+     	}
+   ]),
+
+   lights: true,
+
+   fog: true,
+
+
+   vertexShader: 
+   `
+    // defines constants and functions
+  	${THREE.ShaderChunk["common"]}
+
+    #define USE_UV
+    // defines vec2 vUv, mat3 uvTransform
+    ${THREE.ShaderChunk["uv_pars_vertex"]}
+    
+    // defines light-related things
+    ${THREE.ShaderChunk["lights_pars_begin"]}
+
+    // defines varying float vFogDepth; 
+  	${THREE.ShaderChunk["fog_pars_vertex"]}
+
+    // values to pass along to fragment shader
+    varying vec3 vLightFront;
+    varying vec3 vIndirectFront;
+
+	  void main() 
+	  {
+	    // TODO: include vertexColors
+
+      // transforms uv coordinates and assigns to vUv
+      ${THREE.ShaderChunk["uv_vertex"]}
+
+      // defines vec3 objectNormal
+      ${THREE.ShaderChunk["beginnormal_vertex"]}
+
+      // defines vec3 transformedNormal
+      ${THREE.ShaderChunk["defaultnormal_vertex"]}
+
+      // defines vec3 transformed = vec3(position)
+      ${THREE.ShaderChunk["begin_vertex"]}
+
+      // defines vec3 mvPosition = vec3(position) // used by fog_vertex
+      // sets gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+      ${THREE.ShaderChunk["project_vertex"]}
+
+      // do light-related calculations
+      ${THREE.ShaderChunk["lights_lambert_vertex"]}
+
+	    // need this for the fog_vertex code -- ???
+	    ${THREE.ShaderChunk["fog_vertex"]}
+	  }
+  `,
+
+
+
+  fragmentShader: `
+
+  ${THREE.ShaderChunk["common"]}
+
+  #define USE_UV
+  // defines vec2 vUv
+  ${THREE.ShaderChunk["uv_pars_fragment"]}
+
+  #define USE_MAP
+  // defines sampler2D map
+  ${THREE.ShaderChunk["map_pars_fragment"]}
+
+  // defines light-related things
+  ${THREE.ShaderChunk["lights_pars_begin"]}
+
+  // defines some light functions??
+  ${THREE.ShaderChunk["bsdfs"]}
+
+
+  // defines uniform vec3 fogColor; varying float vFogDepth; uniform float fogDensity; uniform float fogNear; uniform float fogFar;
+  ${THREE.ShaderChunk["fog_pars_fragment"]}
+
+  // values received from vertex shader
+  varying vec3 vLightFront;
+  varying vec3 vIndirectFront;
+
+  uniform vec3 diffuse;
+  uniform float opacity;
+
+  void main() 
+  {
+    // starting point for Lambert-based shaders
+    vec4 diffuseColor = vec4( diffuse, opacity );
+
+    // apply (multiply) sampled texture to diffuseColor
+    ${THREE.ShaderChunk["map_fragment"]}
+
+    // example of injecting custom code
+    // diffuseColor *= vec4(vUv.x, vUv.y, 0.0, 1.0);
+
+    // ShaderChunk["output_fragment"]: assigns gl_FragColor, requires outgoingLight
+
+    // doing it manually instead; simplifying light calculations
+    gl_FragColor = vec4(diffuseColor.rgb * (vLightFront * 1.0 + vIndirectFront / 2.0) / 3.14, diffuseColor.a);
+
+
+    // apply fog calculation to gl_FragColor
+    ${THREE.ShaderChunk["fog_fragment"]}
+
+  }
+  ` 
+});
+
+
+
+
+AFRAME.registerComponent("ao-data", {
+
+  schema: {
+
+  },
+
+  init: function()
+  {
+
+
+  },
+
+  play: function()
+  {
+    let loader = new THREE.TextureLoader();
+    let tex = loader.load("images/color-grid.png");
+
+    // TODO: get this from a-assets instead of a three.loader
+    customMaterial.uniforms.map.value = tex;
+
+  	this.el.object3D.children[0].material = customMaterial;
+
+  },
+
+  tick: function()
+  {
+      this.el.object3D.rotateX(0.010);
+      this.el.object3D.rotateY(0.007);
+  }
+
+
+});
+
+
+</script>
+
+<a-scene fog="type: linear; color: #000011; near: 1; far: 10;">
+	
+	<a-assets>
+		<img id="wallDiffuse" src="images/stone-wall-diffuse-256.jpg" />
+		<img id="wallNormal" src="images/stone-wall-normal-256.jpg" />
+		<img id="wallAO" src="images/ao-map.png" />
+    <img id="grid" src="images/color-grid.png" />
+	</a-assets>
+
+	<a-sky 
+		color = "#000337">
+	</a-sky>
+
+  <!-- testing point light, attached to camera -->
+
+  <!--
+  <a-camera>
+    <a-entity 
+        light="type: point;">
+    </a-entity>
+  </a-camera>
+  -->
+
+  <!-- testing other lights -->
+  
+  <!--
+  <a-entity 
+      light="type: ambient; color: #666666;">
+  </a-entity>
+  
+  <a-entity 
+      light="type: directional; color: #FFFFFF;" 
+      position="-1 4 0">
+  </a-entity>
+  -->
+
+  <a-plane
+    id="floor"
+    width="100" height="100"
+    material="src: #grid; repeat: 20 20;"
+    rotation="-90 0 0">
+  </a-plane>
+
+	<a-box
+		id="test"
+		position="0 1.5 -2"		
+		ao-data>
+	</a-box>
+
+
+</a-scene>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/shader-chunk-phong.html b/shader-chunk-phong.html
new file mode 100644
index 0000000..1b8d2b4
--- /dev/null
+++ b/shader-chunk-phong.html
@@ -0,0 +1,200 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+	<title>A-Frame - using shader chunk</title>
+	<script src="js/aframe-master-v1.3.0.min.js"></script>
+	<script src="js/aframe-environment-component.js"></script>
+</head>
+
+<body>
+<script>
+
+var customMaterial = new THREE.ShaderMaterial({
+   uniforms: THREE.UniformsUtils.merge([
+      THREE.UniformsLib[ "common" ],     // defines uniforms and sets defaults: vec3 diffuse, float opacity, mat3 uvTransform, sampler2D map 
+      THREE.UniformsLib[ "lights" ],     // values automatically sent by three.js
+      THREE.UniformsLib[ "normalmap" ],  // defines uniforms and sets defaults: sampler2D normalMap, vec2 normalScale
+ 			THREE.UniformsLib[ "fog" ],        // values automatically sent by three.js
+    	{
+     		time:      { value: 0 },
+        shininess: { value: 10 },
+        specular:  { value: new THREE.Color("#111111") },
+        emissive:  { value: new THREE.Color("#000000") },
+     	}
+   ]),
+
+   lights: true,
+
+   fog: true,
+
+
+    vertexShader: 
+    `
+    #define PHONG
+    varying vec3 vViewPosition;
+    ${THREE.ShaderChunk["common"]}
+    #define USE_UV
+    ${THREE.ShaderChunk["uv_pars_vertex"]}
+    ${THREE.ShaderChunk["color_pars_vertex"]}
+    ${THREE.ShaderChunk["fog_pars_vertex"]}
+    ${THREE.ShaderChunk["normal_pars_vertex"]}
+    ${THREE.ShaderChunk["shadowmap_pars_vertex"]}
+   
+	  void main() 
+	  {
+	    ${THREE.ShaderChunk["uv_vertex"]}
+      ${THREE.ShaderChunk["color_vertex"]}
+      ${THREE.ShaderChunk["beginnormal_vertex"]}
+      ${THREE.ShaderChunk["defaultnormal_vertex"]}
+      ${THREE.ShaderChunk["normal_vertex"]}
+      ${THREE.ShaderChunk["begin_vertex"]}
+      ${THREE.ShaderChunk["project_vertex"]}
+      vViewPosition = - mvPosition.xyz;
+      ${THREE.ShaderChunk["shadowmap_vertex"]}
+      ${THREE.ShaderChunk["fog_vertex"]}
+	  }
+  `,
+
+  fragmentShader: `
+
+  #define PHONG
+  uniform vec3 diffuse;
+  uniform vec3 emissive;
+  uniform vec3 specular;
+  uniform float shininess;
+  uniform float opacity;
+  
+  ${THREE.ShaderChunk["common"]}
+  ${THREE.ShaderChunk["packing"]}
+  ${THREE.ShaderChunk["color_pars_fragment"]}
+  #define USE_UV
+  ${THREE.ShaderChunk["uv_pars_fragment"]}
+  #define USE_MAP
+  ${THREE.ShaderChunk["map_pars_fragment"]}
+  ${THREE.ShaderChunk["emissivemap_pars_fragment"]}
+  ${THREE.ShaderChunk["fog_pars_fragment"]}
+  ${THREE.ShaderChunk["bsdfs"]}
+  ${THREE.ShaderChunk["lights_pars_begin"]}
+  ${THREE.ShaderChunk["normal_pars_fragment"]}
+  ${THREE.ShaderChunk["lights_phong_pars_fragment"]}
+  #define USE_NORMALMAP
+  #define TANGENTSPACE_NORMALMAP
+  ${THREE.ShaderChunk["normalmap_pars_fragment"]}
+  ${THREE.ShaderChunk["specularmap_pars_fragment"]}
+ 
+  void main() 
+  {
+    ${THREE.ShaderChunk["clipping_planes_fragment"]}
+    vec4 diffuseColor = vec4( diffuse, opacity );
+    ReflectedLight reflectedLight = ReflectedLight( vec3( 0.0 ), vec3( 0.0 ), vec3( 0.0 ), vec3( 0.0 ) );
+    vec3 totalEmissiveRadiance = emissive;  
+    ${THREE.ShaderChunk["logdepthbuf_fragment"]}
+    ${THREE.ShaderChunk["map_fragment"]}
+    ${THREE.ShaderChunk["color_fragment"]}
+    ${THREE.ShaderChunk["specularmap_fragment"]}
+    ${THREE.ShaderChunk["normal_fragment_begin"]}
+    ${THREE.ShaderChunk["normal_fragment_maps"]}
+    ${THREE.ShaderChunk["emissivemap_fragment"]}
+    // accumulation
+    ${THREE.ShaderChunk["lights_phong_fragment"]}
+    ${THREE.ShaderChunk["lights_fragment_begin"]}
+    ${THREE.ShaderChunk["lights_fragment_maps"]}
+    ${THREE.ShaderChunk["lights_fragment_end"]}
+    vec3 outgoingLight = reflectedLight.directDiffuse + reflectedLight.indirectDiffuse + reflectedLight.directSpecular + reflectedLight.indirectSpecular + totalEmissiveRadiance;
+    ${THREE.ShaderChunk["output_fragment"]}
+    ${THREE.ShaderChunk["fog_fragment"]}
+
+  }
+  ` 
+});
+
+
+
+AFRAME.registerComponent("load-data", {
+
+  schema: {
+
+  },
+
+  init: function()
+  {
+
+
+  },
+
+  play: function()
+  {
+    let loader = new THREE.TextureLoader();
+    let map = loader.load("images/stone-wall-diffuse-256.jpg");
+    let normalMap = loader.load("images/stone-wall-normal-256.jpg");
+
+    // TODO: get this from a-assets instead of a three.loader
+    customMaterial.uniforms.map.value = map;
+    customMaterial.uniforms.normalMap.value = normalMap;
+
+  	this.el.object3D.children[0].material = customMaterial;
+  },
+
+  tick: function()
+  {
+      this.el.object3D.rotateX(0.010);
+      this.el.object3D.rotateY(0.007);
+  }
+
+
+});
+
+
+</script>
+
+<a-scene fog="type: linear; color: #000011; near: 1; far: 10;">
+	
+	<a-assets>
+    <img id="grid" src="images/color-grid.png" />
+	</a-assets>
+
+	<a-sky 
+		color = "#000337">
+	</a-sky>
+
+  <!-- testing point light, attached to camera -->
+
+  <a-camera>
+    <a-entity 
+        light="type: point;">
+    </a-entity>
+  </a-camera>
+  
+
+  <!-- testing other lights -->
+  
+  <!--
+  <a-entity 
+      light="type: ambient; color: #666666;">
+  </a-entity>
+  
+  <a-entity 
+      light="type: directional; color: #FFFFFF;" 
+      position="-1 4 0">
+  </a-entity>
+  -->
+
+  <a-plane
+    id="floor"
+    width="100" height="100"
+    material="src: #grid; repeat: 20 20;"
+    rotation="-90 0 0">
+  </a-plane>
+
+	<a-box
+		id="test"
+		position="0 1.5 -2"		
+		load-data>
+	</a-box>
+
+
+</a-scene>
+
+</body>
+</html>
\ No newline at end of file
