# Personal portfolio - Impossible-Box

**URL:** <https://discourse.threejs.org/t/personal-portfolio-impossible-box/51511>\
**Category:** Showcase\
**Tags:** generative, blender, cannonjs, react-three-fiber, shaders\
**Created:** [May 12, 2023, 5:18pm UTC](https://discourse.threejs.org/t/personal-portfolio-impossible-box/51511 "2023-05-12T17:18:49Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![James\_Hall](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/james_hall/32/35329_2.png) [@James\_Hall](https://discourse.threejs.org/u/James_Hall)\
**Post date:** [May 12, 2023, 5:18pm UTC](https://discourse.threejs.org/t/personal-portfolio-impossible-box/51511/1 "2023-05-12T17:18:49Z")

</div>

Hey everyone,

I’m super stoked to share a project that I’ve been working on with three.js.  
I’ve put together a 3D portfolio that’s a bit out of the box - quite literally. I used react-three-fiber to craft an impossible box, and each of its faces is a different project I’ve worked on.

And the cherry on top - this project bagged an Honorable Mention on Awwwards!

Check it out here: [Impossible Box Link](https://impossible-box.web.app)  
See the award here: [Awwwards Mention Link](https://www.awwwards.com/sites/impossible-box)

I’d really appreciate any feedback you guys might have. If you spot something off, or have suggestions to make it better, do let me know. I’m all ears for ways to improve.

---

<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:** [May 12, 2023, 5:42pm UTC](https://discourse.threejs.org/t/personal-portfolio-impossible-box/51511/2 "2023-05-12T17:42:56Z")

</div>

It is beautiful and captivating. If I stay more than 30 seconds watching a showcase, it means I like it. I stayed a few minutes with (or in) your impossible box.

As for glitches, there are some:

- the asset loading bar is not honest, see where 50% is (sometimes it is 1/3, sometimes it is 1/4 full)
- the maze has some z-fighting
- when I enter the house generation room, I cannot exit (tried pressing the close button many times), the exit buttons of other rooms work fine
- I tried to look under the box or on top of its roof (in case there is some Easter egg), … but there was none

Also, congrats for the honorable mention on Awwwards!

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/3/d/3d354b3c3de9138541ef783dde6483588fd50d55.png)

---

<div class="post-metadata">

**Author:** ![James\_Hall](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/james_hall/32/35329_2.png) [@James\_Hall](https://discourse.threejs.org/u/James_Hall)\
**Post date:** [May 12, 2023, 6:24pm UTC](https://discourse.threejs.org/t/personal-portfolio-impossible-box/51511/3 "2023-05-12T18:24:53Z")

</div>

Thanks heaps for your feedback on my project! I’ll tackle those unnoticed bugs ASAP. As for the Easter egg on the box top and bottom - love the idea, but it’s tricky with the current setup

---

<div class="post-metadata">

**Author:** ![James\_Hall](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/james_hall/32/35329_2.png) [@James\_Hall](https://discourse.threejs.org/u/James_Hall)\
**Post date:** [May 12, 2023, 6:32pm UTC](https://discourse.threejs.org/t/personal-portfolio-impossible-box/51511/4 "2023-05-12T18:32:35Z")

</div>

> [@PavelBoytchev](#):
>
> - the maze has some z-fighting

I’m really scratching my head over this issue as it seems to crop up only on certain devices. Could you please let me know the type of device and browser you used? This info would be super helpful in troubleshooting

---

<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:** [May 12, 2023, 6:42pm UTC](https://discourse.threejs.org/t/personal-portfolio-impossible-box/51511/5 "2023-05-12T18:42:46Z")

</div>

It’s a laptop with two cards (integrated and NVidia)

Opera 98.0.4759.39, Edge 113.0.1774.35 → looks good  
Firefox 112.0.2, Chrome 113.0.5672.93 → z-figthing

(this is somewhat unexpected, usually Chrome outperforms the other browsers, it might be some setting)

Maybe some more brutal `PolygonOffset` would be sufficient?

---

<div class="post-metadata">

**Author:** ![James\_Hall](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/james_hall/32/35329_2.png) [@James\_Hall](https://discourse.threejs.org/u/James_Hall)\
**Post date:** [May 12, 2023, 7:26pm UTC](https://discourse.threejs.org/t/personal-portfolio-impossible-box/51511/6 "2023-05-12T19:26:45Z")

</div>

Thanks so much for going the extra mile and running these tests, I really appreciate your help.

> [@PavelBoytchev](#):
>
> Maybe some more brutal `PolygonOffset` would be sufficient?

I tried your fix, but I can’t tell if it worked because I’m not able to reproduce the bug on my end

The issue is strange because the maze is just one plane, so it’s weird that it would have z-fighting with itself. I think it might be a shader issue, but I’m not sure why this would happen on some devices and not others

---

<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:** [May 12, 2023, 7:38pm UTC](https://discourse.threejs.org/t/personal-portfolio-impossible-box/51511/7 "2023-05-12T19:38:49Z")

</div>

It appears I’ve set up different browsers to different graphics hardware. Here are snapshots. I’ve marked differences with red arrows:

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/c/8/c840f25a338dd8bbcb4c4367d56af8be29ac3a76.png)

* * *

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/9/7/977853c66cbbb7e4d74797cc75d1ea1fd28d341d.png)

---

<div class="post-metadata">

**Author:** ![James\_Hall](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/james_hall/32/35329_2.png) [@James\_Hall](https://discourse.threejs.org/u/James_Hall)\
**Post date:** [May 12, 2023, 8:27pm UTC](https://discourse.threejs.org/t/personal-portfolio-impossible-box/51511/8 "2023-05-12T20:27:40Z")

</div>

😵‍💫  
Honestly, this issue has me totally stumped  
I’m not even sure where to start fixing this.  
But I really appreciate the information - it could come in handy as I continue to troubleshoot

---

<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:** [May 12, 2023, 8:43pm UTC](https://discourse.threejs.org/t/personal-portfolio-impossible-box/51511/9 "2023-05-12T20:43:02Z")

</div>

It appears it is not related to the browser, but to the graphical system. Works fine with Chrome+UHD, fails with Chrome+NVidia.

Could you make just the maze in CodePen? Some minimal example, without all the logic for maze generation and path finding.

When I have time, and if it is not urgent, I could try to debug it on my machine.

---

<div class="post-metadata">

**Author:** ![James\_Hall](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/james_hall/32/35329_2.png) [@James\_Hall](https://discourse.threejs.org/u/James_Hall)\
**Post date:** [May 13, 2023, 8:39pm UTC](https://discourse.threejs.org/t/personal-portfolio-impossible-box/51511/10 "2023-05-13T20:39:21Z")

</div>

Sorry for the delay. I’ve put together a CodeSandbox with everything needed to reproduce the bug. Here’s the link: [CodeSandbox Link](https://codesandbox.io/s/toggleshader-evjbxf)  
Thank you for taking the time to help me try to solve this issue, I really appreciate

---

<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:** [May 13, 2023, 10:10pm UTC](https://discourse.threejs.org/t/personal-portfolio-impossible-box/51511/11 "2023-05-13T22:10:39Z")

</div>

In `MazeShader.js`, when `wallHeight` is 10 there is z-fighting:

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/f/a/faed98cbfa5be2d59bb896101469e31d53f4802b.png)

When `wallHeight` is 11 it looks without fight:

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/c/d/cdfe81f92893332f91291c0f456b15cc92c2d3b0.png)

However, the color looks wrong. So, when I look how `wallHeight` is used, I see direct compare of floating point values. This is dangerous. When I replace `a==b` with `abs(a-b)<0.001`, the color looks OK with `wallHeight` = 10:

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/a/1/a1fe8ac26a16a19dab9267a5cc42052b48dc009b.png)

---

<div class="post-metadata">

**Author:** ![James\_Hall](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/james_hall/32/35329_2.png) [@James\_Hall](https://discourse.threejs.org/u/James_Hall)\
**Post date:** [May 14, 2023, 9:25am UTC](https://discourse.threejs.org/t/personal-portfolio-impossible-box/51511/12 "2023-05-14T09:25:50Z")

</div>

It turned out to be an easy fix after all!  
No more comparing floating-point values for me – I’ve learned my lesson haha  
I’ve made the correction on the site, but this time I’m the one with a Z-fighting issue

![Capture d'écran 2023-05-14 104951](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/6/2/6207e09b8b83cb5e40e62b2c7d4e8ed286d59b68.png) ![Capture d'écran 2023-05-14 105054](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/f/2/f21bad2e80132b73e69e30d234d9a0c0e57fd49a.png)

To resolve it, I removed the polygon offset and adopted this code organization and it seems to work:

```javascript
const maze = {
    wallHeight: 8,
    pathHeight: 18,
    visitedHeight: 5
}
const colors = /* glsl */ `
    if( 
    (vPosition.z > ${maze.pathHeight}.0)
    || (north.x > ${maze.pathHeight}.0)
    || (south.x > ${maze.pathHeight}.0)
    || (east.x > ${maze.pathHeight}.0)
    || (west.x > ${maze.pathHeight}.0)
    ){
        diffuseColor.rgb = vec3(0.6,0.0,0.0);
    }    
    else if( 
    (vPosition.z > ${maze.wallHeight}.0)
    || (north.x > ${maze.wallHeight}.0 )
    || (south.x > ${maze.wallHeight}.0 )
    || (east.x > ${maze.wallHeight}.0 )
    || (west.x > ${maze.wallHeight}.0 )
    ){
        diffuseColor.rgb = vec3(0.05,0.05,0.7);
    }
    else if (
    (vPosition.z == ${maze.visitedHeight}.0 )
    || (north.x == ${maze.visitedHeight}.0)
    || (south.x == ${maze.visitedHeight}.0)
    || (east.x == ${maze.visitedHeight}.0)
    || (west.x == ${maze.visitedHeight}.0)
    ){
        diffuseColor.rgb = vec3(1.0,1.0,1.0);
    }
    else{
        diffuseColor.rgb = vec3(0.01,0.01,0.01);
    }
      `

```

---

<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:** [May 14, 2023, 10:02am UTC](https://discourse.threejs.org/t/personal-portfolio-impossible-box/51511/13 "2023-05-14T10:02:34Z")

</div>

Imagine `vPosition.z` fluctuates around `wallHeight`, e.g. from 9.999999 to 10.000001 … In this case `vPosition.z > wallHeight` is not sufficient:

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/6/a/6a2f5671876ab979f6bee92c49273d82e00feec5.png)

---

<div class="post-metadata">

**Author:** ![James\_Hall](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/james_hall/32/35329_2.png) [@James\_Hall](https://discourse.threejs.org/u/James_Hall)\
**Post date:** [May 14, 2023, 10:36am UTC](https://discourse.threejs.org/t/personal-portfolio-impossible-box/51511/14 "2023-05-14T10:36:01Z")

</div>

Ah, I see now. I’ve reinstated your solution. Could you please take a look at the site and let me know if it’s working properly now?

---

<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:** [May 14, 2023, 11:14am UTC](https://discourse.threejs.org/t/personal-portfolio-impossible-box/51511/15 "2023-05-14T11:14:02Z")

</div>

Now both mazes show up well. 👍

BTW, if you want to use `(a > b)` and safeguard against turbulence, you can use `(a > b-eps)`, where `eps` is something small, like 0.001 or even smaller.

---

<div class="post-metadata">

**Author:** ![James\_Hall](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/james_hall/32/35329_2.png) [@James\_Hall](https://discourse.threejs.org/u/James_Hall)\
**Post date:** [May 14, 2023, 11:23am UTC](https://discourse.threejs.org/t/personal-portfolio-impossible-box/51511/16 "2023-05-14T11:23:06Z")

</div>

Nice!  
I know I’ve said it a hundred times, but thank you again for your help  
Your assistance made all the difference! 😁

---

<div class="post-metadata">

**Author:** ![mxninja](https://avatars.discourse-cdn.com/v4/letter/m/d9b06d/32.png) [@mxninja](https://discourse.threejs.org/u/mxninja)\
**Post date:** [May 15, 2023, 8:58am UTC](https://discourse.threejs.org/t/personal-portfolio-impossible-box/51511/17 "2023-05-15T08:58:44Z")

</div>

Very very cool @James_Hall !! Well done 👍

---

<div class="post-metadata">

**Author:** ![Harold](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/harold/32/32136_2.png) [@Harold](https://discourse.threejs.org/u/Harold)\
**Post date:** [May 15, 2023, 11:18am UTC](https://discourse.threejs.org/t/personal-portfolio-impossible-box/51511/18 "2023-05-15T11:18:03Z")

</div>

This is seriously cool. Apart from cube itself with the “portals”, the I especially like the house layout generator. Did you use a wave-function collapse method for this?

---

<div class="post-metadata">

**Author:** ![James\_Hall](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/james_hall/32/35329_2.png) [@James\_Hall](https://discourse.threejs.org/u/James_Hall)\
**Post date:** [May 19, 2023, 8:28pm UTC](https://discourse.threejs.org/t/personal-portfolio-impossible-box/51511/19 "2023-05-19T20:28:44Z")

</div>

Thank you! No, I don’t even know what that is. I created a 3-dimensional js array where I fill in information like ‘wall’ or ‘staircase’ with algorithms, and then I use that array to generate the three.js geometries

---

<div class="post-metadata">

**Author:** ![DIODE](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/diode/32/36868_2.png) [@DIODE](https://discourse.threejs.org/u/DIODE)\
**Post date:** [June 5, 2023, 6:08am UTC](https://discourse.threejs.org/t/personal-portfolio-impossible-box/51511/20 "2023-06-05T06:08:42Z")

</div>

How long did it take you to complete this from scratch?

[Next page](https://discourse.threejs.org/t/personal-portfolio-impossible-box/51511.md?page=2)