I am attempting to create a black skybox with white dots (stars) in three.js. However, due to the perspective effect, the dots appear darker in the corners where they are further away (as they get smaller and dimmer). Is there a way to make the appearance more uniform so that the corners are not as pronounced?
Here is an example (the camera is focused on one corner):
// setting up the 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);
// creating 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);
}
}
// creating 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>Instead of adjusting the size of the dots based on their distance from the center of the canvas when generating them, I would prefer a solution within three.js framework so that modifying the canvas is unnecessary. The denser distribution of dots in the corner is not an issue here as this demo aims for simplicity, while the actual implementation will have a more uniform dot distribution.