Three.js, custom shader and png texture with transparency -

-

i have extremely simple png texture: grey circle transparent background.

png image transparency

i use uniform map three.shadermaterial:

var uniforms = three.uniformsutils.merge( [basicshader.uniforms] ); uniforms['map'].value = three.imageutils.loadtexture( "img/particle.png" ); uniforms['size'].value = 100; uniforms['opacity'].value = 0.5; uniforms['pscolor'].value = new three.color( 0xffffff );

here fragment shader (just part of it):

gl_fragcolor = vec4( pscolor, vopacity ); gl_fragcolor = gl_fragcolor * texture2d( map,vec2( gl_pointcoord.x, 1.0 - gl_pointcoord.y ) ); gl_fragcolor = gl_fragcolor * vec4( vcolor, 1.0 );

i applied material particles (three.pointcloud mesh) , works quite well:

particles texture transparency: ok!

but if turn camera of more 180 degrees see this:

particles texture without transparency

i understand fragment shader not correctly taking account alpha value of png texture.

what best approach in case, right color , opacity (from custom attributes) , still alpha right png?

and why behaving correctly on 1 side?

transparent objects must rendered front -- furthest closest. because of depth buffer.

but pointcloud particles not sorted based on distance camera. inefficient. particles rendered in same order, regardless of camera position.

you have several work-arounds.

the first discard fragments alpha low. can use pattern so:

if ( texturecolor.a < 0.5 ) discard;

another option set material.depthtest = false or material.depthwrite = false. might not side effects, however, if have other objects in scene.

three.js r.71


Comments

Post a Comment

Popular posts from this blog

c# - Where does the .ToList() go in LINQ query result -

-
when getting data populate data grid, have pulled data, made list , mapped model, this: public list<person> getpeople() { var data = _db.person.tolist(); list<person> people = new list<person>(); foreach (var item in data) { person person = new person() { personid = item.personid, firstname = item.firstname, lastname = item.lastname }; people.add(person); } return people; } this works fine, in interest of writing less code discovered .select method , (what think is) anonymous type. have: public list<person> getpeople() { return _db.person.select(d => new person { personid = item.personid, firstname = item.firstname, lastname = item.lastname }).tolist(); } though not easy read, works fine too. there preference either way? ...
Read more

Listeners to visualise results of load test in JMeter -

-
i want run load test in non-gui mode , save results in .csv file. (i have not modified .properties files, standard information saved) i plan load file , visualise results jmeter’s listeners. which listeners suited purpose? should avoid @ cost, might cause me misinterpret information? (e.g. in view results tree response data empty have - - not saved this. however, there has in fact been response. if saw listener might think there hasn’t been one. since want avoid this, listeners have gain information needed .csv file.) i’d know both jmeter listeners plugins. if running test in non-ui mode ideally should disable listeners in script. use '-l' option store test results .jtl extension. can later open jtl file jmeter. aggregate report or summary report should summarize test results , response time , throughput. if want plot graphs see trends on test duration can use http://jmeter-plugins.org/#/ standard , lib set. i suggest following listeners: response ...
Read more