I'm adding an opacity map with an alpha channel to my standard material in my .max file. The opacity map does not work/show after translated into three.js. Properties like texture, color, roughness etc are visible and working. The only problems seems to be with this alpha channel.
Should I follow any extraordinary steps for bringing the opacity map into three.js?
As far as I know SVF doesn't support transparency map. The best you can do to have some transparency is to set the transparency color for physical material or the opacity value for standard material inside of 3ds Max. However, this will apply transparency on your entire material.
Related
I have a model in Blender 2.8 ( and 2.79 ) with a grass texture on a plane. It's a field. No matter what I set the metalness and roughness to, when viewing it in ThreeJS there's always a whitish sheen on the field when looking at it from certain angles according to the sun position.
I think setting the specular color to black would remove that sheen, but I'm guessing this isn't currently possible to do because ThreeJS StandardMaterial doesn't control specular color..
So, basically, is there anyway to control the specular color on a ThreeJS StandardMaterial?
Use an environment map? Or change the color of your directional light?
I'm trying to add a texture to the 3d object, but if the object has a material with a white background I can see the texture correctly, while if the object is dark or transparent the texture becomes dark or transparent like the object.
I can't find a way to solve this problem, I thought of applying another material over the object but I don't see how it is possible.
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.
Hello i am new to ThreeJS and texture mapping,
Let's say I have a 3D-Plane with the size of (1000x1000x1). When I apply a texture to it, it will be repeated or it will be scaled, to atleast filling the full plane.
What I try to achieve is, to change the scaling of the picture on the plane at runtime. I want the Image to get smaller and stop fitting the full plane.
I know there is a way to map each face to a part of a picture, but is it also possible to map it to a negative number in the picture, so it will be transparent?
My question is:
I UV-Mapped a Model in Blender and imported it with the UV-Coords into my ThreeJS-Code. Now i need to scale the texture down, like described before. Do I have to remap the UV-Cords or do i have to manipulate the image and add an transparent edge?
Further, will I be able on the same way to move the image on the picture?
I already achieved this kind of usage in java3d by manipulating bufferedImages and drawing them onto transparent ones. I am not sure this will be possible using javascript, so i want to know if it is possible by texture-mapping.
Thank you for your time and your suggestions!
This can be done using mapping the 3d -plane to a canvas ,where the image is drawn (fabric.js can be used for canvas drawings).Inshort set the canvas as texture for the 3d model
yourmodel.material.map = document.getElementById("yourCanvas");
Hope it helps :)
Yes. In THREE, there are some controls on the texture object..
texture.repeat, and texture.offset .. they are both Vector2()s.
To repeat the texture twice you can do texture.repeat.set(2,2);
Now if you just want to scale but NOT repeat, there is also the "wrapping mode" for the texture.
texture.wrapS (U axis) and texture.wrapT (V axis) and these can be set to:
texture.wrapS = texture.wrapT = THREE.ClampToEdgeWrapping;
This will make the edge pixels of the texture extend off to infinity when sampling, so you can position a single small texture, anywhere on the surface of your uv mapped object.
https://threejs.org/docs/#api/textures/Texture
Between those two options (including texture.rotation) you can position/repeat a texture pretty flexibly.
If you need something even more complex.. like warping the texture or changing it's colors, you may want to change the UV's in your modeller, or draw your texture image into a canvas, modify the canvas, and use the canvas as your texture image, as described in ArUns answer. Then you can modify it at runtime as well.
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.