CODEWITHSUNDEEP
javascriptthree.jsskybox
asdjfiasd
asdjfiasd

Reputation: 1730

THREE.js corners of cubemap (skybox) are dark

I'm trying to make black skybox with white dots (stars) in three.js. Because corners are further away, dots appear darker in corners (perspective is making them smaller, dimmer). Is it possible to make it more uniform so that corners are not so obvious?

Here is example (camera is looking into one corner):

// scene
var scene, camera, renderer;
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.05, 1000);
camera.position.z = -0.01;
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x000000, 1);
document.body.appendChild(renderer.domElement);

// canvas with dots
var canvas, context, texture, geometry, mesh, material, x, y, s, dx, dy;
canvas = document.createElement('canvas');
canvas.width = 512;
canvas.height = 512;
context = canvas.getContext('2d');
context.fillStyle = 'white';
for (y = 0; y < 512; y += 8) {
    for (x = 0; x < 512; x += 8) {
        s = 1;
        context.fillRect(x, y, s, s);
    }
}

// cube with canvas texture 
var texture, material, geometry, mesh;
texture = new THREE.CanvasTexture(canvas);
material = new THREE.MeshBasicMaterial({map: texture, side: THREE.DoubleSide});
geometry = new THREE.BoxGeometry(100, 100, 100);
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

camera.lookAt(1, 1, 1);
renderer.render(scene, camera);
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r125/three.js"></script>

When I'm generating dots I could make them slightly bigger if they are further away from center of canvas, for example instead of s = 1; I would use:

dx = (x - 512) / 512;
dy = (y - 512) / 512;
s = 1 + Math.sqrt(dx * dx + dy * dy) / 2;

But I would rather have three.js solution so that I don't have to modify canvas. Dots being more dense in corner is not issue, this demo has uniform distribution of dots to make demo simpler, real code will not have dots denser in corners.

Upvotes: 0

Views: 535

Answers (1)

M -
M -

Reputation: 28462

This is a sort of optical illusion. It's not really darkening the corners, but the texture sample is using lower resolution MipMaps as the texture grows smaller and smaller. If you have a single white pixel, surrounded by 7 black ones, the MipMapping in smaller scales will start blending into a mostly black texture.

You could minimize this issue by making the white dots larger relative to its surrounding space. Or you could turn off MipMapping with texture.minFilter = THREE.LinearFilter; or NearestFilter, although this might give you an undesired, rough-edges look. See other Minification Filter options here.

See below, I'm using LinearFilter, and a 2px white square. It doesn't look great, but it illustrates both possible solutions:

// scene
var scene, camera, renderer;
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.05, 1000);
camera.position.z = -0.01;
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x000000, 1);
document.body.appendChild(renderer.domElement);

// canvas with dots
var canvas, context, texture, geometry, mesh, material, x, y, s, dx, dy;
canvas = document.createElement('canvas');
canvas.width = 512;
canvas.height = 512;
context = canvas.getContext('2d');
context.fillStyle = 'white';
for (y = 0; y < 512; y += 8) {
    for (x = 0; x < 512; x += 8) {
        s = 2;
        context.fillRect(x, y, s, s);
    }
}

// cube with canvas texture 
var texture, material, geometry, mesh;
texture = new THREE.CanvasTexture(canvas);
texture.minFilter = THREE.LinearFilter;
material = new THREE.MeshBasicMaterial({map: texture, side: THREE.DoubleSide});
geometry = new THREE.BoxGeometry(100, 100, 100);
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

camera.lookAt(1, 1, 1);
renderer.render(scene, camera);
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r125/three.js"></script>

Upvotes: 0

Related Questions