Long post: Info/Notes and questions – PBR, scene/camera, etc.

Hello,
Well here’s a long post. I hope that verge3D users and developers find this useful. A Link to the blend file and PBR is at the end. There’s probably a lot of novice issues/errors here on my part just FYI. Any critique or clarification (or solutions/answers!) is very welcome. I want to mention that I think that Verge3D is super-great and really revolutionary product.
I think we (at abemis) will now be able to make a ‘webpage’ like nobody has ever seen before. My idea now is that our current flat webpage will be transformed into a ‘lens‘ into our virtual world — with (ultimately) live animations and real running-online simulations of our unique hyper-meta-structures. It’s going to be awesome IMHO and thanks again to Verge3D for IMHO amazing work. I’m pretty good with modeling and physical simulation in Blender (and other stuff like FEA, non-linear analysis, etc.), but just getting started with understanding materials and whatnot.

I’ve been working on this scene now for quite a number of days/weeks, and have finally come up with a beginning ‘main’ web-page scene. I’m providing a link to the .blend file with files packed (link at end), so it should work. Following here are my notes and some further questions (which will hopefully be helpful to other novices). Note that this is going to be the main portal/web page for our company, so please for readers keep that in mind. I have no problem with others using the scene-framework for their own projects but please not our ‘logo’ which is the yellow/blue 3D meshagon ‘A-letter’ and the ABEMIS blue. Also if you use this framework/scene it would be great if you gave us some credit.

What I’m trying to do here is make the entire main portal web-page as a 3D scene (and hopefully most all other pages for our website). I know it’s likely that I’ll have to do something with embedded scene(s) in ‘flat’ webpages for this or subsequent pages as other needs arise or for efficiency. I’m kind of a beginner at webpage/html so I’m learning as I go. There are a bunch of puzzles and animations, etc. for the blend/verge page (e.g. external links, click on objects, etc.) which of course won’t work with just the .blend file provided here, but that’s not needed for this discussion.

I’ve made my first PBR material using the verge3D PBR template material (I mad here a dark-ish rough metal surface). It’s packed into the .blend scene and the textures are in the zip file. At first, I tried using other material types, but it became obvious that PBR-cycles was the way to go, and not the older internal-node material types. A caveat is that simple materials work fine for things like the letters and simple solids. Also I’m still using the older ‘matte-plastic’ internal-node material for the top margin because that is the only way (right now) that I can make a transparent material. I’m sure there’s ways to do that with PBR but I don’t know how (yet). Any help there is great; I tried some but couldn’t get verge-PBR alpha to work.

The scene contains what I call a HUD with the title logo and other objects that are parented to the camera. There is a Verge3D ‘standard ball’ on the left, and one of our complex Hyper-meshagon structures (a force optimized ultra-light bracket support for a space structure) on the right. Following are some notes about the scene and issues I’ve ‘discovered’, not in any particular order. There are also remaining issues/questions that I’ll list later in this post. Summarizing: Two main issues are (1) Trying to get the 3D render preview to look as close as possible (WYSIWYG) to the sneak-peek is really tough and I’m still not there. This is really important because sneak-peeking all the time is a too-slow process. (2) The camera view in blender cycles render preview is still not aligned with the sneak-peek. This is a big problem that needs work (you’ll see it.) either there is a ‘bug’ or I’m missing something obvious (or non-obvious).

Notes — things I’ve ‘found’ after much trials-and errors:
1. In world: ray visibility – turning off glossy makes the render preview look a lot more like the sneak-peek. I have no idea why.
2. Scene main: I set Exposure = 1.3 to 1.4, Gamma = 1 (? seems ok). The render preview is not the same ‘lightness’ as the sneak-peek, at least for me. Thus the exposure change.
3. !! scene: render: Sampling: Clamp Direct has a huge effect on the preview render 3D viewport. Tiny changes and everything gets darker, etc. MY current settings; Clamp direct = 0.70 , Clamp Indirect = 0.01, Light Sampling.. = 0.02
4. The blender render preview background seems always to be much lighter than the sneak-peek. Something still wrong there.
5. After saving and reloading blender file, I have to do some wacky converting the standard ball (from the essential materials pack) to mesh, then delete extra mesh that magically (to me) appears, then re-view mesh. It’s very strange to me, there’s something here I don’t understand.
6. I wanted a ‘compass-like’ effect for the A-letter and other objects. I wanted it to rotate with the camera view, but NOT move/translate. After all kinds of trial-error (sheesh!), I figured out that to achieve this, what you do is FIRST set a ‘Copy Rotation’ constraint to an Empty axis, and then parent the object (in this case the A-letter mesh) to the Camera. Seems to work.

Remaining issues/questions:
1. The camera render preview in blender-cycles (or verge3D or blender render) doesn’t match/align with the sneak-peek in my scene. Any help with that is greatly appreciated. In particular, if you look at the blender render camera preview, the ABEMIS title looks aligned (which is close to the camera anchor, but the other objects like the ‘MICRO-SYSTEMS’ text and other objects further away appear in the render preview to be right behind it, even though in the sneak-peek they look positioned… I’ve had to move everything manually to get a good sneak-peek. This is extremely tedious. Please take a look at my camera settings and let me know if I’ve done something simple wrong. I can’t figure it out and have tried a bunch of changes. WYSIWYG (or at least close) is very important.

2. I can’t get a decent UV for my meshagon hyper bracket. Note that this isn’t necessarily a verge3D problem I don’t think. It’s probably a general problem for my complex object — I’m new to UV unwrapping. What you see here is the unwrapping using the blender ‘Smart UV unwrapping’. I’ve tried all the others (square, cylinder, etc.) but it all looks pretty bad. Note that the verge3d standard ball looks great. It already has a nice UV map. ANY help with this is greatly appreciated. Note that I don’t have Substance Painter (wish I did) so I hope there is some blender-based solution for our complex hyper-meshagon structures. Probably there is and i’m just inexperienced (I hope). Also, I’m not seeing any effect of the Occlusion from the packed image… maybe I just haven’t set it right.

3. For the HUD, I’m not sure where (how far) to put it in front of the camera, or what focal length setting is best. I’ve put the HUD components very close to the camera, because when, in the sneak-peek (or published) if I don’t, then further back objects will come forward (during zoom, etc.) and overlap/clutter the HUD. I’d rather not put too many constraints on the camera, and I’d like to have a wider field of view for the camera, but I’ve chosen 70 mm to leave space and keep things from looking fish-eye. I know that there might be other/better ways to make the HUD in flat HTML and embed the verge3D/blender scene…, but the goal here is to do as much as possible in the blender scene WYSIWYG.

4. I can’t get shadows to work at all or they just look hard, etc. I’ve turned them off in verge3d settings. I think that issue — and probably also a bunch of others can/will wait for EEVEE. That’s another whole giant can of monkeys that I’ll have to manage and learn… sheesh, I don’t even know where to start with that. Every time I try 2.8 it crashes too much (not complaining).

Thanks for reading, and any suggestions/critique/etc.
Here is the link to a ~10Mb zip file containing the .blend scene, and a folder with the PBR textures. I packed the Occlusion-Roughness-Metal as three grayscale images into one RGB using an image editor. Gimp works for this. The PBR textures are scaled down and modified somewhat from the great textures at https://cc0textures.com.

Best to all,
Todd Doehring PhD
CEO ABEMIS llc.
“Where the science, isn’t fiction.”
http://abemis.com
tcd@abemis.com
Feel free to contact me.

Blend file short link: https://tinyurl.com/ybj7czw8
pword: verge_abemis

full link:
https://drive.google.com/file/d/1-MiHA3alepg04zu5jNsVv7DFwExsCTMv/view?usp=sharing