3

CSS3 has a mask property, allowing for clipping using the alpha channel of another image. Is there an analogue to accomplishing that in three js? Or does it require the writing of a custom pixel shader?

Dany Joumaa
  • 2,030
  • 6
  • 30
  • 45
  • You need to write your own shader. See this related answer for a head start: http://stackoverflow.com/questions/12368200/displaying-background-colour-through-transparent-png-on-material/13547817#13547817 – WestLangley Apr 01 '14 at 14:52
  • Is it me not understanding how this works, or is it kind of silly there isn't a shader included with the library that already does this? Seems unfortunate I have to write a shader to get such basic functionality. – Dany Joumaa Apr 01 '14 at 16:30

2 Answers2

3

I realized this is an old question but I came across it figured I should add a better answer here. Your question was not badly phrased, I understood it perfectly. What you're looking for is an Alpha Map.

And contrary to what GuyGood told you, this is a common technique in nearly all 3d engines... See a brief description here

Three.js r68 and above support his technique on most Materials. See the alphaMap property on three.js documentation here.

Jeff
  • 13,943
  • 11
  • 55
  • 103
bshow
  • 116
  • 1
  • 4
-1

this is the code i used to create a plane with alpha masking.... hope this helps. cannot check if this still works but if it does not, try setting transparency to 'true'

var textureWithAlphaChannel = THREE.ImageUtils.loadTexture('textures/texWithAlpha.png');
plane = new THREE.Mesh( new THREE.PlaneGeometry(4,4),
    new THREE.MeshBasicMaterial( {map: textureWithAlphaChannel , transparency: false, color: 0xFFFFFF, side: THREE.DoubleSide} )
);
GuyGood
  • 1,377
  • 1
  • 9
  • 12
  • 1
    That doesn't really answer my question since the image I'm loading doesn't have an alpha channel and I'm trying to add one. – Dany Joumaa Apr 01 '14 at 16:29
  • Well, then your question is badly phrased. And what you want to do is not basic functionality in any 3D application. As WestLangley said you will have to write your own shader then that takes a second grayscale texture (representing your alpha channel) and then uses this for your masking. Or maybe try to generate an empty RGBA-TextureObject and add in the RGB from 1 image and the alpha from the other and then continue like in my answer. .. .Maybe this is also of any help for you: http://stackoverflow.com/questions/16287547/multiple-transparent-textures-on-the-same-mesh-face-in-three-js – GuyGood Apr 01 '14 at 19:56
  • Hey, thanks for taking the time to help me out. Not sure how my question is unclear since I mention the CSS3 mask property and how I'm looking to an analogue to that in three js. As far as being "basic functionality" is concerned, every 2D rendering engine under the sun supports masking and Unity has an alpha clip shader. Granted, I am still new here so my apologies if it's an unreasonable expectation. On another note, is it possible to have an img printed on a surface in three js? Perhaps I can apply the CSS3 mask on that element and shoot it into the scene. – Dany Joumaa Apr 02 '14 at 00:45
  • Well, the problem is that i am not into 2D Html/CSS stuff a lot but it is not about the masking/clipping stuff that is the problem. It is just that you want to feed the alpha from a second image or canvas and the three.js shaders are not made for this, they expect the mask greyscale image to be in the alpha channel of the image, that is all. Also trust WestLangley if he tells you that you have to write your own shader, he is quite into Three.js, a lot more than i am and he knows what he is talking about ;) Anyway, check the links and try your own Custom Shader to achieve your goal. – GuyGood Apr 02 '14 at 07:50
  • 2
    @GuyGood, his question was phrased fine. – Ian Wise Jun 29 '17 at 11:50
  • @IanWise: Reading this after a few years, it just seems to be a misunderstanding from both of us. One can clearly see that what I understood is not what he really wanted to do. Glad you gave the correct answer when using 2 different textures instead of a texture with alpha channel that would not need the alphamap property. – GuyGood Jul 02 '20 at 14:32