Verge3D 4.7 pre2 available!

Modern Web Layouts: Flexbox and Grid

For this update we have implemented means to create modern web layouts that are efficient and work well across different types of devices and platforms.

To make it possible, we added CSS properties for Flexbox that allows you to “grow” elements horizontally or vertically. We also added CSS props for Grid so that you can now create 2D layouts with puzzles as well.

As a result, you can now do robust UI designs using a minimal number of puzzles. It’s worth investing your time in learning this tech as it will be beneficial in the long run!

Interactive Infoboxes: Dialog

You can now create custom-made styled popup windows (such as notifications, modal boxes with buttons, and even complete forms) thanks to the dialog HTML element newly available in Puzzles.

A dialog window should be created first. Then you can show and close it using show, showModal and close methods of the call method puzzle (this is how we renamed the trigger event puzzle first appeared in the first v. 4.7 preview). By the way, this puzzle obtained preventDefault and stopPropagation methods for advanced use of events.

By default, a new dialog is created as an empty window which you are free to add more HTML elements into. When using a modal window (that blocks the web page access until closed), you can additionally blur the page behind it using the CSS property backdrop-filter.

Web Forms and Server-Side

Forms are the primary way for the web application to collect data from the user and send to the server for processing. Use cases are numerous and diverse: create an inquiry for a configured product, order a product, send screenshots or custom images to the sales staff, leave contact information, ask for help, and more.

For this update, we implemented a full set of features which makes it possible to add forms of any complexity to your 3D interactives with just Puzzles. And what is even more important, you can now send the collected data to your own WordPress server equipped with Verge3D plugin. But even if you don’t have a WordPress website, you can deploy your app on any hosting (or upload to Verge3D Network) and send the user data to some third-party form processing service (such as getform.io, etc).

To begin with, it is now possible to add label elements and to set the name and htmlFor properties to form components thus completing Verge3D’s feature set for forms.

Next, the set property puzzle received new options–method (get, post, dialog), action, placeholder, and required.

On the other hand, the on event puzzle obtained options submit and close which allow the app to intercept form submission to submit it asynchronously without reloading the web page.

The features above allow for creating web forms–but what about sending the data from it to the server? For this, we extended the send data puzzle to process form data as well. Form data in turn can be retrieved from the form element using the JavaScript object puzzle.

Everything above is showcased in the new Inquiry Form library item. To quickly test it out, you can drag it from the library to a new Cube app.

This will give you a working example of form submission–just click on the cube!

Finally, we improved the responsiveness of the send data and load data puzzles. Those no longer freeze the page when decoding big files, and also now have on error and with headers slots for advanced use.

WordPress Plugin

The Verge3D WordPress plugin obtained a new target URL (aka REST API) for sending any forms to email. It is particularly used by the above-mentioned Inquiry Form library item. It also obtained a new REST API for sending order forms via form data. Previously it was only possible via json data.

The feature for uploading and retrieving files now correctly processes data types. Basically, you always get the same type as you originally uploaded.

We also improved server security with regard to uploaded files. The plugin will check MIME types which should be preset in the white list (in the admin settings). In addition, uploaded files are now stored encoded rather than in their original state as it was before.

Finally, the admin panel got better error reporting. For example, when sending invoice or quote to the user, there will be a message if PDF could not be generated for some reason, or email couldn’t be sent.

Puzzles

The puzzle in dict get obtained an optional if none slot. You can use it to set some default value if there is no such key in a dictionary.

Puzzles export to gltf and export to usdz now better handle transparent materials and texture mix factors.

The add HTML element puzzle no longer creates multiple duplicate elements when the scenario is repeatedly run in the Puzzles Editor.

The download file puzzle no longer spawns invisible HTML elements that clogged up the internal structure of the web page.

We continued improving the API for Puzzles plugin developers. The PzLib namespace got several new useful methods and constants.

Winter is Coming: Blender 4.2

Verge3D users will encounter significant changes once Blender 4.2 is out. First of all, addons have been deprecated in Blender–those are now called extensions. The installation procedure for Verge3D thus has become very different–the so called repositories should now be used to add an extension.

We managed to automate the installation for Windows, but on macOS and Linux you should perform it manually. On the bright side, on Windows, the Verge3D extension is now activated automatically and is ready for use right after installation.

Next, transparency Blend Modes were removed by Blender devs so we had to backport them to the Verge3D extension. Unfortunately, this means those won’t be visible in the viewport anymore. Still there is a good thing–we added a default Auto option to the list of Blend Modes which automatically assigns a proper transparency type by analyzing the shader.

Also, when switched to the Alpha Blend mode, there are now two new settings available which we called “transparency hacks”. Of those, Nearest Layer only renders the surface closest to the camera, while Two-Pass renders double-sided geometry without artifacts. Depending on your situation, some of these hacks might help to get even better quality than it was before Blender 4.2.

Then, Blender 4.2 removes some props from Light Probe objects (such as Intensity/Falloff and Visibility Collection) so we re-implemented those as well.

Finally, we ensured that polygons with 5 or more vertices are exported from Blender 4.2 without crash.

Other Blender-Specific Features

Please note that the Bake Modifiers checkbox is now enabled by default in Verge3D settings. This is because as of Blender 4.1, the Auto Smooth checkbox was replaced by a similarly named modifier. As a result, we need to bake modifiers more often than before.

We fixed the Texture node that corrupted transparent textures set to Non-Color.

More Improvements

USDZ-based AR mode (also known as AR Quick Look) now works not only in Safari browser but also in Chrome, Edge, Firefox, and DuckDuckGo browsers as well (on Apple devices of course).

We simplified the list of Shadow Filtering options to only leave a single PCF option–the one with best quality/performance tradeoff. This option was called PCF (Poisson Disk) before. This is legit for Blender, 3ds Max, and Maya.

We finally removed the Light Probe + Cubemap option from IBL Environment Mode settings which was deprecated long before (also Blender, 3ds Max, and Maya).

We worked around the reported AR freezing issue by turning off the disable rendering puzzle in AR mode.

We improved and extended the following sections of the User Manual: WordPress, HTML Puzzles, Blender Installation, Shadows, Lighting and Rendering, glTF PBR Materials, and more.