As shown in this fiddle when rotated, a sprite disapear at some angles, and just one side is rendered. How come? What is the solution to render both sides? Do I have to manipulate the angle?
Thank you
Faces are one-sided by default.
To render both sides, set mesh.material.side = THREE.DoubleSide;
three.js r.58
Related
I am using three.js and created a basic scene with a few meshses rendered with some basic lighting . My torus geometry was previously pointy with few polygons but I was able to smooth it out by adding more segments but now I would like to straighten the lines out in my cube. They seem jaggy. In the pic I am including my render on the left seems a lot jaggier then the example I am following on the right. I have even set width and height segments to very large values (200). Any Ideas why the aliasing/jagginess?My render on left, example on right
So I've been using Light2D for godot for my TileMap 2D game. Only problem is it exposes the tiles borders. See. Image Below.
For anyone coming here because they are seeing this issue on an isometric TileMap, select the TileMap in the Scene panel, expand the Cell category in the Inspector, and make sure that Y Sort is ticked. This will resolve the overlapping lighting issue.
The issue is when you set your tiles overlap.
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 am trying to rotate a circle image using jquery rotate plugin. But, I observe that the circle image appears to be oscillating about it's center while rotating. Something like a linear movement.
In IE7, it's pretty much observable. In Chrome/Firefox, if you zoom a bit, this wobbling issue can be observed.
I tried to rotate the image using Raphael library too. But still, the circle was wobbling.
Then I rotated the image with a c# program to see if the problem is with the browsers' graphic engine. But even here this issue is observed. I even took various images to see if the circle was imperfect. But, all the images show this behavior.
Can this be happening because of anti aliasing? Or, is it just an optical illusion?
If not, then what else can be the reason?
I am using jqueryrotate plugin rotate method to do this. $('#circleimg').rotate(Position);
Check this jsFiddle. Btw, this is the kind of source code you can include yourself in your question to make answering it easier for others.
http://jsfiddle.net/KyJzQ/
I used this rotate plugin since you did not specify which one you used.
HTML
<img id="circleimg" src="http://i.imgur.com/KgUDClr.png">
<img id="circleimg2" src="http://i.imgur.com/sK4qP6z.png">
JAVASCRIPT
var rot = 0;
window.setInterval(function() {
$('#circleimg').rotate(rot);
$('#circleimg2').rotate(rot);
rot += 1;
},
5
);
I think the circle you've provided is not actually a perfect circle, hence the tiny "oscillations" you see.
I added another circle that I rendered myself. If you zoom in closely enough you will see jagged pixels moving around the edge of my circle, but I don't see any way around this since the jQuery plugin is not actually re-rendering the image. I don't see any of the "oscillating" you mention in my circle.
This issue is more about vector art than it is about programming. Get a nice vector graphics program and render the nicest circle you can. Even the one I made is not really that good. Or use HTML5 and canvas to draw dynamically, rather than moving a static image around.
I'm trying to animate a triangle around a given point. I want the shape to animate using the corner (on the right hand side) as it's anchor point but at the moment I can only seem to get it to animate from what I think is it's center. How do I do this?
http://jsfiddle.net/3LXXQ/
you can add origin co-ordinates to the rotation transform.
path_p2.animate({transform: "r360,456.933,372.57"}, 2000);
Here's your updated fiddle