search

mrdoob / three.js

JavaScript 3D Library.
https://threejs.org/
MIT License
102.81k stars 35.38k forks source link

Texture UV with THREE.Points: Part 2 #11016

Closed backspaces closed 7 years ago

backspaces commented 7 years ago
Description of the problem

[Not sure if this is a Doc issue or a Feature request] I have several tests for features to be migrated into a project. Here is a BufferGeometry of quads uv mapping a 4 sprite sheet:

http://backspaces.net/temp/three/bufftexs.html

Here is a Points geometry with colors

http://backspaces.net/temp/three/points.html

I am unable to combine them: uv mapped point sprite. I do understand how individual uv sprites can be a texture for a point sprite but this requires a render-per-sprite. There is an example/ of this and SO shows how:

https://stackoverflow.com/questions/29526855/how-to-do-uv-mapping-on-a-threejs-sprite-r71

For me one-sprite-per-render is awkward to manage and liable to be slow (I easily reach 100 or more sprites). I realize this would require more than a single uv per point rather than the 1 uv per quad vertex, possibly BL & TR would suffice?

8441 mentioned using ShaderMaterial but I did not see an example/ of this. (There's a jsbin).

Three.js version
Browser
OS
Hardware Requirements (graphics card, VR Device, ...)

Early 2015 MBP, Sierra.

WestLangley commented 7 years ago

See this stackoverflow answer.

jostschmithals commented 7 years ago

@Westlangley Currently learning the ropes concerning shaders, it seems to me that the following lines in your stackoverflow code linked above and in your fiddle are remnants of legacy code and they do nothing (since ShaderMaterial has no longer an attributes property)?

// attributes
attributes = {

    offset: { type: 'v2', value: [] },

};

for( var i = 0; i < numVertices; i ++ ) {

    attributes.offset.value[ i ] = new THREE.Vector2( THREE.Math.randInt( 1, 3 ), THREE.Math.randInt( 2, 3 ) ).multiplyScalar( 0.25 );

}

Related to this: Searching for this topic I found the following example in the docs which, as far as I can see, is no longer correct (?):

attributes

BTW: I like your excellent stackoverflow fiddles very much(!), because they are typically focused very well on one single problem, unlike the official examples, which are also helpful but make understanding sometimes a little more difficult by showing several subjects simultaneously.

Is it possible to access the complete collection of your three.js fiddles somewhere (as a whole)?

backspaces commented 7 years ago

@WestLangley Whoa, great stunt .. even beyond the uv sprites! Get the sphere vertices for position of sprites! Merit badge time.

I believe use of

guarantees this is up-to-date, right?

@jostschmithals I believe any attributes you'd like can be added to a BufferGeometry that is going to use a ShaderMaterial.

jostschmithals commented 7 years ago

@backspaces Of course this is possible. But if I’m understanding the history correctly, the way of doing it has changed (with r72):

In former times you could create and populate an attributes array, as shown in lines 86-96 of @WestLangley’s fiddle, and then pass it in the ShaderMaterial’s constructor, as shown in the docs example.

But nowadays passing the array in the constructor would cause this error: https://github.com/mrdoob/three.js/blob/dev/src/materials/ShaderMaterial.js#L71 Instead you have to use a BufferGeometry instance with BufferAttributes, as correctly shown in lines 48 – 68 of this fiddle, and therefore lines 86-96 are no longer needed.

WestLangley commented 7 years ago

@jostschmithals Thanks for pointing out the legacy code remnants. It is fixed, now, I think.

Is it possible to access the complete collection of your three.js fiddles somewhere (as a whole)?

http://stackoverflow.com/search?tab=votes&q=fiddle%20user%3a1461008

Posts with less activity are likely outdated.

jostschmithals commented 7 years ago

@WestLangley Thank you very much for the "secret link" to this treasure chest!