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

[webtrekker]

Ok, here's another update ...

[User Deleted]

Basically, I've reduced texture map sizes and reduced the quality of the shadow map to try to resolve some performance issues. Hopefully this works for users experincing difficulties viewing the textured object.

Also, I've added a couple of new buttons, besides the 'Save Image' button ...

• A 'Switch Designs' button will cycle through the designs when clicked (there are now 3 different designs in the viewer).
• A 'Reset View' button will reset the camera to the position it's in when the page was first loaded.

Please let me know of any more issues. I've still got a lot of work to do on this and it would be handy to nail down bugs and performance issues as the development progresses. Thank you all.

PS. I know you can see the outside textures when looking inside the shirt. This happens because the model itself is single-skinned. I will fix this soon.

[webtrekker]

Well, I'm now torn between continuing with this project or starting work on something similar, but probably of more use in the long run.

The 3D Product Visualiser looks great, but won't run on all browsers or lower spec systems.

Also, I'm beginning to think that a Product Designer might be the best way to go, as blank mockup images are readily available (or take your own photos), and can possibly be found for the specific brands people are selling. Also, making 2D mockups is far less demanding on the computer and can run well on mobiles too.

So, with all of this in mind, I've been doing more experiments.. I know Photoshop can be used to add displacement maps to add images to wrinkled garments etc, and the end results look good, but ...

• Not everyone uses Photoshop.
• Not everyone can use Photoshop, particularly for this type of work.
• Photoshop is no good when you want an online designer that people can upload designs to and see them on the product.

I realise there are other Product designer tools out there, such as Fancy Product designer, but they usually have hefty subscriptions and some of them even just overlay the design on the product without any image manipulation, which looks shabby.

Anyway, after many hours spent learning new techniques, I can now overlay images onto products (t-shirts so far) that look reasonably realistic and, being web-based and fully automated, doesn't require the user to have any knowledge of Photoshop or any other software. The image manipulation is done on a cloud server so won't put any demands on the computer, unlike the 3D renderer used in my other effort.

Here's a first attempt at overlaying 2 images onto a wrinkled t-shirt. The t-shirt image and the MAD image are PNG's, and the bottom image is a JPG ...


[Click to enlarge]
MAD_OuttaEU_mockup.jpg


Yes, I know, I could have picked nicer images and maybe a t-shirt on a better background, but I was eager to see if it worked, so just grabbed some quick images from the internet! I definitely think this will be the best way to go and could be put to good use, either as an uploader/designer for customers, or as a means of producing product mockups for your online shop or ebay.

[knightweb]

Hi webtrekker, looks like this would have many uses
I like the grey background, (use grey myself)
For my garment mockups, I currently just overlay my images on top of a photographed garment, so they don't have a full realic look
If I was using your mockup as it is at the moment, although realistic, I would remove the shadow behind the T Shirt
Anyway....Looks great
Kevin

[GermanDyeSub]

@webtrekker

It's nice to see that your efforts are bringing such superb results.

I would go for a product designer if I was in your situation. And yes, your product designer would be 100x times better than fancy product designer which just overlays images (without any realistic manipulation). Looks shabby as you mentioned.

[webtrekker]

@GermanDyeSub

Thanks for that. That's helped make up my mind on which direction to take. This is just another hobby of mine and I have limited time to spend coding so wouldn't want to waste it on the wrong project, no matter how flashy it might look on the screen.

While I'm on I should just mention that the overlaid images can be manipulated in many ways: displacement, opacity, scale, rotation, position, etc and can also be distorted to fit products in perspective, along with many other 'eye-candy' effects.

I'm really starting to get into this now, but as I'm looking after my daughter's ebay shop while she's on holiday, as well as my own, I'm restricted mostly to the evenings (until 2am in the morning! ). I'm getting there though!

[webtrekker]

Another very quick update (it's 2am and bedtime!) ...


[Click to enlarge]
full_displacement_OuttaEU_mockup.jpg



Much better displacement this time, on a par with Photoshop, but incredibly easier for anyone to use. Just a case of choosing the design, uploading your graphic and BINGO!

Nite all!

[webtrekker]

A different effect.

This time, I've taken an image I had downloaded from Google of a dyesub keyring and added a red silk background. It's an 800px x 800px image, not high quality but more than suitable for a mockup with a low file size.


[Click to enlarge]
small_keyring.jpg


I then used a 'Distort' effect to add whatever logos I wanted to the keyring image. Again, Photoshop was not involved in the distortion, it's all done automatically after uploading a logo (or any image of the required dimensions).


[Click to enlarge]
DSF_keyring.jpg



[Click to enlarge]
RR_keyring.jpg


It would be a simple matter to upload and overlay a watermark too, to protect your mockups from straightforward copying.

My next task is to code an uploader and build an example webpage with this stuff working so you can try it out.

[webtrekker]

Here's an example of a product image displayed in an HTML web page.

[User Deleted]

Just basic, no page formatting added, but what you see is not just an image loaded into the page, the image is actually constructed on-the-fly from 3 image layers (background, logo, displacement map) and rendered in the web page.

Every time the page is loaded the image is reconstructed (unless there's been no change, in which case a cached image is used), this means that if, say, a new logo is added, or a watermark, or the shirt colour changed, then the displayed image shows the changes.

Just what's needed in a Product Designer!

[webtrekker]

For anyone not bored by this (yet!) here's another small, but quite important update.

I've added an Uplader to allow users to choose images from their computer or to enter the url of an online image. This is what it looks like ...


pd1.jpg



This is the tab for entering a url ...


pd2.jpg



And this is the result. The image was downladed from the url, sent for transformation onto a t-shirt, then displayed in a popup window.


pd3.jpg


Still a lot more work to do on this project, but the guts of it seem to be working fine. I'm going to add a Cropping feature so that he input image can be cropped from a larger image, and I'm also going to be adding a Resizing feature. I also need to add a Gallery of blank mockups for users to select the ones they need.

[BTW, I realise the design isn't quite centred horizontally on the t-shirt at the moment but I can easily alter that.]

[Baldy]

Looking good