hw6 helper

transparent shaderMaterial

by Leoooo

HTML

<div id="info">
Homework 5 Helper<br>
GLSL Phong Shading (per-pixel shading)<br>
Transparent ShaderMaterial
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/107/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js">
</script>
    
<script id="myVertexShader" type="x-shader/x-vertex">
    uniform vec3 lightpos;  // world coordinate
    varying vec3 eyelightdir;
    varying vec3 eyenormal;
    
    varying vec4 eyepos;
    
    void main() {
        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);

        eyepos = modelViewMatrix * vec4 (position, 1.0);
        vec4 eyelightpos= viewMatrix * vec4 (lightpos, 1.0);
        eyelightdir = normalize (eyelightpos.xyz - eyepos.xyz);
        eyenormal = normalMatrix * normal;
    }
</script>
<script id="myFragmentShader" type="x-shader/x-fragment">
    varying vec3 eyelightdir;
    varying vec3 eyenormal;`
    varying vec4 eyepos;
    uniform float opacity;
    
    void main() {
        float intensity = dot (normalize (eyenormal), normalize (eyelightdir));    
        vec3 diffuse = intensity*vec3 (1,1,1);
    
        vec3 h = normalize(-normalize (eyepos.xyz) + normalize (eyelightdir));
        float shininess = 40.;    
        vec3 specular = pow (dot (eyenormal, h), shininess) *vec3 (1,0,0);
        gl_FragColor = vec4(diffuse + specular, opacity);
    }
</script>

CSS

body {
    background-color: #fff;
    color: #111;
    margin: 0px;
    overflow: hidden;
    font-family: Monospace;
    font-size: 10px;
    position: absolute;
}
#info {
    position: absolute;
    top: 3%;
    width: 100%;
    padding: 5px;
    text-align: center;
    color: #ffff00
}

JavaScript

var scene, renderer, camera;
var mesh;
var pointLight;
var meshMaterial;
var angle = 0;

init();
animate();

function init() {
    var width = window.innerWidth;
    var height = window.innerHeight;

    camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);
    camera.position.set (0, 160, 400);
    camera.lookAt(new THREE.Vector3(0, 0, 0));

		renderer = new THREE.WebGLRenderer({
        antialias: true
    });
    renderer.setSize(width, height);
    document.body.appendChild(renderer.domElement);
    renderer.setClearColor(0x888888);

    scene = new THREE.Scene();
    let controls = new THREE.OrbitControls(camera, renderer.domElement);

    var gridXZ = new THREE.GridHelper(200, 20, 'red', 'white');
    scene.add(gridXZ);

    pointLight = new THREE.PointLight(0xffffff);
    scene.add(pointLight);
		scene.add (new THREE.PointLightHelper (pointLight, 5));
    
    var ambientLight = new THREE.AmbientLight(0x111111);
    scene.add(ambientLight);
//////////////////////////////////////////////////////////
    meshMaterial = new THREE.ShaderMaterial({
        uniforms: {
        lightpos: {type: 'v3', value: new THREE.Vector3()},
        opacity: {type: 'f', value: 1.0}
        },
        vertexShader: document.getElementById('myVertexShader').textContent,
        fragmentShader: document.getElementById('myFragmentShader').textContent
    });
		
    // important!!
   meshMaterial.transparent = true;
  
  	var geometry = new THREE.TorusKnotGeometry(20, 5, 100, 16);
    mesh = new THREE.Mesh(geometry, meshMaterial);
    scene.add(mesh);
}

function animate() {
    angle += 0.01;
    pointLight.position.set(50 * Math.cos(angle), 80, 50 * Math.sin(angle));
    
   meshMaterial.uniforms.lightpos.value.copy (pointLight.position);
	 meshMaterial.uniforms.opacity.value = Math.abs(Math.sin (angle));    
    requestAnimationFrame(animate);

    renderer.render(scene, camera);
}