Visualizer Dilemma

@podperson about wordpress: One reason against it I can confirm, it's really a big target. A few days at the latest after a new website is online, not to find yet in any search engine, the bots are trying to find the login page for wordpress (or some other wordpress related files). Very seldom I encounter requests targeted at other cmses.

But as long as it's updated, this is no reason, not to use it, especially for private use. There are few cmses around that are easier to handle for someone who doesn't want to learn all that technical stuff (or hasn't the time), and there is a ton of quiet good, professional designs free for use, only a little bit of work, to fit to someones purposes. And it should already be setup for installation from any hoster, one click away.

That said, for really important stuff I prefer not to use a cms if not necessary and don't recommend it. I have some websites built that are more than a decade old and are still generating business for their owners. They do like it and think they are still modern looking (I wouldn't totally agree myself but I am quiet happy as long as those people are). There are only some content related changes from time to time, no fuss with updates or stuff. I have seen projects tanked because of cmses (never one I produced). And I do use as less js and php as possible, so usually there is no security risk involved that has to be addressed (well, other than plain simple hacking or a customer getting his passwords stolen). Whatever I do, be it cooking or code or whatever: I try to keep it simple (only with texts and 3d I get into rennaissancal abundance).
 
In essence you're dealing with materials, geometry, and lighting. three.js would let you handle this fairly straightforwardly using PBR materials, geometry, and image-based lighting. You'd essentially wire some controls to your three.js scene and you're done.

You could prototype it in the three.js editor. Some things aren't going to work out of the box (e.g. refraction) but you can get remarkably close to photorealistic rendering in real time with PBR shaders, HDRI image-based-lighting, and so on.

Thanks for the input pod. I'm only using Cheetah to make images. All the materials I use on the guitars will be photographic, from their wood collection. All I need is rock solid alignment of one base image and multiple transparent layers all in a builder on a website with a shopping cart.
 
I just talked to Kiesel guitar today. They did a Facebook live stream last night and had a master grade quilted maple top up for sale, reduced by 4 bills, and no one took it. So I called them and snagged it for a build. It will take @16 weeks for what I just ordered. o_O
But I'll be talking to them again in a few days so, we will see what happens.
 
I just talked to Kiesel guitar today. They did a Facebook live stream last night and had a master grade quilted maple top up for sale, reduced by 4 bills, and no one took it. So I called them and snagged it for a build. It will take @16 weeks for what I just ordered. o_O
But I'll be talking to them again in a few days so, we will see what happens.

Nice! Let us see it when you get it, if you don't mind.
 
@podperson

That said, for really important stuff I prefer not to use a cms if not necessary and don't recommend it. I have some websites built that are more than a decade old and are still generating business for their owners. They do like it and think they are still modern looking (I wouldn't totally agree myself but I am quiet happy as long as those people are). There are only some content related changes from time to time, no fuss with updates or stuff. I have seen projects tanked because of cmses (never one I produced). And I do use as less js and php as possible, so usually there is no security risk involved that has to be addressed (well, other than plain simple hacking or a customer getting his passwords stolen). Whatever I do, be it cooking or code or whatever: I try to keep it simple (only with texts and 3d I get into rennaissancal abundance).

I’ve written my own simple CMS and even that was too much trouble. I’m using WordPress for most of my own site these days (the c3dbook section uses my old custom CMS).

WordPress.com is probably the cheapest solid option for a personal website out there (and they keep it patched for you)
 
The most important innovation for handling lots of devices are the vw and vh CSS units (percentage of screen) along with chrome’s fake touch mode and the meta tags for controlling scale. If you stick to mouseup or click handlers most stuff just works.

caniuse is great, so is MDN (it doesn’t give you percentages but information is very accurate)
 
Just playing with transparent color and masking in PS.
Now I want to build this one. :p

Builder Trans Color02.jpg
 
Another exercise in the "What part of your audience are you willing to lose" category: VERY recent browsers can handle transparent images, but they also have the ability to handle blend modes, which may include multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, and luminosity - depending uponon the browser. Wildly experimental, but more powerful than simple transparent overlays. Great samples can be found here.

Blend modes aren't made using overlapping DIVs, they are built using multiple background images assigned to a single DIV, which not all browsers can do. But it does allow you to more accurately duplicate what can be done in Photoshop.

I like where your project is going. Keep us informed.
 
Thanks Swizl. I found out that someone made a builder for one of Kiesels guitar bodies but was told to take it down.
It had a donate button as well and I heard he returned the money.

Another exercise in the "What part of your audience are you willing to lose" category: VERY recent browsers can handle transparent images, but they also have the ability to handle blend modes, which may include multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, and luminosity - depending uponon the browser. Wildly experimental, but more powerful than simple transparent overlays. Great samples can be found here.

Blend modes aren't made using overlapping DIVs, they are built using multiple background images assigned to a single DIV, which not all browsers can do. But it does allow you to more accurately duplicate what can be done in Photoshop.

I like where your project is going. Keep us informed.

I wouldn't suggest they use anything too new, as you said it may restrict their audience.

For the previous image I used two brightness/contrast layers as well as a two color layers set to Multiply.
One for the color and one for the colorburst.

I'm finding It's not easy to turn them all into a transparent layer that look the same,
so I may need to incorporate the layers like they are in PS. Is that something that can be programmed?
 
This is something that could be put together in a couple of hours using pretty simple code.

All the major photoshop composition modes are available in css these days. You could literally implement this with maybe 20 lines of javascript and a little css. If you can just export the layers as pngs with a sensible naming convention I could probably knock it out for you in a couple of hours.

How it works:
One div with position relative and size set to the correct proportions. One div inside for each layer with position absolute, top 0, left 0, width and height 100% and background-image: url(path/to/png) and set filter to whatever it needs to be if mere alpha won’t do the trick.

The javascript just picks which things are visible.

If you want to be fancy show/hide layers with a simple css animation that varies opacity over time before setting display:none.
 
Thanks Pod, that's encouraging. I still don't know if I'll be involved in this, so I don't want to waste your time.
But if I make some claims, and they want me to demonstrate, I may take you up on that.
 
Sounds good. And if you need it I will just build it for you. Creating the images is the hard part. The code is easy.
 
I wouldn't suggest they use anything too new, as you said it may restrict their audience.

For the previous image I used two brightness/contrast layers as well as a two color layers set to Multiply.
One for the color and one for the colorburst.

I'm finding It's not easy to turn them all into a transparent layer that look the same,
so I may need to incorporate the layers like they are in PS. Is that something that can be programmed?

I've never used the online version of Photoshop, but when it was a desktop app, it had pretty robust automation. I only used user feedback during scripts to do "skip this one?" sorts of bypasses. Now that there's a web interface, I have no idea how much interactivity is allowed, but I suspect it could be run in such a way to pause between each save - allowing you to toggle and adjust multiple layers as necessary. Not a fast process, but maybe faster than having to build every mixed layer by hand.

With CSS blend modes, it appears only a single blend mode can be applied on one set of background images for each div (see the example with CMY and CMYK images - multiple background images, but the div is simply set to multiply.) I don't think you could apply a sequence of different blend modes to any specific images within a set. You could build a transparent blend mode set placed above another blend mode set.
 
Back
Top