I'm working on creating a visually dynamic scene filled with points of varying widths and heights. The challenge I'm facing is figuring out how to manipulate the vertices in the vertex shader to achieve customized sizes for each point. Here's a glimpse of the scene setup:
// setting up the scene
var scene = new THREE.Scene();
scene.background = new THREE.Color(0xaaaaaa);
// configuring the camera
var aspectRatio = window.innerWidth / window.innerHeight;
var camera = new THREE.PerspectiveCamera(75, aspectRatio, 0.1, 10000);
camera.position.set(0, 1, -10);
// initializing the renderer
var renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setPixelRatio(window.devicePixelRatio); // <3 retina
renderer.setSize(window.innerWidth, window.innerHeight); // canvas size
document.body.appendChild(renderer.domElement);
// implementing controls
var controls = new THREE.TrackballControls(camera, renderer.domElement);
// adding lighting effects
var ambientLight = new THREE.AmbientLight(0xeeeeee);
scene.add(ambientLight);
/**
* Placing the points
**/
var BA = THREE.BufferAttribute;
var IBA = THREE.InstancedBufferAttribute;
var geometry = new THREE.InstancedBufferGeometry();
var n = 10000, // number of observations
rootN = n**(1/2),
cellSize = 20,
translations = new Float32Array(n * 3),
widths = new Float32Array(n),
heights = new Float32Array(n),
translationIterator = 0,
widthIterator = 0,
heightIterator = 0;
for (var i=0; i<n*3; i++) {
translations[translationIterator++] = (Math.random() * n) - (Math.random() * n);
translations[translationIterator++] = (Math.random() * n) - (Math.random() * n);
translations[translationIterator++] = (Math.random() * n) - (Math.random() * n);
widths[widthIterator++] = Math.random() * 20;
heights[heightIterator++] = Math.random() * 20;
}
// defining dimensions for the template box
var size = 10,
verts = [
0, 0, 0, // lower left
size, 0, 0, // lower right
size, size, 0, // upper right
0, size, 0, // upper left
]
var positionAttr = new BA(new Float32Array(verts), 3),
translationAttr = new IBA(translations, 3, true, 1),
widthAttr = new IBA(widths, 1, true, 1),
heightAttr = new IBA(heights, 1, true, 1);
// creating triangles using distinct vertices
geometry.setIndex([0,1,2, 2,3,0])
geometry.addAttribute('position', positionAttr);
geometry.addAttribute('translation', translationAttr);
geometry.addAttribute('width', widthAttr);
geometry.addAttribute('height', heightAttr);
var material = new THREE.RawShaderMaterial({
vertexShader: document.getElementById('vertex-shader').textContent,
fragmentShader: document.getElementById('fragment-shader').textContent,
});
material.side = THREE.DoubleSide;
var mesh = new THREE.Mesh(geometry, material);
mesh.frustumCulled = false;
scene.add(mesh);
// rendering loop
function render() {
requestAnimationFrame(render);
renderer.render(scene, camera);
controls.update();
};
// displaying some geometries
var geometry = new THREE.TorusGeometry(10, 3, 16, 100);
var material = new THREE.MeshNormalMaterial({ color: 0xffff00 });
render();html, body { width: 100vw; height: 100vh; background: #000; }
body { margin: 0; overflow: hidden; }
canvas { width: 100vw; height: 100vh; }<script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/97/three.min.js'></script>
<script src='https://threejs.org/examples/js/controls/TrackballControls.js'></script>
<script type='x-shader/x-vertex' id='vertex-shader'>
precision highp float;
uniform mat4 modelViewMatrix;
uniform mat4 projectionMatrix;
uniform vec3 cameraPosition;
attribute vec3 position;
attribute vec3 translation;
attribute float width;
attribute float height;
void main() {
// adjusting point positions based on widths and heights
vec3 pos = position + translation;
gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);
}
</script>
<script type='x-shader/x-fragment' id='fragment-shader'>
precision highp float;
void main() {
gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
}
</script>I'm seeking guidance on utilizing the width and height attributes effectively to ensure that each point adheres to its specified proportions. Is there a way to access the index of the vertex being drawn within its instance? Any tips or insights would be greatly appreciated!