Q&A

[00:00:00]
>> Can you use camera mapping and Three.js?
>> I guess the answer would be, there's probably a way to do that, it might not be built in as far as I know. But something like instead of mapping using a sphere, but mapping using the current viewport, you might have to write that in a shader.

[00:00:24]
Anyways, the answer I would say would be yes if she can figure it out.m in a shader. But that’s not very helpful, but I think you’d have to think about it cuz I would have to think about it to and I would have to come up with some solution.

[00:00:40]
And also I guess it depends because there’s different ways of mapping to a camera like the simplest would be to use this gl_Position. But yeah, anyways, that's not a very good answer because I don't have a good answer for it, sorry, yeah,
>> I tried to apply point lighting to a shader material and it didn't work.

[00:01:11]
>> So that's gonna be tricky as well, so the way that point lighting works is that Three.js has these materials like phong material or standard material, and when they say phong material or standard retail, it's just that they've already written huge shader that has to do with all the lighting and stuff like that.

[00:01:31]
And so that that early shader that we wrote, it was just like void main({ gl_FragColor = vec4color, opacity;)}. This is actually a mesh basic material that we're writing here. So we've just written our own mesh basic material, but imagine as the materials get more and more complex, the shaders get more and more complex and trying to insert one little line of difference into a Three.js shader is quite complex and not very easy.

[00:02:06]
So it's definitely possible, many people working with Three.js are trying to figure out different ways of doing that, where we take a built in material and we wanna just modify it with one line, we wanna just add our own thing. But you're gonna have to sort of dig around the Internet and see how other people are using, so threejs shader custom Phong, or something like that.

[00:02:34]
And you're gonna have to sort of dig in and see how people are doing this in different ways. And so there's some people that are writing blog posts about how they're taking this approach, and so on and so forth.
>> So a material is just a fancy pre-built shader.

[00:02:50]
>> Exactly, 100% just a shader, and so, yeah it's just what we've been writing today, yeah.
>> What's the best way to hide a certain portion of an object?
>> To hide is that the question?
>> That's the question.
>> So the best way to hide certain portions of an object, it depends on what you're trying to achieve.

[00:03:16]
>> Something about clipping?
>> Yeah so, I mean when we talk about like WebGL there's so many ways of doing one thing, so that's kind of what I was trying to get at with this exercise with the circles. We were just trying to do this kind of circles thing, but we approached it in so many different ways, and they all had different benefits and fallbacks and stuff like that.

[00:03:40]
So let's say I was trying to mask out part of this image, what you actually could do maybe is in a fragment shader, you could edit it so that we have that mask variable like we were doing earlier which goes from 0 to 1. And maybe it's like part of this here is gonna be if the mask variable here is 0 and then the rest of it is 1, then you can use for your frag color, you could say mix from a transparent value like RGBA with the alpha 0, to an opaque value.

[00:04:17]
And then you'll be able to see through that part, so actually a good example here within our circle, within our sphere. Let's say we wanted to be able to see through these points, these polka dots, so that it was more like wiffle ball or something like that. So in our fragment shader, we can do this little line here, if mask is less than 0.5, we're gonna do discard, and actually I should have done the other way around if it's greater than 0.5.

[00:05:00]
And what that's gonna do is it's gonna say, if we're inside the circle, discard the fragment, discard means don't draw this fragment. And if all of a sudden I mean right now we're not seeing anything inside the sphere, but if we change this to a two sided material, We're gonna see the inside of the sphere as well, which is kind of cool actually.

[00:05:26]
And that's because we're just no longer rendering these fragments, and so because we are no longer rendering them, we're seeing straight through them. And so you can imagine a mask, that's not just something as simple as circles, but maybe it's using noise or something like that, and it's undulating, and it's occluding parts of the sphere.

[00:05:46]
And so this is a fragment shader approach to creating some occlusions, it has some problems like one of the problems has to do again with this jaggedness. The lack of anti-aliasing which is just a fancy word for smoothing things, but here if I save the file and I take a look up close, you'll see that it's very jagged.

[00:06:09]
And that's because we're using this boolean if it's over a certain value discard, if it's under a certain accept. And what we really want instead of a Boolean is we want some sort of a, a step function to smoothly go from opaque to transparent but doing that is not very easy.

[00:06:32]
So that has some downsides. So if you didn't wanna take a fragment based approach, you could also do what's called CSG which is a sort of construct of geometry. And this is like actual Boolean operations on geometry, so you have one mesh, you take another mesh and create a Boolean operation And so that could actually be another way to create this kind of wiffle ball, by just putting cylinders that are poking out, so this actually would have been a great exercise as well.

[00:07:09]
We have the exact exercise that we have here, and we could use spheres or we could use cylinders for each of these spheres would work just as well. But with CSG you can take these spheres, and each of this spheres you could sort of intersect it with the red sphere, so each of these white spheres will be intersected, so that you are basically cutting holes in the red sphere.

[00:07:33]
And the benefit of that approach, is that the circles you are gonna get are gonna be anti aliased. That's really the only benefit which is a small benefit, but depending on your creative direction, depending on what kind of thing you're building, you might want one or the other.

[00:07:52]
It's gonna lead to a lot more triangles because when you have CSG, you end up with lots of triangles in the actual final output, which you can sort of see it the mesh starts to get messy with like the wire frame of the mesh. But yeah, that's that's another way of doing occlusion and stuff like that.

[00:08:14]
There's probably like a dozen other ways to do occlusions, and a dozen other ways to do this kind of shader as well.