I am working on a project for a client and we are finding that some of the transparent logos have a very ugly looking dark border around them when they are used in threejs. I have tried so many things with no luck so I would love help getting the alpha to look nicer.
Threejs vs the supplied image:
It is very faint but when you zoom in (which they can to an extent in the application) you can see the border:
Things I have tried:
Setting texture's min + mag filters to LinearFilter/NearestFilter. This is the most common suggestion but you can see in my codesandbox that this does not help. If I set it to NearestFilter then the logos start to become pixelated and alias when the camera moves around.
I changed the blend modes of the standard material and I got weird colors on the edges.
I wrote my own custom shader that blends between the image color and white based on the supplied image's alpha but I still get a weird color leaking through.
I played with the alphaTest value but this ends up causing the edges to end abruptly/not look great.
I demonstrate all of my approaches here:
https://codesandbox.io/s/interesting-wozniak-povk1?file=/src/App.js
I think that my shader is close but not perfect. I would really appreciate any advice on the right way to approach and solve this problem.
You need to increase the resolution of the image, the mesh at half the scale looks better with that resolution on the png
Related
So I'm using the phaser webgl lighting
this.lights.enable();
this.lights.setAmbientColor(0x808080);
this.spotlight = this.lights.addLight(2040, -200, 20000).setIntensity(20);
I'm trying to cover really large distance, seen in that 20000px radius, basically an in-game sun, and I face the issue of actually making the large area bright, but not have the issue of the intensity making it so bright at the top that you can only see white over there
Well if you want a lighting effect, the easy way like by all 2D games is to fake it. There is a brilliant article on how to make a day/night cycle in phaser, it is abit dated, but it explains exactly how you can achieve this.
And more or less something like, discribed in the article is a easy and good solution. Basiclly:
the sun is just an image
the darkness and brightness can be achieved with overlays and alpha values (use gradients in the overlays if you want a fading effect)
I have question related with coloring image (mask) in Javascript. I am looking for technologies stack, libraries, ideas which help mi with my issue. I plan to write JS app which allow user to color part of image, I mean that if you have fence image, you could color the wood. I will have image and mask (transparent image with black places where color should be placed). Application should give possibility to change saturation of placed color on image (te texture should be more or less visible depend on color category) and adding additional texture on mask where color will be placed for e.g. changin wood grain.
Can you tell me which approach will be better? Should I use third-party library (e.g. WebGL like pixi or three js) or simply canvas and iterating though pixels and manipulate them, e.g. making average color by taking R and G and B value of image pixel and destination color (but I see problems with putting textures and saturation). Or maybe you will have some other ideas?
I don't know that I described problem clearly. If you have some questions, please ask and I answer it.
Thanks!
I'm actually trying to include a .jpg image into my 3D scene. All solutions i have found consisted in apply those images on meshes as texture : but then the scene does not look like well. Indeed, we can see the mesh border whether it be a plane or sphere... I just want to see the image. Does exist it another solution ?
On my application, i want to rotate an airplane around the earth, and the problem is about including this airplane.
Thanks for your help :)
Perhaps the class THREE.Sprite will accomplish the effect you want. THREE.Sprite can display an image, and can use either screen coordinates (e.g. canvas coordinates) or it can be part of your 3D scene, but a sprite image is always facing the camera. If you want the image to rotate, you do need to use it as a texture on a mesh. Whatever you decide to do in the end, I've posted a bunch of tutorial-style examples at http://stemkoski.github.io/Three.js/ that may help. Good luck!
I've been working on a WebGL project that runs on top of the Three.js library. I am rendering several semi-transparent meshes, and I notice that depending on the angle you tilt the camera, a different object is on top.
To illustrate the problem, I made a quick demo using three semi-transparent cubes. When you rotate the image past perpendicular to the screen, the second half of the smallest cube "jumps" and is no longer visible. However, shouldn't it still be visible? I tried adjusting some of the blending equations, but that didn't seem to make a difference.
What I'm wondering is whether or not this is a bug in WebGL/Three, or something I can fix. Any insight would be much appreciated :)
Well, that's something they weren't able to solve when they invented all this hardware accelerated graphics business and sounds like we'll have to deal with this for a long while.
The issue here is that graphic cards do not sort the polygons, nor objects. The graphics card is "dumb", you tell it to draw an object and it will draw the pixels that represent it and also, in another non-visible "image" called zbuffer (or depthbuffer), will draw the pixels that represent the object but instead of color it will draw the distance to the camera for each pixels. Any other objects that you draw afterwards, the graphics card will check if the distance to the camera for each pixel, and if it's farther, it won't draw it (unless you disable the check, that is).
This speeds up things a lot and gives you nice intersections between solid objects. But it doesn't play well with transparency. Say that you have 2 transparent objects and you want A to be drawn behind B. You'll need to tell the graphics card to draw A first and then B. This works fine as long as they're not intersecting. In order to draw 2 transparent objects intersecting then the graphics would have to sort all the polygons, and as the graphics card doesn't do that, then you'll have to do it.
It's one of these things that you need to understand and specifically tweak for your case.
In three.js, if you set material.transparent = true we'll sort that object so it's drawn before (earlier) other objects that are in front. But we can't really help you if you want to intersect them.
I am drawing two relative simple shapes and the geometry of them do not overlap.
Here is the code sample:
http://jsfiddle.net/pGD4n/9/
The Three.js Trackball is in there so you can click and drag to spin the objects around in 3d space. The problem is that as the objects rotate some faces disappear revealing the object below. A slight more rotation and the missing face returns, but others have gone missing.
I've tried BasicMaterial, Normal Material and LambertMaterial with both SmoothShading and Flat Shading. I have tried the scene with and without lighting. Moving the objects farther apart seems to correct the issue, but in the given example code the meshes do not overlap and should not have this problem. Problem happens in both Chrome and Firefox.
I imagine that switching to the OpenGL renderer would resolve the issue, but for compatibility we need use the Canvas renderer.
Any help or ideas appreciated.
This is a limitation of CanvasRenderer. Unfortunately per pixel z sorting is not available in CanvasRenderer so it basically tries to sort the whole polygon instead. Depending of where you're looking from the center of one polygon may be closer than the polygon on the side and so it "jumps".
The only solution right now is using WebGLRenderer. I'm working on a new renderer for context2d which hopefully will solve this without requiring webgl but it will still take some time.