Glowing shader for PNG texture in Three.JS - three.js

I have arbitrary PNG with a silhouette. Could use it to texture plane in Three.js.
Transparency works fine. But I need to create dynamic glowing around given shape.
More likely, have to use a shader, but could find any reliable example with texture, not object.
Is it possible to make it or the only way is to convert the shape to OBJ or any other format and to apply a glowing shader to mesh, like here?

Related

Multiple Textures on a Single Face/Plane

If I have a geometry, say
THREE.PlaneGeometry(400,400);
or
THREE.MeshBasicMaterial({map:new THREE.MeshFaceMaterial(materials)});
//multiple textures on only one face
How would I make it so that I have multiple textures on the same side of the plane?
Furthermore, how would I go about setting the coordinates of the texture and position of the texture on the Plane (or face)?
It should look something like this:
You can use shader material with textures as uniforms or look other approaches there, there and there.

three.js flat color using FlatShading and a texture

I'm creating a terrain with three.js and texturing with some grass texture I found, and applying FlatShading so it looks low poly, but the shading only modifies that and I'm still seeing the texture applied, I need each face to have a flat color and not the texture, like this picture:
http://i.ytimg.com/vi/9WFBnc_gPMo/maxresdefault.jpg
Unity using PolyWorld asset, from a terrain with a grass texture for example, it applies flat shading and also uses a flat color as texture (predominant color?)
What you seem to want is inefficient, but one way to accomplish it would be to make sure that all three faceVertexUV values for each triangle face are the same: that is for a triangle ABC the UV coordinates are all, say (.4,.6),(.4,.6),(.4,.6)
This means that all pixels of the rendered triangle will have that one uniform UV and you'll always get the same texture color across the triangle (some filtering notwithstanding in very extreme foreshortening cases)

Three.js Merge objects and textures

My question is related to this article:
http://blog.wolfire.com/2009/06/how-to-project-decals/
If my understanding is correct, a mesh made from the intersection of the original mesh and a cube is added to the scene to make a decal appear.
I need to save the final texture. So I was wondering if there is a way to 'merge' the texture of the original mesh and the added decal mesh?
You'd need to do some tricky stuff to convert from the model geometry space into UV coordinate space so you could draw the new pixels into the texture map. If you want to be able to use more than one material that way, you'd also probably need to implement some kind of "material map" similar to how some deferred rendering systems work. Otherwise you're limited to at most, one material per face, which wouldn't work for detailed decals with alpha.
I guess you could copy the UV coordinates from the original mesh into the decal mesh, and the use that information to reproject the decal texture into the original texture

How to use part of a texture?

How do I create a three.js material/geometry which uses part of a texture?
I am first rendering a scene to a texture. This texture is used for a Mesh with a CubeGeometry and a MeshLambertMaterial. What I would like to do now is have only a part of the texture displayed on the cube face (like a window into the texture).
I've done this before using OpenGL ES directly, with shaders, but I don't see what parameters might make it possible using the standard three.js library.
That is what texture coordinates are for. See this question and answer:
http://stackoverflow.com/questions/19366991/drawing-part-of-open-gl-texture/19367844#19367844

Subrect drawing to texture FBO within OpenGL ES Fragment Shader

I'm trying to draw to a subrect of a texture based FBO, but am having difficulty. The FBO has dimensions of say 500x500 and I am trying to have the fragment shader only redraw say a 20x20 pixel subrect. Modiyfing the full texture works without difficulty.
At first I tried setting glViewport to the needed subrect, but it doesn't look to be that simple. I'm suspecting that the Vertex attributes affecting gl_Position and the varying texture coordinates are involved, but I can't figure out how.
Turns out that I was trying to modify the texture coordinate attributes, but was more easily able to just modify the viewport using glViewport and gl_FlagCoord within the shader.

Resources