# Create halftone effect with a diamond shape

**URL:** <https://discourse.threejs.org/t/create-halftone-effect-with-a-diamond-shape/89585>\
**Category:** Questions\
**Tags:** shaders\
**Created:** [February 2, 2026, 4:15pm UTC](https://discourse.threejs.org/t/create-halftone-effect-with-a-diamond-shape/89585 "2026-02-02T16:15:15Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![NateWr](https://avatars.discourse-cdn.com/v4/letter/n/8dc957/32.png) [@NateWr](https://discourse.threejs.org/u/NateWr)\
**Post date:** [February 2, 2026, 4:15pm UTC](https://discourse.threejs.org/t/create-halftone-effect-with-a-diamond-shape/89585/1 "2026-02-02T16:15:16Z")

</div>

I am trying to recreate a halftone effect with a diamond shape. The original half-tone effect was applied to an image in Gimp and looks like this.

 ![halftone-diamond](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/6/4/644fae51fa29097c115fa3e0a68416eb5ddd8f5e.jpeg)

I am trying to reproduce this effect in three.js using the `HalftonePass` (which uses the `HalftoneShader`). That has been pretty successful, but it uses a circle shape instead of the diamonds:

 ![halftone-circle](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/5/d/5da9c075d4db98412cc54f746686c1ae710c18ef.jpeg)

The `HalftoneShader` supports [four shapes](https://github.com/mrdoob/three.js/blob/70f24f687d72eca78186cd63c88f97c2b0c22703/examples/jsm/shaders/HalftoneShader.js#L53-L56) (dot, ellipse, line, square). I believe that the dot shape used in the image above is calculated in the following code in [distanceToDotRadius](https://github.com/mrdoob/three.js/blob/70f24f687d72eca78186cd63c88f97c2b0c22703/examples/jsm/shaders/HalftoneShader.js#L107):

```javascript
rad = pow( abs( rad ), 1.125 ) * rad_max;

```

Other shape functions are handled in adjacent lines, but honestly I wouldn’t know where to begin to figure out how to define a diamond shape. Does anyone know how I could define a diamond shape here or have any links I could follow to try to figure this out? I may be well out of my depth here…

---

<div class="post-metadata">

**Author:** ![Lukasz\_Mestales](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lukasz_mestales/32/65638_2.png) [@Lukasz\_Mestales](https://discourse.threejs.org/u/Lukasz_Mestales)\
**Post date:** [February 2, 2026, 6:23pm UTC](https://discourse.threejs.org/t/create-halftone-effect-with-a-diamond-shape/89585/2 "2026-02-02T18:23:46Z")

</div>

As it seems to me correctly, a diamond is a _kicked_ square… so why do you start from a point and not from a square, rotating it by 45 degrees?

```glsl
(shape == SHAPE_DIAMOND) {
    float angle45 = 3.14159265 / 4.0; // 45°
    float theta = atan(p.y - coord.y, p.x - coord.x) - angle45;
    float sin_t = abs(sin(theta));
    float cos_t = abs(cos(theta));
    rad = pow(abs(rad), 1.4);
    rad = rad_max * (rad + ((sin_t > cos_t) ? rad - sin_t * rad : rad - cos_t * rad));
}

```

---

<div class="post-metadata">

**Author:** ![PavelBoytchev](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pavelboytchev/32/38639_2.png) [@PavelBoytchev](https://discourse.threejs.org/u/PavelBoytchev)\
**Post date:** [February 3, 2026, 6:57am UTC](https://discourse.threejs.org/t/create-halftone-effect-with-a-diamond-shape/89585/3 "2026-02-03T06:57:35Z")

</div>

> [@NateWr](#):
>
> Does anyone know how I could define a diamond shape

No need to change anything in the shader. It has uniforms (a kind of parameters). There are uniforms for rotation (`rotateR`, `rotateG` and `rotateB`), so use them. Here is the default square pattern:

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/b/0/b02387714b21aeaa94857e11ae58533e36b68d74.jpeg)

And here is the same, but with rotations of \pi /4, which is 45^{\circ}

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/f/9/f9b4dc3a23c8d34bf715229fb2bec4c3d6cdd415.jpeg)

---

<div class="post-metadata">

**Author:** ![dubois](https://avatars.discourse-cdn.com/v4/letter/d/e9c0ed/32.png) [@dubois](https://discourse.threejs.org/u/dubois)\
**Post date:** [February 3, 2026, 7:08am UTC](https://discourse.threejs.org/t/create-halftone-effect-with-a-diamond-shape/89585/4 "2026-02-03T07:08:53Z")

</div>

Whats this gui from these screenshots?

---

<div class="post-metadata">

**Author:** ![PavelBoytchev](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pavelboytchev/32/38639_2.png) [@PavelBoytchev](https://discourse.threejs.org/u/PavelBoytchev)\
**Post date:** [February 3, 2026, 7:21am UTC](https://discourse.threejs.org/t/create-halftone-effect-with-a-diamond-shape/89585/5 "2026-02-03T07:21:47Z")

</div>

[Oops](https://boytchev.github.io/oops.js/)

[Halftone](https://boytchev.github.io/oops.js/gallery/Halftone.html)

---

<div class="post-metadata">

**Author:** ![NateWr](https://avatars.discourse-cdn.com/v4/letter/n/8dc957/32.png) [@NateWr](https://discourse.threejs.org/u/NateWr)\
**Post date:** [February 3, 2026, 11:05am UTC](https://discourse.threejs.org/t/create-halftone-effect-with-a-diamond-shape/89585/6 "2026-02-03T11:05:55Z")

</div>

Wow, I’m really blown away by all the help. Thanks everyone! @Lukasz_Mestales’s approach of the “kicked square” did the trick:

 ![halftone-diamond-applied](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/2/6/26f517d8845f7f675f3268f805997dc212130c48.png)

I just had to apply both the `angle` and the `angle45` to get the diamonds aligned correctly along the tilted axis. This is the final function (`- angle - angle45`):

```glsl
} else if ( shape == SHAPE_DIAMOND ) {

	float angle45 = 3.14159265 / 4.0;
	float theta = atan( p.y - coord.y, p.x - coord.x ) - angle - angle45;
	float sin_t = abs( sin( theta ) );
	float cos_t = abs( cos( theta ) );
	rad = pow( abs( rad ), 1.4 );
	rad = rad_max * ( rad + ( ( sin_t > cos_t ) ? rad - sin_t * rad : rad - cos_t * rad ) );
}

```

@PavelBoytchev thanks for that tip! I did try the rotation uniforms, but I think part of the diamond effect I want relies on how gaps between the diamonds are positioned. The square shape with rotation left even gaps around all four edges. I’m not sure if I understand it properly but something looks slightly different about the diamond effect that I wanted.

---

<div class="post-metadata">

**Author:** ![NateWr](https://avatars.discourse-cdn.com/v4/letter/n/8dc957/32.png) [@NateWr](https://discourse.threejs.org/u/NateWr)\
**Post date:** [February 3, 2026, 1:15pm UTC](https://discourse.threejs.org/t/create-halftone-effect-with-a-diamond-shape/89585/7 "2026-02-03T13:15:47Z")

</div>

The [PR was merged](https://github.com/mrdoob/three.js/pull/32942) so this feature be available as an option in r183.