This source code running with Three.js javascript library.
I used just three.min.js, OBJLoader.js and ColladaLoader.js to make the x-ray effect.
I load one 3d object and using vertex and fragment shaders I rendered it.
The object is a castle and is named: cube2.dae.
This object is loaded with load function from OBJLoader.js.
Then all steps come to show this object using shaders.
<!DOCTYPE html>
<html>
<head>
<title>shaders x-ray effect</title>
<script src=”three.min.js”></script>
<script src=”OBJLoader.js”></script>
<script src=”ColladaLoader.js”></script>
<script id=”vertexShader” type=”x-shader/x-vertex”>
uniform float p;
varying float intensity;
void main()
{
vec3 vNormal = normalize( normalMatrix * normal );
intensity = pow(1.0 – abs(dot(vNormal, vec3(0, 0, 1))), p);
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}
</script>
<script id=”fragmentShader” type=”x-shader/x-vertex”>
uniform vec3 glowColor;
varying float intensity;
void main()
{
vec3 glow = glowColor * intensity;
gl_FragColor = vec4( glow, 1.0 );
}
</script>
<style>
html, body {
height: 100%;
margin: 0;
overflow: hidden;
}
canvas {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<script>
window.addEventListener(‘load’, function () {
var human;
var $ = document.querySelector.bind(document);
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(45, 1, 0.1, 30);
var renderer = new THREE.WebGLRenderer({antialias: true, alpha: true});
renderer.setClearColor(0x000000, 1.0);
lookAt = scene.position;
lookAt.y = 10;
camera.lookAt(lookAt);
document.body.appendChild(renderer.domElement);
var customMaterial = new THREE.ShaderMaterial({
uniforms: {
p: { type: “f”, value: 3 },
glowColor: { type: “c”, value: new THREE.Color(0x84ccff) },
},
vertexShader: $(‘#vertexShader’).text,
fragmentShader: $(‘#fragmentShader’).text,
side: THREE.DoubleSide,
blending: THREE.AdditiveBlending,
transparent: true,
depthWrite: false
});
var loader = new THREE.ColladaLoader();
loader.options.convertUpAxis = true;
loader.load(‘cube2.dae’, function (collada) {
dae = collada.scene;
dae.traverse( function ( child ) {
if (child instanceof THREE.Mesh) {
child.material = customMaterial;
}
} );
dae.position.y = 0;
dae.scale.x = 1;
dae.scale.y = 1;
dae.scale.z = 1;
human = dae;
scene.add(human);
});
function resize() {
var canvas = renderer.domElement;
var width = canvas.clientWidth;
var height = canvas.clientHeight;
if (canvas.width !== width || canvas.height !== height) {
renderer.setSize(width, height, false);
camera.aspect = width / height;
camera.updateProjectionMatrix();
}
}
function render(time) {
time *= 0.001;
resize();
camera.position.x = -20 * (Math.cos(time));
camera.position.z = (20 * (Math.sin(time)));
camera.position.y = 20;
camera.lookAt(lookAt);
renderer.render(scene, camera);
requestAnimationFrame(render);
}
requestAnimationFrame(render);
});
</script>
</body>
</html>
The result is this:
