Currently, I am developing a three.js scenario that showcases textured point sprites. These sprites obtain their textures from a single uniform, which is a 2D canvas containing the alphabet:
https://i.stack.imgur.com/Ceh9x.png
In my scene, all the letters on the canvas are in black color. However, distant points in the three.js scene appear faintly. Here's a snippet of the code I'm working with:
// aliases
var BA = THREE.BufferAttribute,
IBA = THREE.InstancedBufferAttribute,
ARR = Float32Array;
function Wordmap() {
// configuration settings
this.wordScalar = 0.0003;
this.heightScalar = 0.002;
this.sep = 0.9;
this.maxWords = 1000000;
this.background = '#fff';
this.color = '#000';
this.size = 64;
// state variables
this.state = {
layout: 'grid',
flying: false,
clock: null,
transitioning: false,
transitionQueued: false,
}
// data storage
this.data = {
input: null,
words: [],
layouts: {},
heightmap: {},
characters: {},
}
// initialize function
this.init();
}
// More functions and methods follow for creating scenes, handling characters, generating heightmaps, setting geometry, etc.
I have tried adjusting the alpha value in the fragment shader to increase the opacity, but it resulted in chunky and pixelated font display. Is there a way to enhance the opacity of distant points without affecting the font weight in the visualization? Your insights would be greatly appreciated!