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.

7 thoughts on “THREE.js corners of cubemap (skybox) are dark”

  1. Интернет-платформа Joy casino появилась на российском рынке в 2014 году.

    Гостям ресурса предлагается топовый программный продукт
    от известных производителей.
    В коллекцию азартных развлечений входят автоматы барабанного
    типа, лайв-игры и пари на спорт и киберспортивные дисциплины.

    Reply

Leave a Comment