markusjohnsson/corruption.html

## corruption.html
<!DOCTYPE html>
<html>
<head>
    <title>Mapbox GL JS debug page</title>
    <meta charset='utf-8'>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <link rel='stylesheet' href='/dist/mapbox-gl.css' />
    <style>
        body { margin: 0; padding: 0; }
        html, body, #map { height: 100%; }
    </style>
</head>

<body>
<div id='map'></div>

<script src='/dist/mapbox-gl-dev.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/94/three.min.js"></script>
<script src='/debug/access_token_generated.js'></script>
<script>


var map = window.map = new mapboxgl.Map({
    container: 'map',
    zoom: 16.5,
    center: [-79.390307, 43.658956],
    bearing: 20,
    pitch: 60,
    style: 'mapbox://styles/mapbox/light-v9',
    hash: true
});

const THREE = window.THREE;

class ThreeJSCube {
    constructor() {
        this.id = 'mycustomlayer';
        this.type = 'custom';
        this.translate = [0.5, 0.5, 0];
        this.scale = 1;

        this.camera = new THREE.Camera();
        this.scene = new THREE.Scene();

        var geometry = new THREE.PlaneGeometry(1, 1, 1);

        var material = new THREE.ShaderMaterial({
          uniforms: {
            diffuse: {
              value: new THREE.TextureLoader().load("web_TARDIS_DIFF.jpg")
            }
          },
          transparent: true,
          vertexShader: `
            varying vec2 texcord;
            void main() {
              texcord = (position.xy + vec2(0.5, 0.5));
              gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
            }
            `,
          fragmentShader: `
            uniform sampler2D diffuse;
            varying vec2 texcord;
            void main() {
              gl_FragColor = vec4(texture2D(diffuse, texcord).rgb, 0.5);
            }
            `
        });

        this.cube = new THREE.Mesh(geometry, material);
        this.scene.add(this.cube);

    }

    onAdd(map, gl) {
        this.map = map;

        this.renderer = new THREE.WebGLRenderer({
            canvas: map.getCanvas(),
            context: gl
        });

        this.renderer.autoClear = false;
    }

    render(gl, matrix) {
        const m = new THREE.Matrix4().fromArray(matrix);
        const l = new THREE.Matrix4().makeTranslation(this.translate[0], this.translate[1], this.translate[2])
            .scale(new THREE.Vector3(this.scale, -this.scale, this.scale));


        this.camera.projectionMatrix.elements = matrix;
        this.camera.projectionMatrix = m.multiply(l);
        this.renderer.state.reset();
        this.renderer.render(this.scene, this.camera);
        this.map.triggerRepaint();
    }
}

map.on('load', function() {
    map.addLayer({
        'id': '3d-buildings',
        'source': 'composite',
        'source-layer': 'building',
        'filter': ['==', 'extrude', 'true'],
        'type': 'fill-extrusion',
        'minzoom': 15,
        'paint': {
            'fill-extrusion-color': '#ccc',
            'fill-extrusion-height': ["get", "height"]
        }
    });

    map.addLayer(new ThreeJSCube());
});
</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Mapbox GL JS debug page</title>
	<meta charset='utf-8'>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
	<link rel='stylesheet' href='/dist/mapbox-gl.css' />
	<style>
	body { margin: 0; padding: 0; }
	html, body, #map { height: 100%; }
	</style>
	</head>

	<body>
	<div id='map'></div>

	<script src='/dist/mapbox-gl-dev.js'></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/94/three.min.js"></script>
	<script src='/debug/access_token_generated.js'></script>
	<script>


	var map = window.map = new mapboxgl.Map({
	container: 'map',
	zoom: 16.5,
	center: [-79.390307, 43.658956],
	bearing: 20,
	pitch: 60,
	style: 'mapbox://styles/mapbox/light-v9',
	hash: true
	});

	const THREE = window.THREE;

	class ThreeJSCube {
	constructor() {
	this.id = 'mycustomlayer';
	this.type = 'custom';
	this.translate = [0.5, 0.5, 0];
	this.scale = 1;

	this.camera = new THREE.Camera();
	this.scene = new THREE.Scene();

	var geometry = new THREE.PlaneGeometry(1, 1, 1);

	var material = new THREE.ShaderMaterial({
	uniforms: {
	diffuse: {
	value: new THREE.TextureLoader().load("web_TARDIS_DIFF.jpg")
	}
	},
	transparent: true,
	vertexShader: `
	varying vec2 texcord;
	void main() {
	texcord = (position.xy + vec2(0.5, 0.5));
	gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
	}
	`,
	fragmentShader: `
	uniform sampler2D diffuse;
	varying vec2 texcord;
	void main() {
	gl_FragColor = vec4(texture2D(diffuse, texcord).rgb, 0.5);
	}
	`
	});

	this.cube = new THREE.Mesh(geometry, material);
	this.scene.add(this.cube);

	}

	onAdd(map, gl) {
	this.map = map;

	this.renderer = new THREE.WebGLRenderer({
	canvas: map.getCanvas(),
	context: gl
	});

	this.renderer.autoClear = false;
	}

	render(gl, matrix) {
	const m = new THREE.Matrix4().fromArray(matrix);
	const l = new THREE.Matrix4().makeTranslation(this.translate[0], this.translate[1], this.translate[2])
	.scale(new THREE.Vector3(this.scale, -this.scale, this.scale));


	this.camera.projectionMatrix.elements = matrix;
	this.camera.projectionMatrix = m.multiply(l);
	this.renderer.state.reset();
	this.renderer.render(this.scene, this.camera);
	this.map.triggerRepaint();
	}
	}

	map.on('load', function() {
	map.addLayer({
	'id': '3d-buildings',
	'source': 'composite',
	'source-layer': 'building',
	'filter': ['==', 'extrude', 'true'],
	'type': 'fill-extrusion',
	'minzoom': 15,
	'paint': {
	'fill-extrusion-color': '#ccc',
	'fill-extrusion-height': ["get", "height"]
	}
	});

	map.addLayer(new ThreeJSCube());
	});
	</script>
	</body>
	</html>