Rich.gg, my new 3D website

Gallery
1

Hi there :slight_smile:

I made a web site using only p5.js and you can find it here: rich.gg

richdotggFWA
richdotggFWA1076Ă—672 103 KB

Aim

The purpose of the site is to promote my designer capabilities and initiate contact by:

1 displaying a portfolio of some selected works

2 carrying my UX/UI skills, creative thinking and focus on quality

Solution

As an architect and a designer dedicated to real time 3D for almost 20 years, I took the opportunity offered by p5.js and WebGL to developed a fully 3D web site, finally breaking free of plugins and being able to run on all platforms. Coming from the Processing community, the choice of P5.js made complete sense, the API offering all the tools and conveying the functions and logics of Processing.

Execution

First and foremost, following my idea that 3D interfaces and 3D internet can only exist as long as it performs 2D tasks at least as good as classical 2D, the navigation, readability, graphical quality and overall usability had to be checked against 2D all along the development process. The use of HTML text being kept a priority.

Second, the general composition of the site was dictated by “the responsive constraint”. Not only did the responsive part of the coding amounted for about 40% of the work, but the constraint became the architectural driver of the project.

Then the “Multiplatform challenge” carried over to the “mouse / touch / pad” constraint. Considering the target audience of tech oriented decision-makers and designers pairs, priority order was set as : High end Smartphones, tablets, Desktop PCs and lastly trackpad only Laptops.

The trick in the making of this site was to manage the connection between the 2D html and the 3D WebGL space, both for interaction (buttons) and for the dynamic nature of the site(responsive + motions)

Another “feature” was to be able to get some feedback without using third partie stats so I developped a very minimal php/mysql system to track visites.(Really getting annoyed by all those companies going after your datas like craving piranhas after your bones)

Finally, a “trap” was set in the about “cell” of the site to encourage contact. It is a false trap that can be overcome by using the contour of the cell to swipe over

So

So I wish you like it, I’d be glad to hear your comments and suggestions and I would be happy to exchange with other people looking at building their own 3D web site :slight_smile:

cheers

update: I have had some feedback that the images doesn’t show on some iPhones
If you see this problem and you are willing to upload a screenshot that would help ^^
This Behaviour happens on both Safari and Chrome
I think I would go for a Texture() failure of p5.js, some WebGL problem with some iPhones

Feedback tells me the site is ok on :

  • iPhone 6S 12.1.4
  • iPhone SE 12.1.4

Textures not showing on :

  • iPhone 8+ 12.1.4 (you)
  • iPhone X 12.1.4
  • iPhone XS 12.1.4

update II:
I changed some code to try and fix the iPhone bug using this technique

If someone who owns an iPhone 8, 9 or X could give it a go and tell me it the site show up good that would really help

the site should look like this
https://youtu.be/SpxVxyRAgcg

6 Likes
2

Really cool. I can see a couple of you projects you posted here in the forum. Glad to see it all together.

I like your rotating dial and the flocking animation. The shadows were done by setting the light source in the scene?

One suggestion is to include mouse wheel to go up and down in your titles. This would make it easy to vertically slide through your slides. In general, I have a feeling this is meant to be used for touchscreen devices. For me, I find it a bit odd to use mouse sliding actions to simulate sliding between titles. I am not an UX design so I am not sure what would be the right terms to describe this experience. what about desktop applications, if the person hover on the edge of the screen, it will slide on that edge?

Finally, I saw a glitch in your site where images where overlapped by text. I was not able to reproduce it but it was present for about three slides (sometimes it was images over images). This was tested on a desktop version, Windows 10 on FireFox. I couldn’t get the screenshot for this one. It is also possible my browser was acting up.

Thanks for sharing!

Kf

1 Like
3

Thank you for the feedback @kfrajer, I really think it helps improving

If you happen to catch a screenshot of the gfx bug I’ll take it, and if you don’t, good for me :wink:

Your mouse wheel suggestion seems quite right and I think I might work on it, specially since the kind of mini framework I developed to make the site can be considered something of a work in progress.

Now to answer your shadows questions, I learn very recently that you can have shadows in processing, I don’t know about p5. So, no, no light source and actually no light management in that project. Just like the “good old” vrml times, shadows are objects I’m drawing.
The good thing about having started 20 years ago, you are used to work with little ressources :wink:

Thanks again