examples/webgl_materials_subsurface_scattering.html

<!DOCTYPE html>
<html lang="en">
  <head>
		<title>three.js webgl - Fast subsurface scattering in Blinn-Phong shading demo</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<link type="text/css" rel="stylesheet" href="main.css">
  </head>
  <body>

	<div id="container"></div>
	<div id="info"><a href="https://threejs.org" target="_blank" rel="noopener">three.js</a>
		<br/>Fast subsurface scattering in Blinn-Phong shading demo<br/>
		[Thanks for the art support from <a href="https://github.com/shaochun" target="_blank" rel="noopener">Shaochun Lin</a>]
	</div>

	<script type="importmap">
		{
			"imports": {
				"three": "../build/three.module.js",
				"three/addons/": "./jsm/"
			}
		}
	</script>

	<script type="module">
		import * as THREE from 'three';

		import Stats from 'three/addons/libs/stats.module.js';

		import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
		import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
		import { SubsurfaceScatteringShader } from 'three/addons/shaders/SubsurfaceScatteringShader.js';
		import { FBXLoader } from 'three/addons/loaders/FBXLoader.js';

		let container, stats;
		let camera, scene, renderer;
		let model;

		init();

		function init() {

			container = document.createElement( 'div' );
			document.body.appendChild( container );

			camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 5000 );
			camera.position.set( 0.0, 300, 400 * 4 );

			scene = new THREE.Scene();

			// Lights

			scene.add( new THREE.AmbientLight( 0xc1c1c1 ) );

			const directionalLight = new THREE.DirectionalLight( 0xffffff, 0.03 );
			directionalLight.position.set( 0.0, 0.5, 0.5 ).normalize();
			scene.add( directionalLight );

			const pointLight1 = new THREE.Mesh( new THREE.SphereGeometry( 4, 8, 8 ), new THREE.MeshBasicMaterial( { color: 0xc1c1c1 } ) );
			pointLight1.add( new THREE.PointLight( 0xc1c1c1, 4.0, 300, 0 ) );
			scene.add( pointLight1 );
			pointLight1.position.x = 0;
			pointLight1.position.y = - 50;
			pointLight1.position.z = 350;

			const pointLight2 = new THREE.Mesh( new THREE.SphereGeometry( 4, 8, 8 ), new THREE.MeshBasicMaterial( { color: 0xc1c100 } ) );
			pointLight2.add( new THREE.PointLight( 0xc1c100, 0.75, 500, 0 ) );
			scene.add( pointLight2 );
			pointLight2.position.x = - 100;
			pointLight2.position.y = 20;
			pointLight2.position.z = - 260;

			renderer = new THREE.WebGLRenderer( { antialias: true } );
			renderer.setPixelRatio( window.devicePixelRatio );
			renderer.setSize( window.innerWidth, window.innerHeight );
			renderer.setAnimationLoop( animate );
			container.appendChild( renderer.domElement );

			//

			stats = new Stats();
			container.appendChild( stats.dom );

			const controls = new OrbitControls( camera, container );
			controls.minDistance = 500;
			controls.maxDistance = 3000;

			window.addEventListener( 'resize', onWindowResize );

			initMaterial();

		}

		function initMaterial() {

			const loader = new THREE.TextureLoader();
			const imgTexture = loader.load( 'models/fbx/white.jpg' );
			imgTexture.colorSpace = THREE.SRGBColorSpace;

			const thicknessTexture = loader.load( 'models/fbx/bunny_thickness.jpg' );
			imgTexture.wrapS = imgTexture.wrapT = THREE.RepeatWrapping;

			const shader = SubsurfaceScatteringShader;
			const uniforms = THREE.UniformsUtils.clone( shader.uniforms );

			uniforms[ 'map' ].value = imgTexture;

			uniforms[ 'diffuse' ].value = new THREE.Vector3( 1.0, 0.2, 0.2 );
			uniforms[ 'shininess' ].value = 500;

			uniforms[ 'thicknessMap' ].value = thicknessTexture;
			uniforms[ 'thicknessColor' ].value = new THREE.Vector3( 0.5, 0.3, 0.0 );
			uniforms[ 'thicknessDistortion' ].value = 0.1;
			uniforms[ 'thicknessAmbient' ].value = 0.4;
			uniforms[ 'thicknessAttenuation' ].value = 0.8;
			uniforms[ 'thicknessPower' ].value = 2.0;
			uniforms[ 'thicknessScale' ].value = 16.0;

			const material = new THREE.ShaderMaterial( {
				uniforms: uniforms,
				vertexShader: shader.vertexShader,
				fragmentShader: shader.fragmentShader,
				lights: true
			} );

			// LOADER

			const loaderFBX = new FBXLoader();
			loaderFBX.load( 'models/fbx/stanford-bunny.fbx', function ( object ) {

				model = object.children[ 0 ];
				model.position.set( 0, 0, 10 );
				model.scale.setScalar( 1 );
				model.material = material;
				scene.add( model );

			} );

			initGUI( uniforms );

		}

		function initGUI( uniforms ) {

			const gui = new GUI( { title: 'Thickness Control' } );

			const ThicknessControls = function () {

				this.distortion = uniforms[ 'thicknessDistortion' ].value;
				this.ambient = uniforms[ 'thicknessAmbient' ].value;
				this.attenuation = uniforms[ 'thicknessAttenuation' ].value;
				this.power = uniforms[ 'thicknessPower' ].value;
				this.scale = uniforms[ 'thicknessScale' ].value;

			};

			const thicknessControls = new ThicknessControls();

			gui.add( thicknessControls, 'distortion' ).min( 0.01 ).max( 1 ).step( 0.01 ).onChange( function () {

				uniforms[ 'thicknessDistortion' ].value = thicknessControls.distortion;
				console.log( 'distortion' );

			} );

			gui.add( thicknessControls, 'ambient' ).min( 0.01 ).max( 5.0 ).step( 0.05 ).onChange( function () {

				uniforms[ 'thicknessAmbient' ].value = thicknessControls.ambient;

			} );

			gui.add( thicknessControls, 'attenuation' ).min( 0.01 ).max( 5.0 ).step( 0.05 ).onChange( function () {

				uniforms[ 'thicknessAttenuation' ].value = thicknessControls.attenuation;

			} );

			gui.add( thicknessControls, 'power' ).min( 0.01 ).max( 16.0 ).step( 0.1 ).onChange( function () {

				uniforms[ 'thicknessPower' ].value = thicknessControls.power;

			} );

			gui.add( thicknessControls, 'scale' ).min( 0.01 ).max( 50.0 ).step( 0.1 ).onChange( function () {

				uniforms[ 'thicknessScale' ].value = thicknessControls.scale;

			} );

		}

		function onWindowResize() {

			camera.aspect = window.innerWidth / window.innerHeight;
			camera.updateProjectionMatrix();

			renderer.setSize( window.innerWidth, window.innerHeight );

		}

		//

		function animate() {

			render();

			stats.update();

		}

		function render() {

			if ( model ) model.rotation.y = performance.now() / 5000;

			renderer.render( scene, camera );

		}

	</script>

  </body>
</html>