CODEWITHSUNDEEP
three.jstexture-mappingrenderermipmaps
Sukanya Dasgupta
Sukanya Dasgupta

Reputation: 323

How to properly use Three JS WebGLRenderer's method getActiveMipmapLevel()?

I have rendered a plane using Three JS with a texture image. I want to check the active mipmap level being used as I move the object front and back.

I am trying to fetch the active mipmap level being used to render the texture by using the method provided for WebGLRenderer called getActiveMipmapLevel(). Somehow the active mipmap level always remains 0 no matter how far I move the object front / back. I am trying to refetch and print the value in the render loop.

Any idea why?

var scene2 = new THREE.Scene();

var mipmapped_renderer = new THREE.WebGLRenderer({antialias: true});
mipmapped_renderer.setClearColor("#000000");
mipmapped_renderer.setSize(window.innerWidth , window.innerHeight);
mipmapped_renderer.autoClear = false;


var mipmapped_camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
);

mipmapped_camera.position.z = 10;


document.getElementById('left-canvas').appendChild(mipmapped_renderer.domElement);

window.addEventListener('resize', () => {
    mipmapped_renderer.setSize(window.innerWidth, window.innerHeight);
    mipmapped_camera.aspect = window.innerWidth / window.innerHeight;

    mipmapped_camera.updateProjectionMatrix();
});

var box2 = new THREE.PlaneGeometry(100, 100, 8 );

var texture2 = new THREE.TextureLoader().load( 'textures/chessboard2/chessboard_512.png' );
texture2.wrapS = THREE.RepeatWrapping;
texture2.wrapT = THREE.RepeatWrapping;
texture2.offset.set(0, 0);
texture2.repeat.set(2, 2);
texture2.minFilter = THREE.LinearMipmapLinearFilter;
texture2.magFilter = THREE.LinearFilter;
texture2.needsUpdate = true;
texture2.generateMipmaps = true;
var material2 = new THREE.MeshBasicMaterial({map: texture2, side: THREE.DoubleSide});
var mesh2 = new THREE.Mesh(box2, material2);
mesh2.scale.x = -1;
mesh2.rotation.x = 90
scene2.add(mesh2);


// post processing

var light = new THREE.PointLight(0xFFFFFF, 1, 500);
light.position.set(10, 0, 25);
scene2.add(light);


// render

var render = function() {
    requestAnimationFrame(render);
    mipmapped_renderer.render(scene2, mipmapped_camera);
    document.getElementById('mipmapLevel').innerHTML = mipmapped_renderer.getActiveMipmapLevel()
}

// animation

var rotSpeed = 0.1;

function onKeyDown(event) {
    event.preventDefault();
    var keyCode = event.which;

    if (keyCode == 87) {
        mipmapped_camera.position.z -= 1;
    } else if (keyCode == 83) {
        mipmapped_camera.position.z += 1;
    } else if (keyCode == 65) {
        mesh2.rotation.y += rotSpeed;
    } else if (keyCode == 68) {
        mesh2.rotation.y -= rotSpeed;
    }

    render();
}

render();

window.addEventListener('keydown', onKeyDown, false);

enter image description here

Upvotes: 1

Views: 264

Answers (1)

Mugen87
Mugen87

Reputation: 31066

I'm afraid WebGLRenderer.getActiveMipmapLevel() does not do what you expect. The method only returns the value which was previously set by WebGLRenderer.setRenderTarget().

Besides, WebGLRenderer.getActiveMipmapLevel() is only used WebGLShadowMap to correctly restore the internal render state when the shadow map is produced. So it is not necessarily intended for user level code.

three.js R112

Upvotes: 2

Related Questions