Skip to content

Instantly share code, notes, and snippets.

@valex

valex/index.html

Created September 28, 2018 11:16
Show Gist options
  • Save valex/bde3906acd7ab04f3c0e544c9c7d8bc3 to your computer and use it in GitHub Desktop.
Save valex/bde3906acd7ab04f3c0e544c9c7d8bc3 to your computer and use it in GitHub Desktop.
Download ZIP
EffectComposer masks + background image+
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Example 11.03 - Post processing masks</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/three.js/96/three.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/stats.js/r16/Stats.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.2/dat.gui.min.js"></script>
<script type="text/javascript" src="../libs96/OrbitControls.js"></script>
<script type="text/javascript" src="../utils/SceneUtils.js"></script>
<!-- https://github.com/mrdoob/three.js/tree/master/examples/js/postprocessing -->
<script type="text/javascript" src="../libs96/postprocessing/EffectComposer.js"></script>
<script type="text/javascript" src="../libs96/postprocessing/ShaderPass.js"></script>
<script type="text/javascript" src="../libs96/postprocessing/BloomPass.js"></script>
<script type="text/javascript" src="../libs96/postprocessing/MaskPass.js"></script>
<script type="text/javascript" src="../libs96/postprocessing/FilmPass.js"></script>
<script type="text/javascript" src="../libs96/postprocessing/RenderPass.js"></script>
<script type="text/javascript" src="../libs96/postprocessing/SavePass.js"></script>
<script type="text/javascript" src="../libs96/postprocessing/TexturePass.js"></script>
<!-- https://github.com/mrdoob/three.js/tree/master/examples/js/shaders -->
<script type="text/javascript" src="../libs96/shaders/CopyShader.js"></script>
<script type="text/javascript" src="../libs96/shaders/ColorifyShader.js"></script>
<script type="text/javascript" src="../libs96/shaders/ConvolutionShader.js"></script>
<script type="text/javascript" src="../libs96/shaders/FilmShader.js"></script>
<script type="text/javascript" src="../libs96/shaders/SepiaShader.js"></script>
<style>
body {
/* set margin to 0 and overflow to hidden, to go fullscreen */
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div id="Stats-output">
</div>
<!-- Div which will hold the Output -->
<div id="WebGL-output">
</div>
<!-- Javascript code that runs our Three.js examples -->
<script type="text/javascript">
// once everything is loaded, we run our Three.js stuff.
function init() {
var stats = initStats();
// create a scene, that will hold all our elements such as objects, cameras and lights.
var sceneEarth = new THREE.Scene();
var sceneMars = new THREE.Scene();
var sceneBG = new THREE.Scene();
// create a camera, which defines where we're looking at.
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
var cameraBG = new THREE.OrthographicCamera(-window.innerWidth, window.innerWidth, window.innerHeight, -window.innerHeight, -10000, 10000);
cameraBG.position.z = 50;
// create a render and set the size
var webGLRenderer = new THREE.WebGLRenderer();
webGLRenderer.setClearColor(new THREE.Color(0x000000));
webGLRenderer.setSize(window.innerWidth, window.innerHeight);
webGLRenderer.shadowMap.enabled = true;
webGLRenderer.shadowMap.type = THREE.PCFSoftShadowMap; // default THREE.PCFShadowMap
var sphere = createEarthMesh(new THREE.SphereGeometry(10, 40, 40));
sphere.position.x = -10;
var sphere2 = createMarshMesh(new THREE.SphereGeometry(5, 40, 40));
sphere2.position.x = 10;
sceneEarth.add(sphere);
sceneMars.add(sphere2);
// position and point the camera to the center of the scene
camera.position.x = -10;
camera.position.y = 15;
camera.position.z = 25;
camera.lookAt(new THREE.Vector3(0, 0, 0));
var orbitControls = new THREE.OrbitControls(camera);
orbitControls.autoRotate = false;
var clock = new THREE.Clock();
var ambi = new THREE.AmbientLight(0x181818);
var ambi2 = new THREE.AmbientLight(0x181818);
sceneEarth.add(ambi);
sceneMars.add(ambi2);
var spotLight = new THREE.DirectionalLight(0xffffff);
spotLight.position.set(550, 100, 550);
spotLight.intensity = 0.6;
var spotLight2 = new THREE.DirectionalLight(0xffffff);
spotLight.position.set(550, 100, 550);
spotLight.intensity = 0.6;
sceneEarth.add(spotLight);
sceneMars.add(spotLight2);
var materialColor = new THREE.MeshBasicMaterial({
map: new THREE.TextureLoader().load("../assets96/textures/starry-deep-outer-space-galaxy.jpg"),
depthTest: false
});
var bgPlane = new THREE.Mesh(new THREE.PlaneGeometry(1, 1), materialColor);
bgPlane.position.z = -100;
bgPlane.scale.set(window.innerWidth * 2, window.innerHeight * 2, 1);
sceneBG.add(bgPlane);
// add the output of the renderer to the html element
document.getElementById("WebGL-output").appendChild(webGLRenderer.domElement);
var bgPass = new THREE.RenderPass(sceneBG, cameraBG);
var renderPass = new THREE.RenderPass(sceneEarth, camera);
renderPass.clear = false;
var renderPass2 = new THREE.RenderPass(sceneMars, camera);
renderPass2.clear = false;
var effectCopy = new THREE.ShaderPass(THREE.CopyShader);
effectCopy.renderToScreen = true;
var clearMask = new THREE.ClearMaskPass();
// earth mask
var earthMask = new THREE.MaskPass(sceneEarth, camera);
// earthMask.inverse = true;
// mars mask
var marsMask = new THREE.MaskPass(sceneMars, camera);
// marsMask.inverse = true;
var effectSepia = new THREE.ShaderPass(THREE.SepiaShader);
effectSepia.uniforms['amount'].value = 0.8;
var effectColorify = new THREE.ShaderPass(THREE.ColorifyShader);
effectColorify.uniforms['color'].value.setRGB(0.5, 0.5, 1);
var composer = new THREE.EffectComposer(webGLRenderer);
composer.renderTarget1.stencilBuffer = true;
composer.renderTarget2.stencilBuffer = true;
composer.addPass(bgPass);
composer.addPass(renderPass);
composer.addPass(renderPass2);
composer.addPass(marsMask);
composer.addPass(effectColorify);
composer.addPass(clearMask);
composer.addPass(earthMask);
composer.addPass(effectSepia);
composer.addPass(clearMask);
composer.addPass(effectCopy);
render();
function createMarshMesh(geom) {
var planetTexture = new THREE.TextureLoader().load("../assets96/textures/planets/Mars_2k-050104.png");
var normalTexture = new THREE.TextureLoader().load("../assets96/textures/planets/Mars-normalmap_2k.png");
var planetMaterial = new THREE.MeshPhongMaterial();
planetMaterial.normalMap = normalTexture;
planetMaterial.map = planetTexture;
// planetMaterial.shininess = 150;
// create a multimaterial
var mesh = THREE.SceneUtils.createMultiMaterialObject(geom, [planetMaterial]);
return mesh;
}
function createEarthMesh(geom) {
var planetTexture = new THREE.TextureLoader().load("../assets96/textures/planets/Earth.png");
var specularTexture = new THREE.TextureLoader().load("../assets96/textures/planets/EarthSpec.png");
var normalTexture = new THREE.TextureLoader().load("../assets96/textures/planets/EarthNormal.png");
var planetMaterial = new THREE.MeshPhongMaterial();
planetMaterial.specularMap = specularTexture;
planetMaterial.specular = new THREE.Color(0x4444aa);
planetMaterial.normalMap = normalTexture;
planetMaterial.map = planetTexture;
// planetMaterial.shininess = 150;
// create a multimaterial
var mesh = THREE.SceneUtils.createMultiMaterialObject(geom, [planetMaterial]);
return mesh;
}
function render() {
webGLRenderer.autoClear = false;
stats.update();
//sphere.rotation.y=step+=0.01;
var delta = clock.getDelta();
orbitControls.update(delta);
sphere.rotation.y += 0.002;
sphere2.rotation.y += 0.002;
// render using requestAnimationFrame
requestAnimationFrame(render);
// webGLRenderer.render(scene, camera);
composer.render(delta);
}
function initStats() {
var stats = new Stats();
stats.setMode(0); // 0: fps, 1: ms
// Align top-left
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.domElement.style.top = '0px';
document.getElementById("Stats-output").appendChild(stats.domElement);
return stats;
}
}
window.onload = init;
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment