I have a group of sprites, as well as some other meshes, and in front of them I've printed some text as a texture on a mesh. Everything is viewable through the text, except for the sprites which disappear whenever the text's tranparency is printed over them. Any ideas?
Sprites are rendered last, so they will not work well with other transparent objects.
Your work-around is to set
renderer.autoClear = false;
and then to place the transparent text into scene2, and implement two render passes like so:
renderer.render( scene, camera );
renderer.clearDepth(); // optional, depending on use case
renderer.render( scene2, camera );
three.js r.68
Related
If sprites are rendered into a transparent render texture with different blend modes and some are rendered against the transparent parts, they render black when on top of a background.
Is it possible to get blend modes to work against the background i.e something set as add or multiply inside the render texture will add or multiply with the background? I'd probably have to put each blend mode into its own render texture and set the whole render texture to use that blend mode.
Assuming it's not possible to have the blend modes work with a single render texture, is it possible to make the black parts transparent? Multiply or add against transparent renders black in a render texture by default.
I know fabricjs can play Video and sprite sheet, But I have a lot of gif files, can I play these gif directly with fabricjs? I am not able to find method in Fabricjs website.
According to specs about the Canvas 2DRenderingContext drawImage method,
Specifically, when a CanvasImageSource object represents an animated image in an
HTMLImageElement, the user agent must use the default image of the animation (the one
that the format defines is to be used when animation is not supported or is
disabled), or, if there is no such image, the first frame of the animation, when
rendering the image for CanvasRenderingContext2D APIs.
This means that only the first frame of our animated canvas will be drawn on the canvas.
This is because we don't have any control on animations inside an img tag.
And fabricjs is based on canvas API, thus regulated by the same rules.
The solution is you need to parse all the still-images from your animated gif and to export it as a sprite-sheet. You can then easily animate it in fabricjs thanks to the sprite class.
I'm working on a THREE.js scene that I'd like to render with a pixelated effect. To do so, I'm using renderer.setPixelRatio(...) to draw the scene at a low resolution, which works fine. The problem is that the result seems to be antialiased, maybe even by the canvas' WebGL context.
In the Canvas 2d drawing api, one can set canvas.context.imageSmoothingEnabled = false; to ensure that low-resolution scenes are drawn with a crisp pixelated effect. I tried using this parameter on my renderer.context, with no effect. Is there some other way around this?
Thanks!
This can be done with CSS stylesheets. Just add this line to the canvas style:
canvas {
image-rendering: pixelated;
}
I have a multiviewport OpenGL modeler application. It has three different viewports : perspective, front and top. Now I want to paint a label for each viewport and not succeeding in doing it.
What is the best way to print a label for each different perspective?
EDITED : The result
Here is the result of my attempt:
I don't understand why the perspective viewport label got scrambled like that. And, Actually I want to draw it in the upper left corner. How do I accomplished this, because I think it want 3D coordinate... is that right? Here is my code of drawing the label
glColor3f(1,0,0);
glDisable(GL_DEPTH_TEST);
glDepthMask(GL_FALSE);
glRasterPos2f(0,0);
glPushAttrib(GL_LIST_BIT); // Pushes The Display List Bits
glListBase(base - 32); // Sets The Base Character to 32
glCallLists(strlen("Perspective"), GL_UNSIGNED_BYTE, "Perspective"); // Draws The Display List Textstrlen(label)
glPopAttrib();
I use the code from here http://nehe.gamedev.net/data/lessons/lesson.asp?lesson=13
thanks
For each viewport switch into a projection that allows you to supply "viewport space" coordinates, disable depth testing (glDisable(GL_DEPTH_TEST)) and depth writes (glDepthMask(GL_FALSE)) and draw the text using one of the methods used to draw text in OpenGL (texture mapped fonts, rendering the full text into a texture drawing that one, draw glyphs as actual geometry).
Along with #datenwolf's excellent answer, I'd add just one bit of advice: rather than drawing the label in the viewport, it's usually easier (and often looks better) to draw the label just outside the viewport. This avoids the label covering anything in the viewport, and makes it easy to get nice, cleanly anti-aliased text (which you can normally do in OpenGL as well, but it's more difficult).
If you decide you need to draw the text inside the viewport anyway, I'll add just one minor detail to what #datenwolf said: since you generally do want your text anti-aliased (even if the rest of the picture isn't) you generally want to draw the label after all the other geometry of the picture itself. If you haven't turned on anti-aliasing otherwise, you generally will want to turn it on for drawing the text.
How to draw a transparent rectangle in j2me?
Transparency is supported only in immutable images, i.e. images loaded from files. So you can create appropriate image. Or create transparency via filling its transparency parts with background color.
Nokia has some functions that will allow you to draw transparent rects and polygons
http://www.developer.nokia.com/Resources/Library/Java/_zip/GUID-237420DE-CCBE-4A74-A129-572E0708D428/com/nokia/mid/ui/DirectGraphics.html
However if you want it to be a generic solution you should create a transparent image in code and draw it in the appropriate position. Create a int array with size = width*height then fill it with the required color (for example 0x550000ff for semi transparent blue) and create the image using Image.createRGBImage (and setting the last parameter to true).
int[] tmpArray = new int[width*height];
for(int i=tmpArray.length;i--!=0;)
tmpArray[i] = 0x550000ff;
Image transparentRectImg = Image.createRGBImage(tmpArray,width,height,true);
Also don't forget that some old j2me devices do not support alpha transparency even in images.