Fresnel Shader Test

by Steve Eberhardt

HTML

<script src="https://threejs.org/build/three.min.js"></script>

<script id="vertexShader" type="x-shader/x-vertex">

uniform float fresnelBias;
uniform float fresnelScale;
uniform float fresnelPower;

varying float vReflectionFactor;
varying vec3 vReflect;

void main() {
  vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
  vec4 worldPosition = modelMatrix * vec4( position, 1.0 );

  vec3 worldNormal = normalize( mat3( modelMatrix[0].xyz, modelMatrix[1].xyz, modelMatrix[2].xyz ) * normal );

  vec3 I = worldPosition.xyz - cameraPosition;
  
  vReflect = reflect( I, worldNormal );
  vReflectionFactor = fresnelBias + fresnelScale * pow( 1.0 + dot( normalize( I ), worldNormal ), fresnelPower );

  gl_Position = projectionMatrix * mvPosition;
}
  </script>
  
  <script id="fragmentShader" type="x-shader/x-fragment">

uniform vec3 color;
uniform vec3 color2;
uniform samplerCube envMap;

varying vec3 vReflect;
varying float vReflectionFactor;

void main() {
  vec4 envColor = textureCube( envMap, vec3( -vReflect.x, vReflect.yz ) );
  gl_FragColor = vec4(mix(color, envColor.xyz, vec3(clamp( vReflectionFactor, 0.0, 1.0 ))), 1.0);
  //gl_FragColor = color;
}
  
  </script>

JavaScript

var camera, scene, renderer, geometry, material, mesh;
var cubetextureloader = new THREE.CubeTextureLoader();

init();
animate();

function init() {

    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
    camera.position.z = 500;
    scene.add(camera);


    var blacktexture = "https://www.stoneycreekwinepress.com/assets/images/shopperUpload/cubemap-black.jpg";
    var lighttexture = "https://www.stoneycreekwinepress.com/assets/images/shopperUpload/cubemap-light.jpg";
    var envmapURLS = [ lighttexture, lighttexture,	blacktexture, blacktexture, blacktexture, blacktexture ];
   //var envmapURLS = [ sample, sample,	sample, sample, sample, sample ];

    
   var vertexShader = document.getElementById('vertexShader').text;
   var fragmentShader = document.getElementById('fragmentShader').text;
   cubetextureloader.load(	envmapURLS,function ( envmap ) {
     
     var uniforms = {
        color: {
          type: "c",
          value: new THREE.Color(0x0000FF),
        },
        color2: {
          type: "c",
          value: new THREE.Color(0xFFFFFF),
        },
        envMap: {
          type: "t",
          value: envmap,
        },
        fresnelBias: {
          type: "f",
          value: 0.05,
        },
        fresnelScale: {
          type: "f",
          value: 0.65,
        },
        fresnelPower: {
          type: 'f',
          value: 1.0,
        }
    };
     material = new THREE.ShaderMaterial(
            {
              uniforms : uniforms,
              vertexShader : vertexShader,
              fragmentShader : fragmentShader,
            });
		});

    geometry = new THREE.SphereGeometry(120, 32, 32);

    mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);

    renderer = new THREE.WebGLRenderer({antialias:true});
    renderer.setSize(window.innerWidth, window.innerHeight);

    renderer.setClearColor(0xCCCCCC, 1);

   ...