vein3d/textured3d.js

var bumpCanvas, diffCanvas, glossCanvas, bump2d, diff2d, gloss2d;
var scene, camera, renderer, leaf, leafmat;

var seed = Math.floor(Math.random()*1337);

function seededRand() {
    var x = Math.sin(seed++) * 10000;
    return x - Math.floor(x);
}
function map_range(value, low1, high1, low2, high2) {
    return low2 + (high2 - low2) * (value - low1) / (high1 - low1);
}

function docReady(fn) {
    // see if DOM is already available
    if (document.readyState === "complete" || document.readyState === "interactive") {
        // call on next available tick
        setTimeout(fn, 1);
    } else {
        document.addEventListener("DOMContentLoaded", fn);
    }
} 

function generateTextures() {
/*
	bumpCanvas = document.getElementById('bump');
	diffCanvas = document.getElementById('diff');
	bump2d = bumpCanvas.getContext("2d");
	diff2d = diffCanvas.getContext("2d");
*/
	bumpCanvas  = document.getElementById('bump');
	diffCanvas  = document.getElementById('diff');
	glossCanvas = document.getElementById('gloss');
	
	bump2d      = bumpCanvas.getContext("2d");
	diff2d      = diffCanvas.getContext("2d");
	gloss2d     = glossCanvas.getContext("2d");

	bumpCanvas.width   = 300;
	bumpCanvas.height  = 300;
	diffCanvas.width   = 300;
	diffCanvas.height  = 300;
	glossCanvas.width  = 300;
	glossCanvas.height = 300;
	
	if (window.devicePixelRatio > 1) {
	
	    bumpCanvas.width   *= window.devicePixelRatio;
	    bumpCanvas.height  *= window.devicePixelRatio;
	    diffCanvas.width   *= window.devicePixelRatio;
	    diffCanvas.height  *= window.devicePixelRatio;
	    glossCanvas.width  *= window.devicePixelRatio;
	    glossCanvas.height *= window.devicePixelRatio;
	
	    //bump2d.scale(window.devicePixelRatio, window.devicePixelRatio);
	}

	bump2d.fillStyle = "white";
	bump2d.fillRect(0, 0, bumpCanvas.width, bumpCanvas.height);
	bump2d.drawImage(document.getElementById('grower'), 0, 0);
	bump2d.globalCompositeOperation='difference';
	bump2d.fillStyle='white';
	bump2d.fillRect(0,0,bumpCanvas.width,bumpCanvas.height);
	
	diff2d.drawImage(bumpCanvas, 0, 0);
	gloss2d.drawImage(bumpCanvas, 0, 0);
	
	StackBlur.canvasRGB(bumpCanvas, 0, 0, 600, 600, 3);
	StackBlur.canvasRGB(diffCanvas, 0, 0, 600, 600, 40);
	StackBlur.canvasRGB(glossCanvas, 0, 0, 600, 600, 20);
	
	// Gradient Map
		
	var imageData = diff2d.getImageData(0, 0, diffCanvas.width, diffCanvas.height);
	var imageData2 = bump2d.getImageData(0, 0, diffCanvas.width, diffCanvas.height);
	
	var pixels = imageData.data;
	var len = pixels.length / 4;
	var randy = 25;
	while(len--) {
	    var id = len * 4 + 3;
	    randy += (seededRand()*8)-4;
	    var col = pixels[id-1]*2 + (randy/60) + seededRand()*40;
	    pixels[id - 3] = map_range(col, 0, 255, 40, 210);     // red
	    pixels[id - 2] = map_range(col, 0, 255, 100, 255); // green
	    pixels[id - 1] = map_range(col, 0, 255, 30, 50); // blue
	}
	diff2d.putImageData(imageData, 0, 0);
	
	//diff2d.globalCompositeOperation = "screen";
	
	var pixels2 = imageData2.data;
	len = pixels.length / 4;
	while(len--) {
	    var id = len * 4 + 3;
	    var col = pixels2[id-1];
	    pixels2[id - 3] = pixels[id - 3]+map_range(col, 0, 255, 0, 40);     // red
	    pixels2[id - 2] = pixels[id - 2]+map_range(col, 0, 255, 0, 30); // green
	    pixels2[id - 1] = pixels[id - 1]; // blue
	}
	diff2d.putImageData(imageData2, 0, 0);
	
	
}

function renderScene() {
	const aspect = 900/500;
	const stage = document.getElementById('three');
	
	scene    = new THREE.Scene();
	camera   = new THREE.PerspectiveCamera(30, aspect, 0.1, 1000);
	renderer = new THREE.WebGLRenderer({ antialias: true });
	
	renderer.setClearColor('#dddddd');
	renderer.setSize(900,500);
	
	camera.position.z = 15;
	
	stage.appendChild(renderer.domElement);
	
	//let geometry = new THREE.PlaneGeometry( 6, 6, 2 );
	let geometry = new THREE.CylinderGeometry( 4, 4, 0.01, 64 );
	//leafmat = new THREE.MeshLambertMaterial( {color: 0x00ccff} );
	
	leafmat = new THREE.MeshPhongMaterial( {
					specular: 0xffffff,
					shininess: 4,
					bumpScale: 0.03
				} );
	//leafmat.emissive = "#FF0000";
	//leafmat.emissiveMap = new THREE.CanvasTexture(diffCanvas);
	leafmat.bumpMap = new THREE.CanvasTexture(bumpCanvas);
	leafmat.specularMap = new THREE.CanvasTexture(glossCanvas);
	leafmat.map = new THREE.CanvasTexture(diffCanvas);
	
	//leafmat.map.needsUpdate = true;
	
	leaf = new THREE.Mesh(geometry, leafmat);
	
	scene.add(leaf);
	
	let spotLight = new THREE.SpotLight(0xffffbb, 0.6);
	spotLight.position.set(0.5, 0, 1);
	spotLight.position.multiplyScalar(100);
	var ambientLight = new THREE.AmbientLight(0x666666);
	
	scene.add(spotLight);
	scene.add(ambientLight);
	
	spotLight.castShadow = true;
	spotLight.shadow.mapSize.width = 2048;
	spotLight.shadow.mapSize.height = 2048;
	spotLight.shadow.camera.near = 200;
	spotLight.shadow.camera.far = 1500;
	spotLight.shadow.camera.fov = 40;
	spotLight.shadow.bias = - 0.005;
	
	renderer.render(scene, camera);
	
	animate();
	
	function animate() {
		requestAnimationFrame( animate );
		leaf.rotation.z += 0.01;
		leaf.rotation.x += 0.001;
		leaf.rotation.y += 0.001;
		renderer.render( scene, camera );
	}
}

docReady(function() {
    //
});