'Project Chair' in preview environment - A Designer's playground open to all

Good Day Dear BJS fellow Contributors,

Hope yours are all well. I have been long asking myself what I should be doing with my project initiated mid-february 2021, first called ’ Project Chair - Sketching a 3D commerce XP in 60h '.

The first thing I can say towards this exercise is that I’ve both failed and/or succeeded in this. It all depends on your definition of ‘sketching’ and ‘experience’, I believe :wink: In short: Yes, it’s possible to make good use of BJS to sketch both a visual and a process/system XP in short time and budget (in ~2-3 weeks / ~3-5k )

Second learning was (turned into a question): What have we learned from the previous decade? What did we learn from Unity, from Unreal or more generally, from creating all these experiences in 3D (and/or AR,VR, XR)? Well, I personally have only one thing in mind of major importance. One that keeps me wondering and worrying about the ‘sustainability’ in 2021-2025 of a 3D product catalogue. Very simply put, my question would be : Where is my digital product?…Where is my digital version of the product, provided by product design and under management of ‘#products’, that should be delivered in the so-called DAM (or previously media-center) the ‘faen’ sources/resources/data I need to feature this ‘digital product’ from your company in a digital product catalogue?

And then, apart from spending time thinking of product design and integration (in a workflow), I also did spend some time to nurture my designer’s need for a better understanding of how ‘basic’ materials work in BJS. How I could use them and then, eventually, tweak or twist them.

Since there are a number of topics in this forum (incl. lately) regarding things such as #glass, #reflection, #alpha, #metal, #pbr, #shadows, #post-process and since all these topics took an importance in my reflection and sketching of ‘Project Chair’, I thought why not give you access to the debug/inspector and try twist and tweak some of these materials yourself in my scene.

It should be easy for everyone to jump in and start compare and adjust the parameters (or upload your own textures) to try achieve the result you want. I used explicit (plain english) code and I believe explicit names pretty much everywhere. On the very top of the nodes hierarchy, you’ll find an _plane that you can make visible and use to try materials on. Later, if there’s an interest, I could add a cube and a sphere (i.e.).

Here is the link:
Project Chair Alpha

Things you may want to try and explore:

  1. PBR vs Standard Textures: In this scenario, I did pretty much everything the opposite way than considered as ‘normal’ or ‘recommended’. Cushions/textile and some rubber parts materials use PBR. Metallic and the table glass texture use standard textures. To view the difference, add or compare an object or change its material with a different type and next cycle through the environments using ‘Q’ or ‘E’.

  1. Reflections using either HDR, .dds or a simple Equirectangular (or cube) texture:
    I could have called this a ‘7 errors game’. Find the different scenarios/materials where the texture for reflection or refraction uses A) an inappropriate projection mode B) An inappropriate texture C) An inappropriate level C) An inappropriate UV D) An inappropriate bump or normal map.

  1. Glass material: If there is an interest (please ask) I will certainly add at least 2 more types of base glass material for yours to play with. A pbr and a mirror mat. For now, the featured glass uses a standard material. It might be interesting to notice how on my glass table, I made use of my setup of a 3 points lights (all coming from above) to use my glass refraction texture as a way to give it more ‘density’ (or realism). The refraction texture is a noise/smoke type texture (actually, the same as my rubbers, lazy me;) that simulates the traces left when you clean a glass surface (I mean when I clean it, else it would be clean;). This effect can best seen from below, because where the light hits (from above) the reflection texture absorbes most (but not all) of the effect.

  1. Post-processing: The entire scene (including the GUI, currently) takes on post-processing with a high default level of exposure (1.6) and contrast (1.4). You can adjust these also from the GUI in the lower right corner. Twist and tune post-processing to see how this impacts differently your materials (PBR vs STANDARD) and textures (HDR vs STD). Also notice how the GUI is affected by these changes.

Well, I guess no need to say more at this point. I will gladly receive your comments, questions or requests. Else, have fun exploring and tweaking the scene:)

Edit: Forgot to mention that at this moment only 2 table models are available. To import a table, switch to the category ‘tables’ and select the second or third in category. The first one is not done yet and will in fine likely be a round table. Note that this is all WIP and straight from the oven;)

9 Likes

I have updated the preview environment to version 0.6.0.1 with the following:

First and most importantly for this preview/pg environment, I have added to the nodes <_plane> object, a new <_sphere> and a new <_cube> object. All objects you can make visible and use to browse and preview/compare &tweak materials. Feel free to play with this and ask for more (like a vertical plane, a source plane…)

Other small changes I did towards the official release is that I slightly modified the glass table model, adding a small profile to the glass to make it more realistic (before it was just a cube). Also changed the thickness of the glass object to something more likely for a table {~6mm, before 12+ lol).

Imported objects (currently only tables) now wait on full promise with accurate positioning depending on layout before appearing (small fix).

There are still only 2 tables available to import at this time. A 3rd and last one for this demo is underway.

As a side note, I’m still evaluating the final design and materials used for this demo. Though at this point, one (me;) would need to make a choice. PBR vs STD, HDR/.dds vs STD (reworked)?¿


Well, have fun playing and twisting it and stay tuned. :slightly_smiling_face:

Dear fellow BJS contributors,
I’m happy to announce the latest update of ‘Project Chair’ version 0.6.3.1 in preview, which introduces a wide number of changes that will all be decisive in the final version demo of Project Chair.

Project Chair Alpha

I made a number of decisions towards finding the best compromise, in this case study, between design & tech, between innovation/personality towards sustainability/management, for such a project (3d product catalogue, product tour, spec/product sheet, hero product, light product configurator…).
In fact, there are so many different types of changes, that I will split them in smaller parts.

As an introduction, here is a short list of major changes:

  • New isolated from the scene post-processing GUI and new GUI color theme.
  • New ‘added product’ table (a round metallic table also featuring parallax occlusion for the ‘grid-like’ plateau design)
  • Re-instated 4K textures for domes (having now evaluated the mobile version (to come) requirements)
  • New second shadow generator and reworked lights (wip)
  • Re-worked env/reflect/refract materials/textures (wip)

Decision and topic nr.1: #gui
The GUI/UI shall be isolated from the scene post-processing. Although it may feel appealing at first to have a ‘fully integrated in the scene’ UI (in terms of design), the list of cons was just too long for me to recommend this approach. So, the new GUI theme/display is now to be seen in preview 6.3x and can also be compared with the old/study version one:

Former GUI with scene post-processing:
Project Chair Alpha

New GUI without post-processing (in preview):
Project Chair Alpha

As you can see in these screenshots above, the ‘integration/immersion’ of the GUI in the scene is essentially about working the alpha and the color theme. In fact, little is lost compared to the original sketching on the side of ‘immersion’ but then, a lot is gained in terms of controls and portability (i.e for mobile). If I next wanted to apply post-process on the GUI, I would do so as a scene. Since, in fine, I don’t want to apply PP on it for this demo, it will likely remain with its current basic two cams set-up.

Next to come, I will post some examples and preview screenshots of the new table object. I made the choice to ‘sketch’ the object/mesh myself and this table is actually a repro of a table I have on my terrasse;) I will try to post a pict. With this project, I didn’t really want to do ‘product design’ (in fact, I hate this task) but then I felt like I cannot just simply post shit comments in this forum and request for ‘better digital product assets’ without at least showcasing (if only just a little, a very little) myself;)

Here are some screenshots of what can be seen in project chair preview v. 0.6.3.x:







Have fun playing with the preview environment, stay safe and happy BJS :smiley:,

5 Likes

This is amazing. I’m looking to create a GUI for my model and I love what you have done here. Responsive too! Do you have this in a playground so that I can see how it was put together? I’m not sure how I would get to the babylonjs code through your site.

This is my current playground with the basic GUI.

This is also the HTML but I’m having some difficulties getting this working with the code from the playground.

https://dl.dropbox.com/s/s8ii7h29xfe8f2f/popup%20html16.html

Thank you for your encouraging comment.
I would need to apologize for this demo has never been finalized and I somewhat left it behind. It was essentially made for my own understanding of how to approach this aspect of 3D commerce.
I don’t have it in a PG but in this preview, you have access to the inspector and in fact, through the console you also have access to the entire script.
Now if you tell me which part you are interested to know more about, I can put something up in the PG or share that part of code with you.
It’s a personal project and it’s also sure all free for others to use or inspire.

@mawa, this looks incredible, looks like we both started something very similar around the same time, I wasn’t aware of this thread until now.

If you still have the burning passion to continue with this, I might propose some collaboration joint forces (similar to how Paypal was created - through a joint force effort).

I got stuck with a similar idea (though I have worked out a very clear direction and vision) for the 3designer.app because there is just too much work for one person. If I’m coding, I cannot do marketing, and vice versa. (I used to make a living as a digital marketer back in the days).

Please DM if you’re interested to know more.

1 Like

Thanks for your comment. Yes, I still have the passion. I also still believe in BJS capabilities of creating a true 3D commerce experience. It’s only that you know how it is with personal projects, I left it behind because it’s mostly what I do for business and I wanted to try other things like my motorcycle project, creating a vehicle 200% made from instances and just now, since just 2 weeks, started with project space museum for the official launch of v5 (I’m on it right now; can’t resist making a quick SS of the actual state


).

But, yes, I mean why not. It’s not easy to work things alone or with just a small team. Especially when you want to push for something new. So, in short, I’m open to proposal and a collab.

As for my background (since you kindly shared yours with me :slightly_smiling_face:, I’m also essentially an Art & Creative Director, Digital project manager and owner of a communication agency and, over the past 2 decades, mostly worked in the marketing area as a provider and consultant for a number of premium intl brands.

1 Like

You wouldn’t know how right you are when saying this. ‘Excellence starts with the understanding that you cannot be the best at everything.’

You’re right I realised after that I could inspect the source code. It functions great though. Would love to be able to have the knowledge you do but I’m learning.

Well it’s actually the html code that I need rather than babylonjs playground. I have the playground with the basic buttons but what you’ve done with the drop-down box is exactly what I wanted to achieve for my camera’s. I’ll be placing my full model on my website soon hopefully. I just have a few things to tie over like the buttons that at the moment aren’t great in web view especially responsive ones. I’ve shared my playground and html above, you’ll see what I mean :sweat_smile:

My knowledge is still poor compared to some of the big brains here in the forum. I started just two years ago and on the side. So it’s not that hard to get there. All you have to do is just continue experiencing on a regular time, visit the forum and soak-up the knowledge of others. Just what I did :wink:

I can set-up a quick PG for you. But, know that there is no html in my GUI for this project. The GUI is solely made from the BJS (2D) GUI. Also, I haven’t tried it yet but there’s a new editor to create the BJS 2D GUI, released just a couple of weeks ago. You might want to give it a try.

2 Likes

I see, I didn’t realise it was just all GUi, I have no preference for html if the GUI works just like yours :slight_smile: I’ll take a look at that new feature when I get back to my desktop (as it’s not allowed on the mobile). That would be great if you wouldn’t mind but no worries if you are busy too

1 Like

I had a good look at the GUI editor today and it’s very difficult to grasp as you download the json for the GUI but then you have no reference to link it back to the buttons / actions. I have tried to copy your gui into a playground but the buttons don’t work (menu doesn’t click open) via the download route in the editor. I assume you add code to make them functions work but I just don’t have the knowledge to do that :sweat_smile: I also had a look at the source code and there is so much! I struggle to work out what is related to the GUI and what isn’t (that’s because I’m a noob by the way, I’m sure).

May be not. Told’ya this project was just a rush. I believe I mostly have been piling up instructions, thinking I would return to it later :wink: I will try quickly set-up a PG for you with the main aspects of my GUI tomorrow morning and will let you know…

Thank you that would be awesome. The code is fine, I really am a novice with Babylon and if you did this before the GUI editor was created that’s amazing!

I would recommend giving your controls relevant names and then using advancedTexture.getControlByName() to find them in your code. You can also use getDescendants() on a particular control to find all of its descendants. Here is an example of how you can hook up controls exported from the GUI editor to logic: Babylon.js Playground (babylonjs.com)

1 Like

Thanks, I see the logic there. It still confuses the heck out of me with no javascript background. I’m learning from other playground examples so thanks for sharing.

I have prepared some learning content for you as promessed and will create a separate post for this.
You shall get the link shortly.

Edit:
I thought I would split this post in some ‘lessons’ because the subject is quite broad both for you to learn and for me to share. I hope you are ok with this.
I mean you already have the script and what you are likely missing is some explanations to it. So let’s start:

  1. You mentioned that when copying the script in the PG, it breaks. First reason for this is the way to import assets in the PG. Obviously, my GUI uses some icons stored on my server. The PG only accepts a few ‘trusted sources’. You can find this here. So, for the sake of keeping things simple, I will be using only assets from the bjs assets library that can be found here.

With that said, let’s first have an overall look at how the bjs (2D) gui works. This is the link to this new tutorial in 3 lessons.

Hope this will help,

3 Likes