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;
}
Related
I have an Easel.js-based canvas and a bunch of SVGs. When I put these SVGs on canvas as vector shapes and try to scale the whole canvas, some SVG contours become distorted / blurred.
Are there any ways to avoid such a behavior?
Problem:
SVG sample:
http://s000.tinyupload.com/index.php?file_id=88515840051764837348
EaselJS support in canvas is restricted to image-based rendering. Basically, it loads the SVG as a raster image. When you scale it, you aren't seeing it redraw the vector, but instead it scales like an image would. If you scale it above 100% it should be more obvious (it will get pixelly/blurry).
Not sure if you can work around this with an SVG source. You could bring paths into Adobe Animate, and export as raw EaselJS Graphics, which will scale more predictably.
Cheers,
I am developing a game using Phaser where a user is rendered a triangular canvas. User can crop this canvas to any possible shape by drawing any crop pattern on the canvas. Besides this, i need to get this cropped canvas in suitable data format to be used as an image to render and also trace changes made on this canvas for undoing puspose.
Any help to get this through will be appreciated.
Thanks in advance.
Initial canvas
Canvas after crop
Cropped canvas used to create new canvas
So it's like folding a piece of paper and then cutting it so it looks like a snowflake? Interesting idea.
I think you could either use BitmapData to draw the initial cut out, then copy that bitmap 6 (or 12?) times and rotate and flip x-axis to construct the rest. Though maybe there will be seems, so like small lines, between the parts idk.
Another appproach would be to keep track of the initial cutlines like vectors. Then use math/trigonometry to calculate the result. No idea how to do this though, sorry.
I've got a strange behaviour when using SVG as textures in three.js.
When loading the first texture all is fine but the second one contains the first one when used as a texture (they share the same viewBox in the SVG but that shouldn't be an issue normally). Stuff is working when using PNGs or other image files.
Here is a minimal example:
http://jsbin.com/xeyigahata/1/edit?html,js,output
Thx!
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
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.