Mixing
Three.js: Cast shadows on a transparent material
I'm trying to convert the lighting on a MeshPhongMaterial:
So that the visible portion is transparent to the dom element beneath it. I just want to keep the shadows. If I use a ShadowMaterial, I lose the radial lighting effect and just get the shadows from the objects:
I tried applying a transparent png texture as the map to the MeshPhongMaterial but it shows as fully transparent with no shadows.
Here is the effect I am trying to recreate (produced using html5 canvas drawing):
Thank you in advance!
three.js
asked Jan 1 at 4:56
austingrayaustingray
967615
add a comment |
I'm trying to convert the lighting on a MeshPhongMaterial:
So that the visible portion is transparent to the dom element beneath it. I just want to keep the shadows. If I use a ShadowMaterial, I lose the radial lighting effect and just get the shadows from the objects:
I tried applying a transparent png texture as the map to the MeshPhongMaterial but it shows as fully transparent with no shadows.
Here is the effect I am trying to recreate (produced using html5 canvas drawing):
Thank you in advance!
three.js
asked Jan 1 at 4:56
austingrayaustingray
967615
Looking into if there is any way to blend the white as an alpha channel or something (I have no idea what I'm doing :)
– austingray
Jan 1 at 16:04
No luck with blending. I tried every variation here threejs.org/docs/#api/en/constants/CustomBlendingEquations
– austingray
Jan 1 at 23:28
I came up with a solution that worked for my particular use case, but I posed a new question that is a bit more generic and is specifically what I was trying to do: stackoverflow.com/questions/54000003/…
– austingray
Jan 2 at 4:53
add a comment |
I'm trying to convert the lighting on a MeshPhongMaterial:
So that the visible portion is transparent to the dom element beneath it. I just want to keep the shadows. If I use a ShadowMaterial, I lose the radial lighting effect and just get the shadows from the objects:
I tried applying a transparent png texture as the map to the MeshPhongMaterial but it shows as fully transparent with no shadows.
Here is the effect I am trying to recreate (produced using html5 canvas drawing):
Thank you in advance!
three.js
asked Jan 1 at 4:56
austingrayaustingray
967615
I'm trying to convert the lighting on a MeshPhongMaterial:
So that the visible portion is transparent to the dom element beneath it. I just want to keep the shadows. If I use a ShadowMaterial, I lose the radial lighting effect and just get the shadows from the objects:
I tried applying a transparent png texture as the map to the MeshPhongMaterial but it shows as fully transparent with no shadows.
Here is the effect I am trying to recreate (produced using html5 canvas drawing):
Thank you in advance!
three.js
three.js
asked Jan 1 at 4:56
austingrayaustingray
967615
asked Jan 1 at 4:56
austingrayaustingray
967615
asked Jan 1 at 4:56
austingrayaustingray
967615
asked Jan 1 at 4:56
austingrayaustingray
967615
asked Jan 1 at 4:56
austingrayaustingray
967615
967615
Looking into if there is any way to blend the white as an alpha channel or something (I have no idea what I'm doing :)
– austingray
Jan 1 at 16:04
No luck with blending. I tried every variation here threejs.org/docs/#api/en/constants/CustomBlendingEquations
– austingray
Jan 1 at 23:28
I came up with a solution that worked for my particular use case, but I posed a new question that is a bit more generic and is specifically what I was trying to do: stackoverflow.com/questions/54000003/…
– austingray
Jan 2 at 4:53
add a comment |
Looking into if there is any way to blend the white as an alpha channel or something (I have no idea what I'm doing :)
– austingray
Jan 1 at 16:04
No luck with blending. I tried every variation here threejs.org/docs/#api/en/constants/CustomBlendingEquations
– austingray
Jan 1 at 23:28
I came up with a solution that worked for my particular use case, but I posed a new question that is a bit more generic and is specifically what I was trying to do: stackoverflow.com/questions/54000003/…
– austingray
Jan 2 at 4:53
Looking into if there is any way to blend the white as an alpha channel or something (I have no idea what I'm doing :)
– austingray
Jan 1 at 16:04
Looking into if there is any way to blend the white as an alpha channel or something (I have no idea what I'm doing :)
– austingray
Jan 1 at 16:04
No luck with blending. I tried every variation here threejs.org/docs/#api/en/constants/CustomBlendingEquations
– austingray
Jan 1 at 23:28
No luck with blending. I tried every variation here threejs.org/docs/#api/en/constants/CustomBlendingEquations
– austingray
Jan 1 at 23:28
I came up with a solution that worked for my particular use case, but I posed a new question that is a bit more generic and is specifically what I was trying to do: stackoverflow.com/questions/54000003/…
– austingray
Jan 2 at 4:53
I came up with a solution that worked for my particular use case, but I posed a new question that is a bit more generic and is specifically what I was trying to do: stackoverflow.com/questions/54000003/…
– austingray
Jan 2 at 4:53
add a comment |
1 Answer
1
active
oldest
votes
I came up with a solution that will technically work. I created another webgl canvas and three.js scene. In the new scene I created a single plane that uses a CanvasTexture of the first canvas as its material's alphaMap. I then had to write a shader that inverted the colors on the first canvas. This was applied using THREE.EffectComposer. Still needs some tweaking but this was the result:
answered Jan 2 at 4:52
austingrayaustingray
967615
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53993098%2fthree-js-cast-shadows-on-a-transparent-material%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
I came up with a solution that will technically work. I created another webgl canvas and three.js scene. In the new scene I created a single plane that uses a CanvasTexture of the first canvas as its material's alphaMap. I then had to write a shader that inverted the colors on the first canvas. This was applied using THREE.EffectComposer. Still needs some tweaking but this was the result:
answered Jan 2 at 4:52
austingrayaustingray
967615
add a comment |
I came up with a solution that will technically work. I created another webgl canvas and three.js scene. In the new scene I created a single plane that uses a CanvasTexture of the first canvas as its material's alphaMap. I then had to write a shader that inverted the colors on the first canvas. This was applied using THREE.EffectComposer. Still needs some tweaking but this was the result:
answered Jan 2 at 4:52
austingrayaustingray
967615
add a comment |
I came up with a solution that will technically work. I created another webgl canvas and three.js scene. In the new scene I created a single plane that uses a CanvasTexture of the first canvas as its material's alphaMap. I then had to write a shader that inverted the colors on the first canvas. This was applied using THREE.EffectComposer. Still needs some tweaking but this was the result:
answered Jan 2 at 4:52
austingrayaustingray
967615
I came up with a solution that will technically work. I created another webgl canvas and three.js scene. In the new scene I created a single plane that uses a CanvasTexture of the first canvas as its material's alphaMap. I then had to write a shader that inverted the colors on the first canvas. This was applied using THREE.EffectComposer. Still needs some tweaking but this was the result:
answered Jan 2 at 4:52
austingrayaustingray
967615
answered Jan 2 at 4:52
austingrayaustingray
967615
answered Jan 2 at 4:52
austingrayaustingray
967615
answered Jan 2 at 4:52
austingrayaustingray
967615
967615
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53993098%2fthree-js-cast-shadows-on-a-transparent-material%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Looking into if there is any way to blend the white as an alpha channel or something (I have no idea what I'm doing :)
– austingray
Jan 1 at 16:04
No luck with blending. I tried every variation here threejs.org/docs/#api/en/constants/CustomBlendingEquations
– austingray
Jan 1 at 23:28
I came up with a solution that worked for my particular use case, but I posed a new question that is a bit more generic and is specifically what I was trying to do: stackoverflow.com/questions/54000003/…
– austingray
Jan 2 at 4:53