Metal shader in SceneKit to outline an object
I'm playing around and trying to implement Metal shader in SceneKit that will outline an object.
The idea is to draw an outline (or silhouette) similar to this image found in this blogpost (the blogpost doesn't contain any code):
I'm new to SceneKit and Metal shaders so I'm able just to draw some geometry and write simple vertex or fragment shader. I'm curious how can I achieve this kind of effect? Is it done in multiple passes?
Cheers!
ios shader scenekit metal fragment-shader
asked Nov 20 '18 at 14:03
Martin PilchMartin Pilch
1,66922351
add a comment |
I'm playing around and trying to implement Metal shader in SceneKit that will outline an object.
The idea is to draw an outline (or silhouette) similar to this image found in this blogpost (the blogpost doesn't contain any code):
I'm new to SceneKit and Metal shaders so I'm able just to draw some geometry and write simple vertex or fragment shader. I'm curious how can I achieve this kind of effect? Is it done in multiple passes?
Cheers!
ios shader scenekit metal fragment-shader
asked Nov 20 '18 at 14:03
Martin PilchMartin Pilch
1,66922351
That's more than a silhouette. That looks more like some form of "edge detection", which is a term you can search for to find lots of info.
– Ken Thomases
Nov 20 '18 at 16:49
add a comment |
I'm playing around and trying to implement Metal shader in SceneKit that will outline an object.
The idea is to draw an outline (or silhouette) similar to this image found in this blogpost (the blogpost doesn't contain any code):
I'm new to SceneKit and Metal shaders so I'm able just to draw some geometry and write simple vertex or fragment shader. I'm curious how can I achieve this kind of effect? Is it done in multiple passes?
Cheers!
ios shader scenekit metal fragment-shader
asked Nov 20 '18 at 14:03
Martin PilchMartin Pilch
1,66922351
I'm playing around and trying to implement Metal shader in SceneKit that will outline an object.
The idea is to draw an outline (or silhouette) similar to this image found in this blogpost (the blogpost doesn't contain any code):
I'm new to SceneKit and Metal shaders so I'm able just to draw some geometry and write simple vertex or fragment shader. I'm curious how can I achieve this kind of effect? Is it done in multiple passes?
Cheers!
ios shader scenekit metal fragment-shader
ios shader scenekit metal fragment-shader
asked Nov 20 '18 at 14:03
Martin PilchMartin Pilch
1,66922351
asked Nov 20 '18 at 14:03
Martin PilchMartin Pilch
1,66922351
edited Nov 20 '18 at 19:48
Martin Pilch
asked Nov 20 '18 at 14:03
Martin PilchMartin Pilch
1,66922351
asked Nov 20 '18 at 14:03
Martin PilchMartin Pilch
1,66922351
asked Nov 20 '18 at 14:03
Martin PilchMartin Pilch
1,66922351
1,66922351
That's more than a silhouette. That looks more like some form of "edge detection", which is a term you can search for to find lots of info.
– Ken Thomases
Nov 20 '18 at 16:49
add a comment |
That's more than a silhouette. That looks more like some form of "edge detection", which is a term you can search for to find lots of info.
– Ken Thomases
Nov 20 '18 at 16:49
That's more than a silhouette. That looks more like some form of "edge detection", which is a term you can search for to find lots of info.
– Ken Thomases
Nov 20 '18 at 16:49
That's more than a silhouette. That looks more like some form of "edge detection", which is a term you can search for to find lots of info.
– Ken Thomases
Nov 20 '18 at 16:49
add a comment |
1 Answer
1
active
oldest
votes
The basic idea here is to clone the "selected" node and its geometry, then use a custom vertex and fragment shader to "push" the geometry out along the vertex normals, drawing only the back faces of the cloned geometry with a solid color.
I wrote a small sample project to demonstrate this and posted it here.
The core Swift code looks like this:
let outlineProgram = SCNProgram()
outlineProgram.vertexFunctionName = "outline_vertex"
outlineProgram.fragmentFunctionName = "outline_fragment"
let outlineNode = duplicateNode(node)
scene.rootNode.addChildNode(outlineNode)
outlineNode.geometry?.firstMaterial?.program = outlineProgram
outlineNode.geometry?.firstMaterial?.cullMode = .front
The portion of the vertex shader responsible for pushing vertices along their normal looks like this:
const float extrusionMagnitude = 0.05;
float3 modelPosition = in.position + normalize(in.normal) * extrusionMagnitude;
From there, you just apply your typical model-view-projection matrix and return a flat color from the fragment shader.
answered Nov 21 '18 at 0:08
warrenmwarrenm
21.6k45585
Thanks a lot! That's why I love SO. You can always find people happy to help! My original idea was to do something similar with fragment shader, modifying fragment color based on normal but this approach looks interesting. Will post another question if needed. Thank you again.
– Martin Pilch
Nov 21 '18 at 13:18
I'm concerned how to do it without cloning model. I run into this tutorial: in2gpu.com/2014/06/23/… but I'm struggling with rewriting it to Metal. Do you mind if I send you project with my implementation of toon shading? Have you got a time to check what I'm doing wrong?
– Martin Pilch
Dec 6 '18 at 14:32
Here is the project: file.io/ZGbBwA
– Martin Pilch
Dec 6 '18 at 14:56
Sounds like a separate question. Also, your project link gives a 404 error.
– warrenm
Dec 6 '18 at 16:50
Good point. I created another question: stackoverflow.com/questions/53658843/…
– Martin Pilch
Dec 6 '18 at 20:02
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%2f53394751%2fmetal-shader-in-scenekit-to-outline-an-object%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
The basic idea here is to clone the "selected" node and its geometry, then use a custom vertex and fragment shader to "push" the geometry out along the vertex normals, drawing only the back faces of the cloned geometry with a solid color.
I wrote a small sample project to demonstrate this and posted it here.
The core Swift code looks like this:
let outlineProgram = SCNProgram()
outlineProgram.vertexFunctionName = "outline_vertex"
outlineProgram.fragmentFunctionName = "outline_fragment"
let outlineNode = duplicateNode(node)
scene.rootNode.addChildNode(outlineNode)
outlineNode.geometry?.firstMaterial?.program = outlineProgram
outlineNode.geometry?.firstMaterial?.cullMode = .front
The portion of the vertex shader responsible for pushing vertices along their normal looks like this:
const float extrusionMagnitude = 0.05;
float3 modelPosition = in.position + normalize(in.normal) * extrusionMagnitude;
From there, you just apply your typical model-view-projection matrix and return a flat color from the fragment shader.
answered Nov 21 '18 at 0:08
warrenmwarrenm
21.6k45585
Thanks a lot! That's why I love SO. You can always find people happy to help! My original idea was to do something similar with fragment shader, modifying fragment color based on normal but this approach looks interesting. Will post another question if needed. Thank you again.
– Martin Pilch
Nov 21 '18 at 13:18
I'm concerned how to do it without cloning model. I run into this tutorial: in2gpu.com/2014/06/23/… but I'm struggling with rewriting it to Metal. Do you mind if I send you project with my implementation of toon shading? Have you got a time to check what I'm doing wrong?
– Martin Pilch
Dec 6 '18 at 14:32
Here is the project: file.io/ZGbBwA
– Martin Pilch
Dec 6 '18 at 14:56
Sounds like a separate question. Also, your project link gives a 404 error.
– warrenm
Dec 6 '18 at 16:50
Good point. I created another question: stackoverflow.com/questions/53658843/…
– Martin Pilch
Dec 6 '18 at 20:02
add a comment |
The basic idea here is to clone the "selected" node and its geometry, then use a custom vertex and fragment shader to "push" the geometry out along the vertex normals, drawing only the back faces of the cloned geometry with a solid color.
I wrote a small sample project to demonstrate this and posted it here.
The core Swift code looks like this:
let outlineProgram = SCNProgram()
outlineProgram.vertexFunctionName = "outline_vertex"
outlineProgram.fragmentFunctionName = "outline_fragment"
let outlineNode = duplicateNode(node)
scene.rootNode.addChildNode(outlineNode)
outlineNode.geometry?.firstMaterial?.program = outlineProgram
outlineNode.geometry?.firstMaterial?.cullMode = .front
The portion of the vertex shader responsible for pushing vertices along their normal looks like this:
const float extrusionMagnitude = 0.05;
float3 modelPosition = in.position + normalize(in.normal) * extrusionMagnitude;
From there, you just apply your typical model-view-projection matrix and return a flat color from the fragment shader.
answered Nov 21 '18 at 0:08
warrenmwarrenm
21.6k45585
Thanks a lot! That's why I love SO. You can always find people happy to help! My original idea was to do something similar with fragment shader, modifying fragment color based on normal but this approach looks interesting. Will post another question if needed. Thank you again.
– Martin Pilch
Nov 21 '18 at 13:18
I'm concerned how to do it without cloning model. I run into this tutorial: in2gpu.com/2014/06/23/… but I'm struggling with rewriting it to Metal. Do you mind if I send you project with my implementation of toon shading? Have you got a time to check what I'm doing wrong?
– Martin Pilch
Dec 6 '18 at 14:32
Here is the project: file.io/ZGbBwA
– Martin Pilch
Dec 6 '18 at 14:56
Sounds like a separate question. Also, your project link gives a 404 error.
– warrenm
Dec 6 '18 at 16:50
Good point. I created another question: stackoverflow.com/questions/53658843/…
– Martin Pilch
Dec 6 '18 at 20:02
add a comment |
The basic idea here is to clone the "selected" node and its geometry, then use a custom vertex and fragment shader to "push" the geometry out along the vertex normals, drawing only the back faces of the cloned geometry with a solid color.
I wrote a small sample project to demonstrate this and posted it here.
The core Swift code looks like this:
let outlineProgram = SCNProgram()
outlineProgram.vertexFunctionName = "outline_vertex"
outlineProgram.fragmentFunctionName = "outline_fragment"
let outlineNode = duplicateNode(node)
scene.rootNode.addChildNode(outlineNode)
outlineNode.geometry?.firstMaterial?.program = outlineProgram
outlineNode.geometry?.firstMaterial?.cullMode = .front
The portion of the vertex shader responsible for pushing vertices along their normal looks like this:
const float extrusionMagnitude = 0.05;
float3 modelPosition = in.position + normalize(in.normal) * extrusionMagnitude;
From there, you just apply your typical model-view-projection matrix and return a flat color from the fragment shader.
answered Nov 21 '18 at 0:08
warrenmwarrenm
21.6k45585
The basic idea here is to clone the "selected" node and its geometry, then use a custom vertex and fragment shader to "push" the geometry out along the vertex normals, drawing only the back faces of the cloned geometry with a solid color.
I wrote a small sample project to demonstrate this and posted it here.
The core Swift code looks like this:
let outlineProgram = SCNProgram()
outlineProgram.vertexFunctionName = "outline_vertex"
outlineProgram.fragmentFunctionName = "outline_fragment"
let outlineNode = duplicateNode(node)
scene.rootNode.addChildNode(outlineNode)
outlineNode.geometry?.firstMaterial?.program = outlineProgram
outlineNode.geometry?.firstMaterial?.cullMode = .front
The portion of the vertex shader responsible for pushing vertices along their normal looks like this:
const float extrusionMagnitude = 0.05;
float3 modelPosition = in.position + normalize(in.normal) * extrusionMagnitude;
From there, you just apply your typical model-view-projection matrix and return a flat color from the fragment shader.
answered Nov 21 '18 at 0:08
warrenmwarrenm
21.6k45585
answered Nov 21 '18 at 0:08
warrenmwarrenm
21.6k45585
answered Nov 21 '18 at 0:08
warrenmwarrenm
21.6k45585
answered Nov 21 '18 at 0:08
warrenmwarrenm
21.6k45585
21.6k45585
Thanks a lot! That's why I love SO. You can always find people happy to help! My original idea was to do something similar with fragment shader, modifying fragment color based on normal but this approach looks interesting. Will post another question if needed. Thank you again.
– Martin Pilch
Nov 21 '18 at 13:18
I'm concerned how to do it without cloning model. I run into this tutorial: in2gpu.com/2014/06/23/… but I'm struggling with rewriting it to Metal. Do you mind if I send you project with my implementation of toon shading? Have you got a time to check what I'm doing wrong?
– Martin Pilch
Dec 6 '18 at 14:32
Here is the project: file.io/ZGbBwA
– Martin Pilch
Dec 6 '18 at 14:56
Sounds like a separate question. Also, your project link gives a 404 error.
– warrenm
Dec 6 '18 at 16:50
Good point. I created another question: stackoverflow.com/questions/53658843/…
– Martin Pilch
Dec 6 '18 at 20:02
add a comment |
Thanks a lot! That's why I love SO. You can always find people happy to help! My original idea was to do something similar with fragment shader, modifying fragment color based on normal but this approach looks interesting. Will post another question if needed. Thank you again.
– Martin Pilch
Nov 21 '18 at 13:18
I'm concerned how to do it without cloning model. I run into this tutorial: in2gpu.com/2014/06/23/… but I'm struggling with rewriting it to Metal. Do you mind if I send you project with my implementation of toon shading? Have you got a time to check what I'm doing wrong?
– Martin Pilch
Dec 6 '18 at 14:32
Here is the project: file.io/ZGbBwA
– Martin Pilch
Dec 6 '18 at 14:56
Sounds like a separate question. Also, your project link gives a 404 error.
– warrenm
Dec 6 '18 at 16:50
Good point. I created another question: stackoverflow.com/questions/53658843/…
– Martin Pilch
Dec 6 '18 at 20:02
Thanks a lot! That's why I love SO. You can always find people happy to help! My original idea was to do something similar with fragment shader, modifying fragment color based on normal but this approach looks interesting. Will post another question if needed. Thank you again.
– Martin Pilch
Nov 21 '18 at 13:18
Thanks a lot! That's why I love SO. You can always find people happy to help! My original idea was to do something similar with fragment shader, modifying fragment color based on normal but this approach looks interesting. Will post another question if needed. Thank you again.
– Martin Pilch
Nov 21 '18 at 13:18
I'm concerned how to do it without cloning model. I run into this tutorial: in2gpu.com/2014/06/23/… but I'm struggling with rewriting it to Metal. Do you mind if I send you project with my implementation of toon shading? Have you got a time to check what I'm doing wrong?
– Martin Pilch
Dec 6 '18 at 14:32
I'm concerned how to do it without cloning model. I run into this tutorial: in2gpu.com/2014/06/23/… but I'm struggling with rewriting it to Metal. Do you mind if I send you project with my implementation of toon shading? Have you got a time to check what I'm doing wrong?
– Martin Pilch
Dec 6 '18 at 14:32
Here is the project: file.io/ZGbBwA
– Martin Pilch
Dec 6 '18 at 14:56
Here is the project: file.io/ZGbBwA
– Martin Pilch
Dec 6 '18 at 14:56
Sounds like a separate question. Also, your project link gives a 404 error.
– warrenm
Dec 6 '18 at 16:50
Sounds like a separate question. Also, your project link gives a 404 error.
– warrenm
Dec 6 '18 at 16:50
Good point. I created another question: stackoverflow.com/questions/53658843/…
– Martin Pilch
Dec 6 '18 at 20:02
Good point. I created another question: stackoverflow.com/questions/53658843/…
– Martin Pilch
Dec 6 '18 at 20:02
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%2f53394751%2fmetal-shader-in-scenekit-to-outline-an-object%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
That's more than a silhouette. That looks more like some form of "edge detection", which is a term you can search for to find lots of info.
– Ken Thomases
Nov 20 '18 at 16:49