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

Question

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);

It doesn't work like this. However, you can set your own mipmaps (for example different 1x1 textures) and play with filtering if you want transition between them to be visible. — StrandedKitty, Jan 22 '20 at 14:06
Is there a way to calculate the current mipmap level that's being used instead? — Sukanya Dasgupta, Jan 22 '20 at 14:26
Think of it like this: make your plane much much much larger, and render it at an angle. All of the mip level can be active depending on which pixels are rendering. — pailhead, Jan 22 '20 at 21:48
You can actually use an approach like in this example to visually debug mipmaps: https://threejs.org/examples/webgl_materials_texture_manualmipmap — Mugen87, Jan 23 '20 at 10:01
@Mugen87, thank you. Interesting way to view transitions between mipmap levels. — Sukanya Dasgupta, Jan 24 '20 at 13:14

Mugen87 · Answer 1 · 2020-01-22T14:17:37.897

2

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

edited Jan 22 '20 at 14:17

answered Jan 22 '20 at 13:52

Mugen87

28,829
4
27
50

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

1 Answers1