<p dir="auto">I saw the Unreal Bloom and Renderer Transparency issue <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="324874907" data-permission-text="Title is private" data-url="https://github.com/mrdoob/three.js/issues/14104" data-hovercard-type="issue" data-hovercard-url="/mrdoob/three.js/issues/14104/hovercard" href="https://github.com/mrdoob/three.js/issues/14104">#14104</a><br>
But the problem seems still here in mapbox customlayer(not maptalk)</p>
<p dir="auto">I try to modifiy shader code in issue <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="324874907" data-permission-text="Title is private" data-url="https://github.com/mrdoob/three.js/issues/14104" data-hovercard-type="issue" data-hovercard-url="/mrdoob/three.js/issues/14104/hovercard" href="https://github.com/mrdoob/three.js/issues/14104">#14104</a> but it dose not work at all.</p>
<p dir="auto">UnrealBloomPass give the map a dark mask when I keep the origin shader code</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/29321723/79938490-52a5aa80-848f-11ea-9c54-a52f510db546.png"><img src="https://user-images.githubusercontent.com/29321723/79938490-52a5aa80-848f-11ea-9c54-a52f510db546.png" alt="image" style="max-width: 100%;"></a></p>
<p dir="auto">And after modiefy the shader code to control alpha the map still hide under a white mask.</p>
<p dir="auto">Try to stop render the compose will find the map below.</p>
<p dir="auto">I think it is a very important feature in Three.js and will do a big improvement on mapbox and other engine but I can not find out what is going on here.</p>
<p dir="auto">So I build a html demo here for testing copy it run and modify freely in liveserver.</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;

&lt;head&gt;
    &lt;title&gt;three.js webgl - postprocessing - unreal bloom&lt;/title&gt;
    &lt;meta charset=&quot;utf-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0&quot;&gt;
    &lt;script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.4.1/mapbox-gl.js'&gt;&lt;/script&gt;
    &lt;link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.4.1/mapbox-gl.css' rel='stylesheet' /&gt;
    &lt;script src='https://unpkg.com/three@0.106.2/build/three.min.js'&gt;&lt;/script&gt;


    &lt;script src=&quot;https://unpkg.com/three@0.106.2/examples/js/controls/OrbitControls&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;https://unpkg.com/three@0.106.2/examples/js/loaders/GLTFLoader&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;https://unpkg.com/three@0.106.2/examples/js/shaders/LuminosityHighPassShader&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;https://unpkg.com/three@0.106.2/examples/js/shaders/CopyShader&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;https://unpkg.com/three@0.106.2/examples/js/shaders/AfterimageShader&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;https://unpkg.com/three@0.106.2/examples/js/postprocessing/EffectComposer&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;https://unpkg.com/three@0.106.2/examples/js/postprocessing/ShaderPass&quot;&gt;&lt;/script&gt;

    &lt;script src=&quot;https://unpkg.com/three@0.106.2/examples/js/postprocessing/RenderPass&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;https://unpkg.com/three@0.106.2/examples/js/postprocessing/UnrealBloomPass&quot;&gt;&lt;/script&gt;

    &lt;style&gt;
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
    &lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;

    &lt;div id=&quot;map&quot;&gt;&lt;/div&gt;


    &lt;script type=&quot;module&quot;&gt;

        // add custom layer
        mapboxgl.accessToken = 'pk.eyJ1IjoibWFnaWN5eWFuZyIsImEiOiJjanRwa29jancwNXA3NDRvNGxqaDVxeGpoIn0.IELQU7NKuxXVBVHyGCOvCQ';
        let map = new mapboxgl.Map({
            container: 'map',
            style: 'mapbox://styles/mapbox/light-v10',
            zoom: 16,
            center: [120.75298105777887, 31.289765064205724],
            pitch: 60,
            antialias: true // create the gl context with MSAA antialiasing, so custom layers are antialiased
        });

        let modelOrigin = [120.75298105777887, 31.289765064205724];
        let modelAltitude = 100;
        let modelRotate = [Math.PI / 2, 0, 0];

        let modelAsMercatorCoordinate = mapboxgl.MercatorCoordinate.fromLngLat(modelOrigin, modelAltitude);

        // transformation parameters to position, rotate and scale the 3D model onto the map
        let modelTransform = {
            translateX: modelAsMercatorCoordinate.x,
            translateY: modelAsMercatorCoordinate.y,
            translateZ: modelAsMercatorCoordinate.z,
            rotateX: modelRotate[0],
            rotateY: modelRotate[1],
            rotateZ: modelRotate[2],
            /* Since our 3D model is in real world meters, a scale transform needs to be
            * applied since the CustomLayerInterface expects units in MercatorCoordinates.
            */
            scale: modelAsMercatorCoordinate.meterInMercatorCoordinateUnits()
        };

        let composer, cube;
        let params = {
            enable: true
        };

        let THREE = window.THREE;

        let customLayer = {
            id: '3d-model',
            type: 'custom',
            renderingMode: '3d',
            onAdd: function (map, gl) {
                this.camera = new THREE.Camera();
                this.scene = new THREE.Scene();
                this.map = map;


                let ambientLight = new THREE.AmbientLight(0xffffff);
                this.scene.add(ambientLight);

                let geometry = new THREE.BoxBufferGeometry(50, 50, 50, 2, 2, 2);
                let material = new THREE.MeshNormalMaterial();
                cube = new THREE.Mesh(geometry, material);

                this.scene.add(cube);


                this.map = map;

                // use the Mapbox GL JS map canvas for three.js
                this.renderer = new THREE.WebGLRenderer({
                    canvas: map.getCanvas(),
                    context: gl,
                    antialias: false,
                    preserveDrawingBuffer: true,
                    alpha:false,
                });

                // change value from false to true
                this.renderer.autoClear = false;

                // add EffectComposer
                composer = new THREE.EffectComposer(this.renderer);
                composer.addPass(new THREE.RenderPass(this.scene, this.camera));


                //bloompass
                var bloomPass = new THREE.UnrealBloomPass(new THREE.Vector2(window.innerWidth, window.innerHeight), 1.5, 0.4, 0.85);
                bloomPass.threshold = 0;
                bloomPass.strength = 0.6;
                bloomPass.radius = 0;
                composer.addPass(bloomPass);

            },
            render: function (gl, matrix) {
                let rotationX = new THREE.Matrix4().makeRotationAxis(new THREE.Vector3(1, 0, 0), modelTransform.rotateX);
                let rotationY = new THREE.Matrix4().makeRotationAxis(new THREE.Vector3(0, 1, 0), modelTransform.rotateY);
                let rotationZ = new THREE.Matrix4().makeRotationAxis(new THREE.Vector3(0, 0, 1), modelTransform.rotateZ);

                let m = new THREE.Matrix4().fromArray(matrix);
                let l = new THREE.Matrix4().makeTranslation(modelTransform.translateX, modelTransform.translateY, modelTransform.translateZ)
                    .scale(new THREE.Vector3(modelTransform.scale, -modelTransform.scale, modelTransform.scale))
                    .multiply(rotationX)
                    .multiply(rotationY)
                    .multiply(rotationZ);

                this.camera.projectionMatrix = m.multiply(l);
                this.renderer.state.reset();

                cube.rotation.x += 0.005;
                cube.rotation.y += 0.01;

                // use composer
                // composer.render();

                this.renderer.render(this.scene, this.camera);

                this.map.triggerRepaint();
            }
        };
        
        map.on('style.load', function () {
            map.addLayer(customLayer);
        });

    &lt;/script&gt;

&lt;/body&gt;

&lt;/html&gt;
"><pre class="notranslate"><span class="pl-c1">&lt;!DOCTYPE html<span class="pl-kos">&gt;</span></span>
<span class="pl-kos">&lt;</span><span class="pl-ent">html</span> <span class="pl-c1">lang</span>="<span class="pl-s">en</span>"<span class="pl-kos">&gt;</span>

<span class="pl-kos">&lt;</span><span class="pl-ent">head</span><span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;</span><span class="pl-ent">title</span><span class="pl-kos">&gt;</span>three.js webgl - postprocessing - unreal bloom<span class="pl-kos">&lt;/</span><span class="pl-ent">title</span><span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;</span><span class="pl-ent">meta</span> <span class="pl-c1">charset</span>="<span class="pl-s">utf-8</span>"<span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;</span><span class="pl-ent">meta</span> <span class="pl-c1">name</span>="<span class="pl-s">viewport</span>" <span class="pl-c1">content</span>="<span class="pl-s">width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0</span>"<span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;</span><span class="pl-ent">script</span> <span class="pl-c1">src</span>='<span class="pl-s">https://api.tiles.mapbox.com/mapbox-gl-js/v1.4.1/mapbox-gl.js</span>'<span class="pl-kos">&gt;</span><span class="pl-kos">&lt;/</span><span class="pl-ent">script</span><span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;</span><span class="pl-ent">link</span> <span class="pl-c1">href</span>='<span class="pl-s">https://api.tiles.mapbox.com/mapbox-gl-js/v1.4.1/mapbox-gl.css</span>' <span class="pl-c1">rel</span>='<span class="pl-s">stylesheet</span>' /&gt;
    <span class="pl-kos">&lt;</span><span class="pl-ent">script</span> <span class="pl-c1">src</span>='<span class="pl-s">https://unpkg.com/three@0.106.2/build/three.min.js</span>'<span class="pl-kos">&gt;</span><span class="pl-kos">&lt;/</span><span class="pl-ent">script</span><span class="pl-kos">&gt;</span>


    <span class="pl-kos">&lt;</span><span class="pl-ent">script</span> <span class="pl-c1">src</span>="<span class="pl-s">https://unpkg.com/three@0.106.2/examples/js/controls/OrbitControls</span>"<span class="pl-kos">&gt;</span><span class="pl-kos">&lt;/</span><span class="pl-ent">script</span><span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;</span><span class="pl-ent">script</span> <span class="pl-c1">src</span>="<span class="pl-s">https://unpkg.com/three@0.106.2/examples/js/loaders/GLTFLoader</span>"<span class="pl-kos">&gt;</span><span class="pl-kos">&lt;/</span><span class="pl-ent">script</span><span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;</span><span class="pl-ent">script</span> <span class="pl-c1">src</span>="<span class="pl-s">https://unpkg.com/three@0.106.2/examples/js/shaders/LuminosityHighPassShader</span>"<span class="pl-kos">&gt;</span><span class="pl-kos">&lt;/</span><span class="pl-ent">script</span><span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;</span><span class="pl-ent">script</span> <span class="pl-c1">src</span>="<span class="pl-s">https://unpkg.com/three@0.106.2/examples/js/shaders/CopyShader</span>"<span class="pl-kos">&gt;</span><span class="pl-kos">&lt;/</span><span class="pl-ent">script</span><span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;</span><span class="pl-ent">script</span> <span class="pl-c1">src</span>="<span class="pl-s">https://unpkg.com/three@0.106.2/examples/js/shaders/AfterimageShader</span>"<span class="pl-kos">&gt;</span><span class="pl-kos">&lt;/</span><span class="pl-ent">script</span><span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;</span><span class="pl-ent">script</span> <span class="pl-c1">src</span>="<span class="pl-s">https://unpkg.com/three@0.106.2/examples/js/postprocessing/EffectComposer</span>"<span class="pl-kos">&gt;</span><span class="pl-kos">&lt;/</span><span class="pl-ent">script</span><span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;</span><span class="pl-ent">script</span> <span class="pl-c1">src</span>="<span class="pl-s">https://unpkg.com/three@0.106.2/examples/js/postprocessing/ShaderPass</span>"<span class="pl-kos">&gt;</span><span class="pl-kos">&lt;/</span><span class="pl-ent">script</span><span class="pl-kos">&gt;</span>

    <span class="pl-kos">&lt;</span><span class="pl-ent">script</span> <span class="pl-c1">src</span>="<span class="pl-s">https://unpkg.com/three@0.106.2/examples/js/postprocessing/RenderPass</span>"<span class="pl-kos">&gt;</span><span class="pl-kos">&lt;/</span><span class="pl-ent">script</span><span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;</span><span class="pl-ent">script</span> <span class="pl-c1">src</span>="<span class="pl-s">https://unpkg.com/three@0.106.2/examples/js/postprocessing/UnrealBloomPass</span>"<span class="pl-kos">&gt;</span><span class="pl-kos">&lt;/</span><span class="pl-ent">script</span><span class="pl-kos">&gt;</span>

    <span class="pl-kos">&lt;</span><span class="pl-ent">style</span><span class="pl-kos">&gt;</span>
        <span class="pl-ent">body</span> {
            <span class="pl-c1">margin</span><span class="pl-kos">:</span> <span class="pl-c1">0</span>;
            <span class="pl-c1">padding</span><span class="pl-kos">:</span> <span class="pl-c1">0</span>;
        }

        <span class="pl-kos">#</span><span class="pl-c1">map</span> {
            <span class="pl-c1">position</span><span class="pl-kos">:</span> absolute;
            <span class="pl-c1">top</span><span class="pl-kos">:</span> <span class="pl-c1">0</span>;
            <span class="pl-c1">bottom</span><span class="pl-kos">:</span> <span class="pl-c1">0</span>;
            <span class="pl-c1">width</span><span class="pl-kos">:</span> <span class="pl-c1">100<span class="pl-smi">%</span></span>;
        }
    <span class="pl-kos">&lt;/</span><span class="pl-ent">style</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;/</span><span class="pl-ent">head</span><span class="pl-kos">&gt;</span>

<span class="pl-kos">&lt;</span><span class="pl-ent">body</span><span class="pl-kos">&gt;</span>

    <span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">id</span>="<span class="pl-s">map</span>"<span class="pl-kos">&gt;</span><span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>


    <span class="pl-kos">&lt;</span><span class="pl-ent">script</span> <span class="pl-c1">type</span>="<span class="pl-s">module</span>"<span class="pl-kos">&gt;</span>

        <span class="pl-c">// add custom layer</span>
        <span class="pl-s1">mapboxgl</span><span class="pl-kos">.</span><span class="pl-c1">accessToken</span> <span class="pl-c1">=</span> <span class="pl-s">'pk.eyJ1IjoibWFnaWN5eWFuZyIsImEiOiJjanRwa29jancwNXA3NDRvNGxqaDVxeGpoIn0.IELQU7NKuxXVBVHyGCOvCQ'</span><span class="pl-kos">;</span>
        <span class="pl-k">let</span> <span class="pl-s1">map</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-s1">mapboxgl</span><span class="pl-kos">.</span><span class="pl-c1">Map</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
            <span class="pl-c1">container</span>: <span class="pl-s">'map'</span><span class="pl-kos">,</span>
            <span class="pl-c1">style</span>: <span class="pl-s">'mapbox://styles/mapbox/light-v10'</span><span class="pl-kos">,</span>
            <span class="pl-c1">zoom</span>: <span class="pl-c1">16</span><span class="pl-kos">,</span>
            <span class="pl-c1">center</span>: <span class="pl-kos">[</span><span class="pl-c1">120.75298105777887</span><span class="pl-kos">,</span> <span class="pl-c1">31.289765064205724</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
            <span class="pl-c1">pitch</span>: <span class="pl-c1">60</span><span class="pl-kos">,</span>
            <span class="pl-c1">antialias</span>: <span class="pl-c1">true</span> <span class="pl-c">// create the gl context with MSAA antialiasing, so custom layers are antialiased</span>
        <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

        <span class="pl-k">let</span> <span class="pl-s1">modelOrigin</span> <span class="pl-c1">=</span> <span class="pl-kos">[</span><span class="pl-c1">120.75298105777887</span><span class="pl-kos">,</span> <span class="pl-c1">31.289765064205724</span><span class="pl-kos">]</span><span class="pl-kos">;</span>
        <span class="pl-k">let</span> <span class="pl-s1">modelAltitude</span> <span class="pl-c1">=</span> <span class="pl-c1">100</span><span class="pl-kos">;</span>
        <span class="pl-k">let</span> <span class="pl-s1">modelRotate</span> <span class="pl-c1">=</span> <span class="pl-kos">[</span><span class="pl-v">Math</span><span class="pl-kos">.</span><span class="pl-c1">PI</span> <span class="pl-c1">/</span> <span class="pl-c1">2</span><span class="pl-kos">,</span> <span class="pl-c1">0</span><span class="pl-kos">,</span> <span class="pl-c1">0</span><span class="pl-kos">]</span><span class="pl-kos">;</span>

        <span class="pl-k">let</span> <span class="pl-s1">modelAsMercatorCoordinate</span> <span class="pl-c1">=</span> <span class="pl-s1">mapboxgl</span><span class="pl-kos">.</span><span class="pl-c1">MercatorCoordinate</span><span class="pl-kos">.</span><span class="pl-en">fromLngLat</span><span class="pl-kos">(</span><span class="pl-s1">modelOrigin</span><span class="pl-kos">,</span> <span class="pl-s1">modelAltitude</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

        <span class="pl-c">// transformation parameters to position, rotate and scale the 3D model onto the map</span>
        <span class="pl-k">let</span> <span class="pl-s1">modelTransform</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
            <span class="pl-c1">translateX</span>: <span class="pl-s1">modelAsMercatorCoordinate</span><span class="pl-kos">.</span><span class="pl-c1">x</span><span class="pl-kos">,</span>
            <span class="pl-c1">translateY</span>: <span class="pl-s1">modelAsMercatorCoordinate</span><span class="pl-kos">.</span><span class="pl-c1">y</span><span class="pl-kos">,</span>
            <span class="pl-c1">translateZ</span>: <span class="pl-s1">modelAsMercatorCoordinate</span><span class="pl-kos">.</span><span class="pl-c1">z</span><span class="pl-kos">,</span>
            <span class="pl-c1">rotateX</span>: <span class="pl-s1">modelRotate</span><span class="pl-kos">[</span><span class="pl-c1">0</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
            <span class="pl-c1">rotateY</span>: <span class="pl-s1">modelRotate</span><span class="pl-kos">[</span><span class="pl-c1">1</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
            <span class="pl-c1">rotateZ</span>: <span class="pl-s1">modelRotate</span><span class="pl-kos">[</span><span class="pl-c1">2</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
            <span class="pl-c">/* Since our 3D model is in real world meters, a scale transform needs to be</span>
<span class="pl-c">            * applied since the CustomLayerInterface expects units in MercatorCoordinates.</span>
<span class="pl-c">            */</span>
            <span class="pl-c1">scale</span>: <span class="pl-s1">modelAsMercatorCoordinate</span><span class="pl-kos">.</span><span class="pl-en">meterInMercatorCoordinateUnits</span><span class="pl-kos">(</span><span class="pl-kos">)</span>
        <span class="pl-kos">}</span><span class="pl-kos">;</span>

        <span class="pl-k">let</span> <span class="pl-s1">composer</span><span class="pl-kos">,</span> <span class="pl-s1">cube</span><span class="pl-kos">;</span>
        <span class="pl-k">let</span> <span class="pl-s1">params</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
            <span class="pl-c1">enable</span>: <span class="pl-c1">true</span>
        <span class="pl-kos">}</span><span class="pl-kos">;</span>

        <span class="pl-k">let</span> <span class="pl-c1">THREE</span> <span class="pl-c1">=</span> <span class="pl-smi">window</span><span class="pl-kos">.</span><span class="pl-c1">THREE</span><span class="pl-kos">;</span>

        <span class="pl-k">let</span> <span class="pl-s1">customLayer</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
            <span class="pl-c1">id</span>: <span class="pl-s">'3d-model'</span><span class="pl-kos">,</span>
            <span class="pl-c1">type</span>: <span class="pl-s">'custom'</span><span class="pl-kos">,</span>
            <span class="pl-c1">renderingMode</span>: <span class="pl-s">'3d'</span><span class="pl-kos">,</span>
            <span class="pl-en">onAdd</span>: <span class="pl-k">function</span> <span class="pl-kos">(</span><span class="pl-s1">map</span><span class="pl-kos">,</span> <span class="pl-s1">gl</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
                <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">camera</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-c1">THREE</span><span class="pl-kos">.</span><span class="pl-c1">Camera</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
                <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">scene</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-c1">THREE</span><span class="pl-kos">.</span><span class="pl-c1">Scene</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
                <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">map</span> <span class="pl-c1">=</span> <span class="pl-s1">map</span><span class="pl-kos">;</span>


                <span class="pl-k">let</span> <span class="pl-s1">ambientLight</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-c1">THREE</span><span class="pl-kos">.</span><span class="pl-c1">AmbientLight</span><span class="pl-kos">(</span><span class="pl-c1">0xffffff</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
                <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">scene</span><span class="pl-kos">.</span><span class="pl-en">add</span><span class="pl-kos">(</span><span class="pl-s1">ambientLight</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

                <span class="pl-k">let</span> <span class="pl-s1">geometry</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-c1">THREE</span><span class="pl-kos">.</span><span class="pl-c1">BoxBufferGeometry</span><span class="pl-kos">(</span><span class="pl-c1">50</span><span class="pl-kos">,</span> <span class="pl-c1">50</span><span class="pl-kos">,</span> <span class="pl-c1">50</span><span class="pl-kos">,</span> <span class="pl-c1">2</span><span class="pl-kos">,</span> <span class="pl-c1">2</span><span class="pl-kos">,</span> <span class="pl-c1">2</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
                <span class="pl-k">let</span> <span class="pl-s1">material</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-c1">THREE</span><span class="pl-kos">.</span><span class="pl-c1">MeshNormalMaterial</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
                <span class="pl-s1">cube</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-c1">THREE</span><span class="pl-kos">.</span><span class="pl-c1">Mesh</span><span class="pl-kos">(</span><span class="pl-s1">geometry</span><span class="pl-kos">,</span> <span class="pl-s1">material</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

                <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">scene</span><span class="pl-kos">.</span><span class="pl-en">add</span><span class="pl-kos">(</span><span class="pl-s1">cube</span><span class="pl-kos">)</span><span class="pl-kos">;</span>


                <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">map</span> <span class="pl-c1">=</span> <span class="pl-s1">map</span><span class="pl-kos">;</span>

                <span class="pl-c">// use the Mapbox GL JS map canvas for three.js</span>
                <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">renderer</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-c1">THREE</span><span class="pl-kos">.</span><span class="pl-c1">WebGLRenderer</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
                    <span class="pl-c1">canvas</span>: <span class="pl-s1">map</span><span class="pl-kos">.</span><span class="pl-en">getCanvas</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
                    <span class="pl-c1">context</span>: <span class="pl-s1">gl</span><span class="pl-kos">,</span>
                    <span class="pl-c1">antialias</span>: <span class="pl-c1">false</span><span class="pl-kos">,</span>
                    <span class="pl-c1">preserveDrawingBuffer</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span>
                    <span class="pl-c1">alpha</span>:<span class="pl-c1">false</span><span class="pl-kos">,</span>
                <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

                <span class="pl-c">// change value from false to true</span>
                <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">renderer</span><span class="pl-kos">.</span><span class="pl-c1">autoClear</span> <span class="pl-c1">=</span> <span class="pl-c1">false</span><span class="pl-kos">;</span>

                <span class="pl-c">// add EffectComposer</span>
                <span class="pl-s1">composer</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-c1">THREE</span><span class="pl-kos">.</span><span class="pl-c1">EffectComposer</span><span class="pl-kos">(</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">renderer</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
                <span class="pl-s1">composer</span><span class="pl-kos">.</span><span class="pl-en">addPass</span><span class="pl-kos">(</span><span class="pl-k">new</span> <span class="pl-c1">THREE</span><span class="pl-kos">.</span><span class="pl-c1">RenderPass</span><span class="pl-kos">(</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">scene</span><span class="pl-kos">,</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">camera</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">;</span>


                <span class="pl-c">//bloompass</span>
                <span class="pl-k">var</span> <span class="pl-s1">bloomPass</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-c1">THREE</span><span class="pl-kos">.</span><span class="pl-c1">UnrealBloomPass</span><span class="pl-kos">(</span><span class="pl-k">new</span> <span class="pl-c1">THREE</span><span class="pl-kos">.</span><span class="pl-c1">Vector2</span><span class="pl-kos">(</span><span class="pl-smi">window</span><span class="pl-kos">.</span><span class="pl-c1">innerWidth</span><span class="pl-kos">,</span> <span class="pl-smi">window</span><span class="pl-kos">.</span><span class="pl-c1">innerHeight</span><span class="pl-kos">)</span><span class="pl-kos">,</span> <span class="pl-c1">1.5</span><span class="pl-kos">,</span> <span class="pl-c1">0.4</span><span class="pl-kos">,</span> <span class="pl-c1">0.85</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
                <span class="pl-s1">bloomPass</span><span class="pl-kos">.</span><span class="pl-c1">threshold</span> <span class="pl-c1">=</span> <span class="pl-c1">0</span><span class="pl-kos">;</span>
                <span class="pl-s1">bloomPass</span><span class="pl-kos">.</span><span class="pl-c1">strength</span> <span class="pl-c1">=</span> <span class="pl-c1">0.6</span><span class="pl-kos">;</span>
                <span class="pl-s1">bloomPass</span><span class="pl-kos">.</span><span class="pl-c1">radius</span> <span class="pl-c1">=</span> <span class="pl-c1">0</span><span class="pl-kos">;</span>
                <span class="pl-s1">composer</span><span class="pl-kos">.</span><span class="pl-en">addPass</span><span class="pl-kos">(</span><span class="pl-s1">bloomPass</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

            <span class="pl-kos">}</span><span class="pl-kos">,</span>
            <span class="pl-en">render</span>: <span class="pl-k">function</span> <span class="pl-kos">(</span><span class="pl-s1">gl</span><span class="pl-kos">,</span> <span class="pl-s1">matrix</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
                <span class="pl-k">let</span> <span class="pl-s1">rotationX</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-c1">THREE</span><span class="pl-kos">.</span><span class="pl-c1">Matrix4</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">makeRotationAxis</span><span class="pl-kos">(</span><span class="pl-k">new</span> <span class="pl-c1">THREE</span><span class="pl-kos">.</span><span class="pl-c1">Vector3</span><span class="pl-kos">(</span><span class="pl-c1">1</span><span class="pl-kos">,</span> <span class="pl-c1">0</span><span class="pl-kos">,</span> <span class="pl-c1">0</span><span class="pl-kos">)</span><span class="pl-kos">,</span> <span class="pl-s1">modelTransform</span><span class="pl-kos">.</span><span class="pl-c1">rotateX</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
                <span class="pl-k">let</span> <span class="pl-s1">rotationY</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-c1">THREE</span><span class="pl-kos">.</span><span class="pl-c1">Matrix4</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">makeRotationAxis</span><span class="pl-kos">(</span><span class="pl-k">new</span> <span class="pl-c1">THREE</span><span class="pl-kos">.</span><span class="pl-c1">Vector3</span><span class="pl-kos">(</span><span class="pl-c1">0</span><span class="pl-kos">,</span> <span class="pl-c1">1</span><span class="pl-kos">,</span> <span class="pl-c1">0</span><span class="pl-kos">)</span><span class="pl-kos">,</span> <span class="pl-s1">modelTransform</span><span class="pl-kos">.</span><span class="pl-c1">rotateY</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
                <span class="pl-k">let</span> <span class="pl-s1">rotationZ</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-c1">THREE</span><span class="pl-kos">.</span><span class="pl-c1">Matrix4</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">makeRotationAxis</span><span class="pl-kos">(</span><span class="pl-k">new</span> <span class="pl-c1">THREE</span><span class="pl-kos">.</span><span class="pl-c1">Vector3</span><span class="pl-kos">(</span><span class="pl-c1">0</span><span class="pl-kos">,</span> <span class="pl-c1">0</span><span class="pl-kos">,</span> <span class="pl-c1">1</span><span class="pl-kos">)</span><span class="pl-kos">,</span> <span class="pl-s1">modelTransform</span><span class="pl-kos">.</span><span class="pl-c1">rotateZ</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

                <span class="pl-k">let</span> <span class="pl-s1">m</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-c1">THREE</span><span class="pl-kos">.</span><span class="pl-c1">Matrix4</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">fromArray</span><span class="pl-kos">(</span><span class="pl-s1">matrix</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
                <span class="pl-k">let</span> <span class="pl-s1">l</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-c1">THREE</span><span class="pl-kos">.</span><span class="pl-c1">Matrix4</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">makeTranslation</span><span class="pl-kos">(</span><span class="pl-s1">modelTransform</span><span class="pl-kos">.</span><span class="pl-c1">translateX</span><span class="pl-kos">,</span> <span class="pl-s1">modelTransform</span><span class="pl-kos">.</span><span class="pl-c1">translateY</span><span class="pl-kos">,</span> <span class="pl-s1">modelTransform</span><span class="pl-kos">.</span><span class="pl-c1">translateZ</span><span class="pl-kos">)</span>
                    <span class="pl-kos">.</span><span class="pl-en">scale</span><span class="pl-kos">(</span><span class="pl-k">new</span> <span class="pl-c1">THREE</span><span class="pl-kos">.</span><span class="pl-c1">Vector3</span><span class="pl-kos">(</span><span class="pl-s1">modelTransform</span><span class="pl-kos">.</span><span class="pl-c1">scale</span><span class="pl-kos">,</span> <span class="pl-c1">-</span><span class="pl-s1">modelTransform</span><span class="pl-kos">.</span><span class="pl-c1">scale</span><span class="pl-kos">,</span> <span class="pl-s1">modelTransform</span><span class="pl-kos">.</span><span class="pl-c1">scale</span><span class="pl-kos">)</span><span class="pl-kos">)</span>
                    <span class="pl-kos">.</span><span class="pl-en">multiply</span><span class="pl-kos">(</span><span class="pl-s1">rotationX</span><span class="pl-kos">)</span>
                    <span class="pl-kos">.</span><span class="pl-en">multiply</span><span class="pl-kos">(</span><span class="pl-s1">rotationY</span><span class="pl-kos">)</span>
                    <span class="pl-kos">.</span><span class="pl-en">multiply</span><span class="pl-kos">(</span><span class="pl-s1">rotationZ</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

                <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">camera</span><span class="pl-kos">.</span><span class="pl-c1">projectionMatrix</span> <span class="pl-c1">=</span> <span class="pl-s1">m</span><span class="pl-kos">.</span><span class="pl-en">multiply</span><span class="pl-kos">(</span><span class="pl-s1">l</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
                <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">renderer</span><span class="pl-kos">.</span><span class="pl-c1">state</span><span class="pl-kos">.</span><span class="pl-en">reset</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

                <span class="pl-s1">cube</span><span class="pl-kos">.</span><span class="pl-c1">rotation</span><span class="pl-kos">.</span><span class="pl-c1">x</span> <span class="pl-c1">+=</span> <span class="pl-c1">0.005</span><span class="pl-kos">;</span>
                <span class="pl-s1">cube</span><span class="pl-kos">.</span><span class="pl-c1">rotation</span><span class="pl-kos">.</span><span class="pl-c1">y</span> <span class="pl-c1">+=</span> <span class="pl-c1">0.01</span><span class="pl-kos">;</span>

                <span class="pl-c">// use composer</span>
                <span class="pl-c">// composer.render();</span>

                <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">renderer</span><span class="pl-kos">.</span><span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">scene</span><span class="pl-kos">,</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">camera</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

                <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">map</span><span class="pl-kos">.</span><span class="pl-en">triggerRepaint</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
            <span class="pl-kos">}</span>
        <span class="pl-kos">}</span><span class="pl-kos">;</span>
        
        <span class="pl-s1">map</span><span class="pl-kos">.</span><span class="pl-en">on</span><span class="pl-kos">(</span><span class="pl-s">'style.load'</span><span class="pl-kos">,</span> <span class="pl-k">function</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
            <span class="pl-s1">map</span><span class="pl-kos">.</span><span class="pl-en">addLayer</span><span class="pl-kos">(</span><span class="pl-s1">customLayer</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
        <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

    <span class="pl-kos">&lt;/</span><span class="pl-ent">script</span><span class="pl-kos">&gt;</span>

<span class="pl-kos">&lt;/</span><span class="pl-ent">body</span><span class="pl-kos">&gt;</span>

<span class="pl-kos">&lt;/</span><span class="pl-ent">html</span><span class="pl-kos">&gt;</span></pre></div>
<h5 dir="auto">Description of the problem</h5>
<p dir="auto">well, i tried to convert a animated model to add to my Oculus Home to a glb file, since it has something that blocks the home, it gives me back a corrupted copy/unanimated copy.</p>
<p dir="auto">Fix please?</p>
<h5 dir="auto">Three.js version</h5>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Dev</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> r101</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> ...</li>
</ul>
<h5 dir="auto">Browser</h5>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> All of them</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> Chrome</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Firefox</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Internet Explorer</li>
</ul>
<h5 dir="auto">OS</h5>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> All of them</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> Windows</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> macOS</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Linux</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Android</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> iOS</li>
</ul>
<h5 dir="auto">Hardware Requirements (graphics card, VR Device, ...)</h5>