# The light shader in ch05

**URL:** <https://forums.kodeco.com/t/the-light-shader-in-ch05/116789>\
**Category:** Metal by Tutorials\
**Created:** [August 5, 2020, 7:07pm UTC](https://forums.kodeco.com/t/the-light-shader-in-ch05/116789 "2020-08-05T19:07:12Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![relaxslow](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/relaxslow/32/103881_2.png) [@relaxslow](https://forums.kodeco.com/u/relaxslow)\
**Post date:** [August 5, 2020, 7:07pm UTC](https://forums.kodeco.com/t/the-light-shader-in-ch05/116789/1 "2020-08-05T19:07:12Z")

</div>

Hi, I’m curious about the light shader provided in ch05.

```auto
 fragment float4 fragment_light(float2 point [[point_coord]],
                                constant float3 &color [[buffer(1)]]) {
   float d = distance(point, float2(0.5, 0.5));
   if (d > 0.5) {
     discard_fragment();
   }
   return float4(color ,1);
 }

```

I’m not sure what the point variable refer to. My understand is this is one pixel that on the screen. So here I don’t understand what the point(0.5,0.5) is

---

<div class="post-metadata">

**Author:** ![caroline](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/caroline/32/111867_2.png) [@caroline](https://forums.kodeco.com/u/caroline)\
**Post date:** [August 5, 2020, 11:30pm UTC](https://forums.kodeco.com/t/the-light-shader-in-ch05/116789/2 "2020-08-05T23:30:28Z")

</div>

That isn’t really a “light” shader - it’s the debug shader. It shows a red circle where a point light is.

And the point variable isn’t necessarily one pixel, you specify the size using a property with the `[[point_size]]` attribute. That’s in `VertexOut` and set to 20.0 in the vertex shader. You used points at the beginning of chapter 4 to try out transforms. You can look at the shader in the Chapter 4 Playground 3DTransforms to see how that works.

So without the `discard_fragment()` bit, the debug shader would show a red square rather than a circle.

The fragment shader receives the fragment it’s going to render within that red square. That’s the `[[point_coord]]` attribute, which is from 0 to 1. 0, 0 being the top left of the red square and 1,1 being the bottom right.

So a circle in that square would have a radius of 0.5. By checking whether the distance of the fragment is further than 0.5, you’re checking to see if it’s outside the circle (ie in the corner of the square). If it is, discard it, and you’re left with a red circle instead of a red square.

Rendering points can be quite useful aside from this debugging. They are 2D and very fast to render. Much later on, when rendering particles, you’ll use large points to render a texture on to. You can use them for billboard textures that always face the camera. For example, if you wanted to render a 2d tree in the background for speed, you could render a texture onto a point, and the tree would always face the camera.

Try changing `point_size` in the vertex shader, `vertex_light`, to something huge, like 150, make sure you’re debug rendering point lights in Renderer.swift:

```auto
 debugLights(renderEncoder: renderEncoder, lightType: Pointlight)

```

and change the shader to this:

```auto
fragment float4 fragment_light(float2 point [[point_coord]],
                               constant float3 &color [[buffer(1)]]) {
  float d = distance(point, float2(0.5, 0.5));
// if (d > 0.5) {
// discard_fragment();
// }
  if (point.x <= 0.2 && point.y <= 0.2) {
    return float4(0, 1, 0, 1);
  }
  return float4(color ,1);

```

You’ll find that the top left of the resulting red square is rendered in green.

---

<div class="post-metadata">

**Author:** ![caroline](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/caroline/32/111867_2.png) [@caroline](https://forums.kodeco.com/u/caroline)\
**Post date:** [August 5, 2020, 11:36pm UTC](https://forums.kodeco.com/t/the-light-shader-in-ch05/116789/3 "2020-08-05T23:36:45Z")

</div>

Btw, to format code, you use back ticks ```

One back tick surrounding the text `looks like this`.

```auto
Three back ticks surrounding a block looks like this

```

---

<div class="post-metadata">

**Author:** ![relaxslow](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/relaxslow/32/103881_2.png) [@relaxslow](https://forums.kodeco.com/u/relaxslow)\
**Post date:** [August 6, 2020, 12:29am UTC](https://forums.kodeco.com/t/the-light-shader-in-ch05/116789/4 "2020-08-06T00:29:31Z")

</div>

thank you,

```auto
 .point_size=20

```

seems only affect the result when set type to .point in

```auto
 renderEncoder.drawPrimitives(type: .lineStrip, vertexStart: 0, vertexCount: vertices.count)

```

if I want to render a line with width ,what can I do  
 ![image](https://files.chunter.kodeco.com/original/3X/3/f/3f037c79c488491189d7f3c7b8d2d1381d0fd9ff.png)  
Here I try to compare the examples in 3 chapter

---

<div class="post-metadata">

**Author:** ![caroline](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/caroline/32/111867_2.png) [@caroline](https://forums.kodeco.com/u/caroline)\
**Post date:** [August 6, 2020, 1:15am UTC](https://forums.kodeco.com/t/the-light-shader-in-ch05/116789/5 "2020-08-06T01:15:08Z")

</div>

That debug light shader is used by the encoder in DebugLights.swift.

```auto
renderEncoder.drawPrimitives(type: .point, vertexStart: 0,
                             vertexCount: vertices.count) 

```

So you have to set the draw type to `.point`.

Unfortunately rendering lines with width on the GPU is really really hard.

Here’s an article on the theory of it (it’s OpenGL, but concepts are generally similar): [Drawing Lines is Hard](https://mattdesl.svbtle.com/drawing-lines-is-hard). He suggests “…break a line into triangles or triangle strips, and then render them as regular geometry.”

---

<div class="post-metadata">

**Author:** ![relaxslow](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/relaxslow/32/103881_2.png) [@relaxslow](https://forums.kodeco.com/u/relaxslow)\
**Post date:** [August 7, 2020, 1:39pm UTC](https://forums.kodeco.com/t/the-light-shader-in-ch05/116789/6 "2020-08-07T13:39:55Z")

</div>

ok, I decide not to research this for now until I have accumulate enough knowledge,  
thank you

---

<div class="post-metadata">

**Author:** ![caroline](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/caroline/32/111867_2.png) [@caroline](https://forums.kodeco.com/u/caroline)\
**Post date:** [August 7, 2020, 10:27pm UTC](https://forums.kodeco.com/t/the-light-shader-in-ch05/116789/7 "2020-08-07T22:27:03Z")

</div>

Good thinking 👍. The amount to learn is overwhelming at the start, but stick with it as it gets easier!