1

I am using a texture atlas to hold a sequence of images. When mapping to a mesh with MeshLambertMaterial, using Texture.offset and Texture.repeat works beautifully to cut the subtexture out of the entire image.

However, using the exact same texture instance for a PointCloudMaterial renders the particles with the entire atlas, not just the selected subimage.

I tried to follow the three.js source code, but the documentation is scarce.

Is there a workaround for this better than using canvases to chop up the image?

Edit: As requested, a work-in-progress is available at http://jnm2.com/minesweeper/.

6
  • It is now called PointCloud. You can create your own ShaderMaterial to use with the PointCloud -- instead of PointCloudMaterial. Is that acceptable? Aug 16, 2014 at 2:42
  • I may need a bit of introduction to shaders. Want to answer it?
    – jnm2
    Aug 16, 2014 at 13:07
  • I wrote a shader that does exactly what you suggest. It works for meshes. For PointCloud, it stays invisible and WebGL throws two INVALID_OPERATION errors each render: "drawArrays: Insufficient buffer size" and "vertexAttribPointer: A buffer must be bound."
    – jnm2
    Aug 16, 2014 at 14:09
  • Can you provide your code and a simple live example? Aug 16, 2014 at 14:31
  • Got it hosted if you'd like to see it. Also, the shader I wrote doesn't do lighting and the box edges look odd at extreme angles, so for meshes I'll go back to the LambertMaterial with texture offset and repeat. Still wonder why your suggestion doesn't work for PointSystems though.
    – jnm2
    Aug 18, 2014 at 19:33

1 Answer 1

10

THREE.PointCloudMaterial has been renamed THREE.PointsMaterial.

THREE.PointCloud has been renamed THREE.Points.


You want to use a sprite sheet with your point cloud.

Instead of using PointsMaterial with your Points, you can create a custom ShaderMaterial instead.

The custom ShaderMaterial can access your sprite sheet and use a different sub-image for each particle.

To do so, use a shader like this one:

<script type="x-shader/x-vertex" id="vertexshader">

attribute vec2 offset;

varying vec2 vOffset;

void main() {

    vOffset = offset;

    gl_PointSize = 25.0;

    gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );

}
</script>

<script type="x-shader/x-fragment" id="fragmentshader">

uniform sampler2D spriteSheet;
uniform vec2 repeat;

varying vec2 vOffset;

void main() {

    vec2 uv = vec2( gl_PointCoord.x, 1.0 - gl_PointCoord.y );

    vec4 tex = texture2D( spriteSheet, uv * repeat + vOffset );
    
    if ( tex.a < 0.5 ) discard;

    gl_FragColor = tex;

}

</script>

Then

   // geometry
    geometry = new THREE.BufferGeometry();
 
    // attributes
    var numVertices = 20;
    var positions = new Float32Array( numVertices * 3 ); // 3 coordinates per point
    var offsets = new Float32Array( numVertices * 2 ); // 2 coordinates per point

    geometry.setAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
    geometry.setAttribute( 'offset', new THREE.BufferAttribute( offsets, 2 ) );

    // populate offsets
    var offset = new THREE.Vector2();

    for ( var i = 0, index = 0, l = numVertices; i < l; i ++, index += 3 ) {
 
        positions[ index ] = 100 * Math.random() - 50;
        positions[ index + 1 ] = 100 * Math.random() - 50;
        positions[ index + 2 ] = 100 * Math.random() - 50;

    }

   for ( var i = 0, index = 0, l = numVertices; i < l; i ++, index += 2 ) {

        offset.set( THREE.Math.randInt( 1, 3 ), THREE.Math.randInt( 2, 3 ) ).multiplyScalar( 0.25 ); // sprite sheet: 4 rows x 4 cols

        offsets[ index ] = offset.x;
        offsets[ index + 1 ] = offset.y;

    }

    // image
    image = document.createElement( 'img' );
    image.addEventListener( 'load', function ( event ) { texture.needsUpdate = true; } );

    // texture
    var texture = new THREE.Texture( image );

    // uniforms
    uniforms = {

        spriteSheet: { value: texture },
        repeat: { value: new THREE.Vector2( 0.25, 0.25 ) }

    };

    // material
    var material = new THREE.ShaderMaterial( {

        uniforms:       uniforms,
        vertexShader:   document.getElementById( 'vertexshader' ).textContent,
        fragmentShader: document.getElementById( 'fragmentshader' ).textContent,
        transparent:    true

    } );

    // point cloud
    pointCloud = new THREE.Points( geometry, material );

    scene.add( pointCloud );

fiddle:https://jsfiddle.net/nL0b6hco/

three.js r.137.4

3
  • could you say more about how this works? What role does the repeat uniform play here? That seems to indicate the size of each image cell -- is that right? Any elaboration or clarification you can provide would be very helpful!
    – duhaime
    May 1, 2018 at 15:37
  • @duhaime It is great you want to learn more, but the best way to learn is to build simple examples and experiment. Read the three.js docs and study the three.js examples. Do your own research. Only post a question after you have invested considerable effort, and then, ask a specific question about your code. Good luck! May 1, 2018 at 16:05
  • Thanks @WestLangley . Since posting the above I started experimenting and got this working--thanks very much for the example!
    – duhaime
    May 1, 2018 at 17:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.