Double sided faces with transparent texture are black on one side [closed] - three.js

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 9 months ago.
Improve this question
In ThreeJS I have some plant objects that are just double sided faces with a texture on them. The texture has transparent pixels. I have alphaTest set to 0.5. One side of the face is showing the texture and transparent pixels are really transparent. At the other side, the transparent pixels are black - and not transparent.
I have tried turning depthTest off. That does remove the black, but it introduces a lot of new and even worse problems. But it might be a clue that it has something to do with depth.
I also tried a custom depth Shader with alphaTest set to 0.5, but that does not appear do anything.
It also is not a lighting issue, I have tried to light the dark side with several types of lights, but no results there.

It was a side effect of the OutlineEffect. When I turned that off, the plants were transparent on both sides. Luckily you can switch it on or off for every material, so I do not need to remove it entirely.

Related

THREE.js: RingGeometry and CircleGeometry blurry when rotating the scene [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed last year.
Improve this question
I'm using RingGeometry in my scene, at start the rings are renderer perfectly, but if I rotate the scene, artifacts appears on the rings.
I tried CircleGeometry and I have the same result.
The circle and the scene has an alpha channel because I need to variate the rings opacity.
Before rotating a ring
After rotating a ring
Before rotating a circle
After rotating a circle
Thank you #Marquizzo that was it.
I have and invisible circle at the same position (used for raycaster.intersectObjects), even if it was at opacity 0 it was causing z-fighting.
I moved this invisible circle on the z-axis and the render is perfect now.

Objects look stretched out/distorted only around edges of screen [duplicate]

This question already has answers here:
90 degree field of view without distortion in THREE.PerspectiveCamera
(2 answers)
Closed 1 year ago.
Is this an FOV issue with my perspective camera? In my scene, spheres look like eggs/oval shaped rather than spheres when they reach the edges of the screen. Anyone know why this happens?
It sounds like you've encountered one of the unfortunate realities of 3D.
In any 3-dimensional scene, the view from a given point is most naturally thought of as a sphere. When we render a scene, we're rendering a piece of that sphere, but we need to somehow convert that piece of a sphere into a flat rectangle, since our computer screens are flat, not round.
So, in order to render a 3D scene as a rectangle, the software needs to use a projection. For 3D rendering, the most common projection is probably a rectilinear projection, also called a gnomonic projection. (On Wikipedia, see "Rectilinear lens" for a discussion of rectilinear projections in photography, and "Gnomonic projection" for a discussion of rectilinear projections in mapmaking.)
The biggest advantage of a rectilinear projection is that straight lines in the scene appear as straight lines in the rendering. A big disadvantage is that objects far from the center are distorted: small circles get turned into large ovals.
This phenomenon is an unalterable mathematical fact that no software will ever be able to overcome. However, there are things you may be able to do to mitigate the situation. One option is to use a narrower field of view. Another option is to use a different projection; the answers here have a few suggestions for how to do that: Three.js - Fisheye effect

Three.js - DoubleSided Semi-Transparent Materials Only Work From Certain Angles

I am currently using three.js and trying to create a 3D experience with a semi-transparent material that can be viewed from all angles. I've noticed that depending on the camera angle, only certain portions of the mesh are semi-transparent and will show the content behind them. In this example below I've created two half cylinders and applied the same transparent material with the stack overflow logo. The half cylinder on the left properly shows the logo on the closest surface, as well as the surface behind it. The half cylinder on the right only shows the logo on the closest surface and fails to render the logo that wraps behind it. However, it does properly render the background image so the material is still treated correctly as transparent:
If I spin the orbital camera around 180 degrees the side that originally failed to see through now works and the other side exhibits the wrong behavior. This leads me to believe it's related to the camera position / depth sorting. The material in this case is a standard MeshPhongMaterial with transparent set to true, side as DoubleSide, and a single map for the transparent stack overflow logo. The geometry is formed from an opened ended CylinderGeometry. Any help would be greatly appreciated!

Collision detection algorithm - Image inside a cylinder [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
With a camera inside a cylinder I capture a image. I want to detec if there are some deformation due to a collision outside. I also want to detec in which side the collision occurs. The image inside the cylinder have a lot of dots which forms a grid. Which is the better way to do this?
A simple way to detec the collision is to subtract the image without collision with the real image. If the result isn't "zero", something changed and probally a collision occured. But this doesn't give me which side the cylinder deformed.
I already tried to do a projection of the points in the plane, but i couldn't do it.
In this link you can find a question post by me with the problem of the projection: Projection of a image from inside a cylinder to a plane 2D [Matlab]
In that link you can see all the information about this problem.
An idea is to use region props in the image and see which part of the image deformed, but I want to do something a little more complex. I want to measure the deformation, to have an idea how much it deformed during the impact. This is the reason why i thought about doing some projection in the plane and measure the distance that the points deformed. Do you have any idea to do this in a more simple way? How can i do it
Someone can help me please?
Here's a little code/pseudo-code to try to help. In words:
I would subtract the before and after images and take the absolute value of the difference image. Then, I would have some sort of threshold for whether or not the difference is just due to variation in noise and not a real change. Next I find the center of mass (weighted by the magnitude of difference), which can be done easily with the image processing toolbox (regionprops). The center of mass of the variation would be a good estimate of where a "collision" occurred, i.e. a deformation in the cylinder
So that would be something along the lines of:
diffIm = abs(originalIm - afterIm)
threshold = someNumber
diffIm = diffIm(diffIm>threshold)
%Tell regionprops that the whole image is one region by passing it a array of ones the size of the image, and diffIm as the measurment image
props = regionprops(ones(size(diffIm)),diffIm,'WeightedCentroid')
%WeightedCentroid is the center of mass, and it is weighted by the grayscale image diffIm
You now have the location of the centroid of deformation in your image space, and all you would need is a map to convert that to cylinder space (if you needed that), otherwise you could just plot the centroid over the original image for a visual output of where the code expects the collision occurred.
On another note, if you have control of your expirimental setup, I would expect that a checkerboard pattern would give you better results than the dots (because the dots are very spaced out, and if the collison only affects the white space you might not be able to detect it at all). A checkerboard would mean you have more edges than can be displaced, which is the brunt of what would be detected anyways. A checkerboard may also be easier for mapping to a plane if you were still trying to do that, because you could know that all the edges are either parallel or intersecting at right angles, and also evenly spaced.

how i can work programaticly with spell effect in game [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
how i can work programaticly with spell effect in game
i have a effect look like this spell effect
i want to know how i can change the cale of the spell .
like change color in distance
or when u run some this effect goes to transparent and after 10 sec go to fade
or
look at this spell and wepon in this pic like when you have a small wepon and u add a animation effect on it ( like fire or ice effect )
how you change the animation base on the size of the wepon
i have no idea how i have to implement that
thanks in advance
[Edit by Spektre] acording to comments I would change the question text to something like this:
I need/want to program a spell effect visualization for game or whatever ...
what are the common/usual approaches to do this (algorithms,graphics techniques)
want to implement Ice/Fire/??? effects
in form of rays/waves/field/cones...
ideally by a single configurable effect routine (I guess this)
also what are the exact names for some of these effects so I can do a search for them myself
I want to use Unity3D environment
this is the way i want to know how i can make an dynamic spell effect
well there are many approaches for this. I am no expert in the field and not a Unity3D user so I stick to basics:
particle system
It is an engine which visualize particles (many small moving objects). It is used for many effects like: rocket throttle,fire,lighting,changing glow,and many more. The trick is the use of blending so each particle is usually semi transparent ball. More transparent on the outside and more solid on the inside. When you draw more particles close together they blend to the desired continuous effect.
This can be done by single textured QUAD or TRIANGLE. The texture can be white color with alpha channel coded transparency so color of the effect can be coded without change in the texture. Color,size and movement patterns can differ to each other and also with time. These three parameters define the effect look for example you want to cast a electric ray from caster to target so the movement pattern is LINE. Now distort that line a little by some random numbers so the LINE becomes a POLYLINE and on the Vertex of this POLYLINE you can sometimes free a particle in random direction with limited duration so it will be like some sparks (do not forget to lower their size in time so they dissipate). Also you have to experiment with the speed and size/color of the main particle stream along the POLYLINE so it looks right. Some effect need to combine few different particle streams together.
Search keywords: particle system,RGBA texture,blending,interpolation
this picture is taken from the link posted in the question. It is a nice example of two particle systems. Yellow straight LINE particle stream and green POLYLINE particle stream. Also some green sparks around the main stream are present.
texture animation
You can have a little cyclic movie (image by image) in an array of textures so you draw the texture on an plane (usually single QUAD or TRIANGLE) and change the texture after some time to the next , and usually after last go from first again. You can also use BLENDing or STENCIL techniques to draw only the effect area. If the textures are white (colorless) then the color can be modulated by code. This is mostly used for explosions, fire,...
this is simple explosion movie example it is not a cyclic animation so after last frame the effect stops (explosion has finite duration)

Resources