three.js – Adjusting opacity of individual particles

EDIT – This answer shows how to set per-point opacity using a custom ShaderMaterial. See for an approach using PointsMaterial. ParticleSystem has been renamed to PointCloud and then to Points. Yes, you can create a Point Cloud and vary the alpha value of each particle’s color dynamically. In three.js, you can do this by … Read more

artifacts when rendering both sides of a transparent object with three.js

Self-transparency is particularly difficult in WebGL and three.js. You just have to really understand the issues, and then adapt your code to achieve the effect you want. You can achieve the look of a double-sided, transparent sphere in three.js, with a trick: You need to render two transparent spheres — one with material.side = THREE.BackSide, … Read more

Display wireframe and solid color

To render both a model and its wireframe, you can use a pattern like this one: // mesh var material = new THREE.MeshPhongMaterial( { color: 0xff0000, polygonOffset: true, polygonOffsetFactor: 1, // positive value pushes polygon further away polygonOffsetUnits: 1 } ); var mesh = new THREE.Mesh( geometry, material ); scene.add( mesh ) // wireframe var … Read more

Three.js Collada – What’s the proper way to dispose() and release memory (garbage collection)?

This should do the job: function disposeNode (node) { if (node instanceof THREE.Mesh) { if (node.geometry) { node.geometry.dispose (); } if (node.material) { if (node.material instanceof THREE.MeshFaceMaterial) { $.each (node.material.materials, function (idx, mtrl) { if ( (); if (mtrl.lightMap) mtrl.lightMap.dispose (); if (mtrl.bumpMap) mtrl.bumpMap.dispose (); if (mtrl.normalMap) mtrl.normalMap.dispose (); if (mtrl.specularMap) mtrl.specularMap.dispose (); if … Read more

Transparent objects in Three.js

Both your spheres are transparent, and are remaining so. What is happening is that the smaller sphere is not being rendered at all. Transparency in WebGL is tricky. You can google the issue to find out more about it. But you have stumbled upon an issue related to how three.js in particular handles transparency. The … Read more

How does the calculation of the light model work in a shader program?

Lambertian reflectance model To model the reflection of light in computer graphics is used a Bidirectional reflectance distribution function (BRDF). BRDF is a function that gives the relation between the light reflected along an outgoing direction and the light incident from an incoming direction. A perfect diffuse surface has a BRDF that has the same … Read more