My Online Product Renderer (W.I.P.) ...

[webtrekker]

Another little update ...

It's possible to use any 3D model available, either modelled yourself, or downloaded from one of the many sites available on the net.

Here's a 12oz two-tone spoon mug that I modelled myself using Rhino 3D. It was saved in .obj form. I've also added a spotlight and Phong material to give some nice glossy highlights ...

[User Deleted]

[GoonerGary]

Another little update ...

It's possible to use any 3D model available, either modelled yourself, or downloaded from one of the many sites available on the net.

Here's a 12oz two-tone spoon mug that I modelled myself using Rhino 3D. It was saved in .obj form. I've also added a spotlight and Phong material to give some nice glossy highlights ...

https://northstarbazaar.co.uk/three.js- ... obj_2.html

Looks good. Speaking as a photographer; what makes a good render and bad one, is how realistic it looks. And that's down to the shadow details. Many can look too digital. Perhaps toning down the highlights, making things less smooth and have very subtle multiple light sources?

The white mockups below the main image on this one are top drawer.

https://graphicriver.net/item/mug-mockup-vol2/13985191

[webtrekker]

Hi Gary. Yes, I totally agree with you regarding the level of detail between some renderings and reality.

Using a good raytracer, I can render objects that are so realistic most folk would be hard pushed to tell the difference. However, in an online real-time renderer, such as webGL (the one I'm using to render these mugs) you sometimes have to make allowances, either for the capabilities of the renderer, or the overall performance from the device's cpu and gpu. Don't forget, these animations are rendered many times a second and the renderer has to perform millions of camera, material, lighting and shadow calculations, as well as display the results.

While it's possible to freeze the view and use offsite rendering software to produce a polished end result that could be downloaded as a mockup, I was hoping to avoid that complication if the current results are good enough for most people to use as mockups. Mind you, I can add surface imperfections using bump maps etc. to increase the realism a bit, and also add multiple lights with different specifications.

To be honest, I wasn't really after producing a mockup generator as such, it was more a quick and painless way for designers to upload their designs and see them on an actual product before tweaking the design and going into production. A link to the animated result could be provided for any potential customers to see the end result for themselves before placing an order. For photorealistic mockups, I still prefer rendering them myself in Keyshot and using Photoshop for post-processing.

[webtrekker]

Looks good. Speaking as a photographer; what makes a good render and bad one, is how realistic it looks. And that's down to the shadow details. Many can look too digital. Perhaps toning down the highlights, making things less smooth and have very subtle multiple light sources?

The white mockups below the main image on this one is top drawer.

[User Deleted]

Hi Gary. Yes, I totally agree with you regarding the level of detail between some renderings and reality.

Using a good raytracer, I can render objects that are so realistic most folk would be hard pushed to tell the difference. However, in an online real-time renderer, such as webGL (the one I'm using to render these mugs) you sometimes have to make allowances, either for the capabilities of the renderer, or the overall performance from the device's cpu and gpu. Don't forget, these animations are rendered many times a second and the renderer has to perform millions of camera, material, lighting and shadow calculations, as well as display the results.

While it's possible to freeze the view and use offsite rendering software to produce a polished end result that could be downloaded as a mockup, I was hoping to avoid that complication if the current results are good enough for most people to use as mockups. Mind you, I can add surface imperfections using bump maps etc. to increase the realism a bit, and also add multiple lights with different specifications.

To be honest, I wasn't really after producing a mockup generator as such, it was more a quick and painless way for designers to upload their designs and see them on an actual product before tweaking the design and going into production. A link to the animated result could be provided for any potential customers to see the end result for themselves before placing an order. For photorealistic mockups, I still prefer rendering them myself in Keyshot and using Photoshop for post-processing.

No doubt some of you may remember this rendering I did in Keyshot a while back ...






I'm not sure whether these sort of results could be obtained using webGL.

[Baldy]

Looking great in Brave too:biggrin:

[webtrekker]

For anyone still following this thread, I have made a few more adjustments -

• You can now control the view with your mouse
• The view can be saved as a transparent PNG of approx 4Mp resolution
• I have added an experimental t-shirt model which can be textured with a full cut & sew pattern if desired

I've only tried it so far in the latest versions of Firefox, so feel free to try it in any browser and I'd be interested in knowing of any problems you experience.

As I said in an earlier post, this viewer was never intended as a mockup generator, but the PNG images it produces may be helpful to people using it as such. Future modifications may include an upload section for visitors to upload their own designs for rendering, and also a a few view presets which will enable preset views to be saved, with soft shadows or backgrounds, as in the likes of the Printful Mockup Generator.

Obviously, a 3D rendering app is only as good as its models, so I need to design or download more models to increase its usefulness. This is another reason why its use as a mockup generator is limited - 3D models don't exist for all products or specific brands. The viewer will mainly have generic models to assist designers in envisioning their designs on various items.

Texturing is done using UV maps (Google for more info, as I don't want to give a long-winded explanation!).

Here is the UV map I designed for the Harry Potter t-shirt in the viewer -

The actual texture >>


[User Deleted]


The texture with the UV grid overlaid to show how it all fits together >>

[User Deleted]



A rendered view, saved, and loaded into Photoshop to add a background >>

[User Deleted]


Finally, this is the link to the viewer. Please try it out and let me know your thoughts ...


[User Deleted]


Performance may vary ondifferent systems due to the hardware used, operating system, and browser capabilities, but I'm hoping it will be suited to most users.


Thanks folks.

[matzy]

Looks fantastic, watching this thread with interest

[JAS0N]

Looks really good.��

[GermanDyeSub]

I appreciate all your efforts. You are doing a great job and I'm, and many more, are following the thread with great interest. Just one thing. The recent link doesn't work properly for me. I can't see any product. I'm using the latest Firefox version.

[webtrekker]

No worries. I'll do some experimenting later on. Although the webGL renderer prefers a decent hardware configuration it should still work fine on most machines. My older pc just has Win7, a core2 Duo processor and 8 Gb of ram yet it runs fine on there, as well as on my higher spec, newer pc.

I suspect it may be down to the shadows and the size of the UV texture maps. I'll fiddle around with these to get the best all-round values as I'd like the app to be available to as many users as possible.

Thank you for the head's-up.