I have two different objects with the same transparent material in threejs, and I want to blend them in a "non-additive" way like in the following picture. There are three boxes: one blue in the background and two transparent yellow boxes in the foreground. The left image is how it currently is, and the right image is what I want. Is there a kind of material / possibly shader that can achieve this effect?
Related
I am new to three.js and I created a classic sphere, wrapped with a world color map & bump map and an alpha map for clouds, and directional sunlight. How can I now add an earth at night texture only on the shadow side of the globe? The globe is rotating, so I couldn't just create 2 half-spheres.
I tried adding this grayscale mask to the texture, but it is also visible in daytime. I then tried illuminating the map with a different light aimed at the dark side, but couldn't selectively target only one material. I didn't quite understand if I need to use "emissiveMap".
Could I shine a light through a semi-transparent map/mask from the center of the earth to make the cities visible, or is there some type of "black light" to only make selected color/map areas shine in the dark?
I don't need any glowing effects, I just want it to be visible. Will I have to create individual light points or learn to use fragment shaders?
I cannot get a 3D model with texture transparencies to be rendered correctly in Xcode.
The 3D model of hair consists of two geometries (hair and cap) and was created in Maya. It was bought off-the-shelf from here.
The correctly rendered model looks like this (without the head):
I exported the model to COLLADA format (DAE), put it into a folder model.scnassets together with its textures and added it to Xcode. However in Xcode Scene Editor it is rendered like this:
What is wrong here?
Update:
Setting Transparent > Intensity = 5, Settings > Transparency > Blend Mode = Double Sided, Settings > Transparency > Options > Writes depth = false gives this image where hair polygons against the blue sphere are rendered correctly, but above the blue sphere the rendered hair polygons are not the ones nearest to the camera but seem to be the ones on the back side of the hair model. This is apparently because of Writes depth = false, but it seems to be necessary to disable it to render the semi-transparent hair. (Using a brown texture here instead of the read one, but the result is the same regardless of the chose texture)
If you want to see a correct result of Transparent slot in Xcode Scene Editor you need to use premultiplied TIFF or PNG files for transparent parts of your 3D object. TIFF and PNG file formats can hold four channels (RGBA), but JPEG can hold only three channels (RGB).
Premultiplied means RGB * Alpha = RGBA (the opposite to it is unpremult, or RGB, A).
After applying the premultiplied texture to Transparent slot, set its Intensity property to 1...5 and Components property to desired channel from drop-down menu (All, Red, Green, Blue, Alpha).
Apple Documentation.
By default, the transparent property’s contents object is a fully opaque black color, causing the property to have no visible effect. Setting the transparent property’s contents to any solid color uniformly fades the opacity of the material based on that color’s opacity value. To make parts of a material appear transparent, set the property’s contents to an image or other texture-mapped content whose alpha channel defines areas of full or partial opacity.
Is there a way to correctly display more than one transparent texture in three.js? There are no problems if you try to render a transparent texture on a non-transparent textured plane below, but if you have more than a transparent plane, the nearest will "delete" the others below as you can see here:
On the left pic, there's what I would have (achieved adding depthWrite = false to every transparent material), on the right there's what I have, only setting transparent = true to materials with RGBA textures.
I already tried using alphaTest, but it isn't what I need, and depthWrite sometimes can't satisfy my needs (look at the green line bounding the path in the first screen, which hasn't been covered by the house shadow).
i am trying to cast an shadow on an totally transparent plane in SceneKit on OSX. I am struggling with this problem since several hours and do not come to any solution.
My Purpose is to generate an Screenshot of several objects with an transparent background and just the shadow on an invisible Plane.
Do you have any suggestions for me how i can make this with apples SceneKit?
Do i have to program my own shader, can i make this work with shadermodifiers or can i use built in functionallity?
UPDATE:
I find an alternative solution for anyone who needs:
create a white plane under 3D model, note that the color of plane must be pure white.
set blend mode of plane's material to SCNBlendModeMultiply.
set light model of plane's material to SCNLightingModelLambert.
This works because any color multiply white color (1, ,1, 1) return itself And lambert light model will not take account of directional light, So the plane will always be background color which look like transparent. Another benefit of this solution is you don't need change light‘s shadow rendering mode.
For people who used to inspector of Xcode.
According to SceneKit: What's New.
First, add a plane under you model. Then prevent it from writing to colorBuffer.
Second, change your light model's shadow rendering mode to deferred. Notice that you must use light which can cast shadows.
Oily Guo, your solution works. Here the solution is in code:
Configuration of the light source:
light.shadowColor = UIColor(red: 0, green: 0, blue: 0, alpha: 0.4)
light.shadowMode = .deferred
And for the floor (ie. SCNFloor underneath your objects):
material.diffuse.contents = UIColor.white
material.colorBufferWriteMask = SCNColorMask(rawValue: 0)
I do not have an answer to your question, however I have a workaround:
Render your scene and keep the image in memory
Change all the materials in your object for pure black, no specular
Change the plane and the sky to a fully white material, lights to white
Render the scene to another image
On the second image, apply the CIColorInvertand CIMaskToAlpha Core Image filters
Using Core Image apply the Alpha Mask to the first render.
You'll get an image with a correct Alpha channel, and transparent shadows. You will need to tweak the materials and lights to get the results you want.
The shadow may become lighter on the edges, and the only way around that is rendering it as yet another image, and filling it with black after the Mask to Alpha step.
Basically what I want to achieve is a sprite highlight animation effect as displayed below.
The idea is that the white-translucent gradient sprite moves on top of the other sprite (left-to-right), using a blend mode like Overlay (Photoshop). The difficult part is that the top gradient sprite should only be drawn on the visible pixels of the sprite underneath. The other part of the gradient overlay should be discarded to not affect the background or other sprites underneath (like on the image to the far right).
Is it possible to achieve that effect with a clever combination of OpenGL blend modes and how, or would I have to create a custom shader to combine these sprites?
Background: I'm using libgdx with OpenGL ES 2.0 and the app runs on Desktop, Android and iOS.
There arę many ways to do it. The simplest one:
You should render button and hilight in a single pass. In fragment shader, after sampling button texture and hilight texture calc the output color as for blending (could be mix(c1,c2,c2.a)) and alpha as button texture alpha only. Of course enable blending in usual way: (srcalpha,1-srcalpha)