Displacement Map

displacement-map.markdown

Displacement Map

A Pen by Artem Zubkov on CodePen.

License.

script.babel

import Stats from "https://cdn.skypack.dev/[email protected]";
let renderer
    , controls
    , scene
    , camera
    , w, h
    , statsFps
    , statsMs

resize()
init()
animate()

function rand(min, max) {
    return Math.random() * (max - min) + min
}

function resize() {
    w = document.body.clientWidth
    h = document.body.clientHeight
    if (!camera) {
        return
    }
    
    camera.aspect = w / h
    camera.updateProjectionMatrix()
    renderer.setSize(w, h)
}

function init() {
    
    scene = new THREE.Scene()

    camera = new THREE.PerspectiveCamera(75, w / h, 1, 6000)
    camera.position.z = 50
    
    renderer = new THREE.WebGLRenderer({alpha: true})
    renderer.setSize(w, h)
    renderer.setClearColor("#0C7CA5", 0)
    renderer.setPixelRatio(window.devicePixelRatio)
    renderer.sortObjects = false
    renderer.autoClear = false
    renderer.generateMipmaps = false
    
    let light = new THREE.HemisphereLight('#fff', '#eee', 2)
    light.position.set(0, 0, 300)
    light.castShadow = true
    scene.add(light)

    light = new THREE.PointLight(0x222222, 3)
    light.position.x = 1000
    light.position.y = 500
    light.position.z = 1000
    light.castShadow = true
    scene.add(light)    
    
    camera.lookAt(scene.position)
    
    controls = new THREE.OrbitControls(camera, renderer.domElement);
    
    document.body.appendChild(renderer.domElement)
        
    statsFps = new Stats()
    document.body.appendChild(statsFps.dom)
    
    statsMs = new Stats()
    statsMs.showPanel(1)
    document.body.appendChild(statsMs.dom)
    
    window.addEventListener('resize', resize, false)
    create(scene)
}

function create(scene) {
    const geometry = new THREE.CylinderBufferGeometry( 7, 7, 40, 140, 120, true );
    const material = new THREE.MeshPhongMaterial( {color: 0x00ff00, side: 2} );

    material.map =
    material.displacementMap =
    material.normalMap =
            new THREE.Texture(generateBump(2 * 7 * Math.PI * 20, 60 * 20));

    material.map.needsUpdate = true;

    material.normalScale = new THREE.Vector2( 1, - 1 );

    material.displacementScale = 6;
    material.displacementBias = - 0.428408;

    const cylinder = new THREE.Mesh( geometry, material );

    scene.add(cylinder);
}

function animate() {
    
    requestAnimationFrame(animate)
    
    update()
    
    renderer.clear()
    renderer.render(scene, camera)
    
    controls.update()
    statsFps.update()
    statsMs.update()
    
}

function update() {
    
}

function generateBump(w, h, color) {

    var temp = document.createElement('canvas');
    temp.width = w;
    temp.height = h;
    var ws = w/10 | 0;
    var hm = h/10 | 0;
    var hs = hm;

    var ctx = temp.getContext('2d');
    // ctx.fillStyle = "#000";
    // ctx.fillRect(0, 0, w, h);
    let t = 0;
    
    while (ws--) {
        hs = hm;
        while (hs--) {
            t++;
            ctx.fillStyle = 'hsla(0,' + [50, (t % 10 ? .1 : Math.cos(t++)) * 100].map(d=>`${d}%`) + ',' + Math.cos(t) + ')';
            ctx.fillRect(0, 0, (ws + 1) * 10, (hs + 1) * 10);
        }
    }

    t = new Image();
    t.src = temp.toDataURL();

    return temp;
}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r79/three.min.js"></script>
<script src="https://threejs.org/examples/js/libs/stats.min.js"></script>
<script src="https://codepen.io/artzub/pen/qBdELPO.js"></script>
<script src="https://codepen.io/artzub/pen/ggpddZ.js"></script>

style.stylus

html, body, canvas
    margin 0
    padding 0
    width 100vw
    height 100vh
    overflow hidden
    background #1B2B34
    background radial-gradient(ellipse at center, #001B36 0%, #000 100%)
    position absolute
    top 0
    left 0

div
    z-index 100
    
div:last-child
    top 48px !important
        
canvas
    z-index 10