art, software, web design

Ripping 3D Models from Websites

Anyone who explores the internet long enough should already be well aware of frequent image re-posting. While for some things, this is acceptable, in other areas, it leads to the ever louder cry of “art theft” and helps keep the lawyers active in the courts in D.C. and the halls of the copyright office. It is rather easy to copy a 2D image, and with Adobe CS 6, it is easy to remove a watermark. While images with watermarks removed may not be an exact copy (due to the algorithm for image correction and the style of watermark), the average naked eye won’t notice. But what’s more important is that a work with possibly a great deal of time put into its production (depending on if we’re talking about amateur photo or something like a realistic digital painting, etc.) is now available to everyone, and unfortunately, allows for just about anyone to take the credit. This tends to tick off artists and has lead to a whole lot of bickering and lawsuits.

Interestingly enough, what one might call the “calamities of Flatland” have yet to hit the 3D world. But here’s how that could change…

Thinking from the perspective of a software developer, I can tell you that it’s not an easy chore to develop a “lightweight” 3D engine for a browser. You can either make an web app out of something like Flash or Java, or you could use the HTML canvas. With the shift of technology moving towards all-things-browser (such as the existence of the FirefoxOS) – despite the fact that web standards aren’t uniformly implemented across browsers – there is increasing interest in the HTML canvas.

That said, there are a few 3D engines available for the HTML canvas, including some such as Copperlicht, the web successor to the C++ 3D engine Irrlicht. From a programmer’s perspective, it’s awesome that these are available. It makes the job much faster, and thus cheaper – a big plus that big business isn’t going to miss out on.

From the perspective of a programmer-artist, however, I can tell that this could potentially lead to “calamities of Flatland” for 3D modellers. The issue isn’t the existence of the HTML canvas itself so much as the existence of common libraries and the fact that all Javascript code – 3D engine and all – is loaded into the browser.

But let’s back up for a second.

What I’m talking about is loading high-definition 3D models into a HTML canvas. I’m talking about models that are actually worth something, not frivolous amateur scraps. Why would we load valuable 3D models into an HTML canvas? Let me give you a short list of the important ones.

Incentives for a high-def 3D model in an HTML canvas

  • Portfolio – In the future, amazing 3D artists will be compelled to display up the “real thing”, showing that they are genuinely good, aren’t stealing a screenshot from somewhere, and, well, just because every other 3D artist is doing it (so of course industry will start to desire this showing-off as a baseline for prospective candidates for employment).
  • Product showcase – Current websites show only images of a product. With 3D canvas technology, the entire product can be on display for the potential customer to look around and view it from all angles.

There are problems for both groups. Let’s start with the “Portfolio”. I’ve already discussed the problem for 2D artists, so I’ll just expand on that. What other incentive is there to take a model? I imagine that in the future, 3D models will be seen as more of a commodity. A plethora of high-priced and practically non-origin-traceable 3D models will be displayed online. It’s easy enough to remove or overwrite metadata in files. With what one might call an “owner-less” model, a ton of money can be made. The current 3D model market has items ranging from $0 to $2000, depending on quality.

There are problems with the marketing side as well, but at the moment, I can only think of one that is a real serious issue. Imagine that your competitor – which has a very similar product (think smartphone) – decides to rip the 3D model off your showcase website and use it on theirs. All they have to do is change the color, maybe modify the model to their product specs, and publish it on their website using, of course, the same 3D engine for the HTML canvas that you are using.

I recall some time ago, there was a news article about how Apple’s iPhone (which is made in China, by the way), was being resold down the road (in China) by another company, branded as something else. Obviously, the Chinese company making the phone could sell it to anyone, but what they don’t necessarily have is marketing savvy. While Americans may have such savvy, if 3D models can be ripped from a website, then it wouldn’t be all that surprising if the Chinese or some competitor company copied all of the nice features of a main brand. It’s not just a couple hundred dollars down the drain for a “lost” 3D model – it’s an entire marketing technique made more generic and therefore less appealing.

Now, how do we make this magic of ruining everyone’s day come about? Not like I’m going to give specific details, but here is a method you might consider…

A Thought on How to Rip an Online Mesh

The first step is identifying the engine and learning about how it works. If the engine isn’t one you’ve seen before, it’s obviously more difficult to figure out how it works. There are ways of gathering the Javascript files from sites and saving them, even when such scripts are stored in “locked” directories. I won’t go into details about how this works, but just know that if the website needs it, then your browser can access it. And if you need to write a plugin to make it easier, there is plenty of documentation for Firefox add-on creation. The Javascript files of the engine will have to be studied carefully, but the engine will obviously do all of the work in loading the mesh, so the key is just in identifying how that mesh is stored.

Once you’ve learned about the engine, Javascript can be created that is appended to the website. Simply save a copy of the website (or page, depending on how the site works) and append this new Javascript to it. This Javascript can be used to save the mesh data to a string that can be printed in a text box you add to the site (assuming your browser prevents you from saving files with Javascript).

Problem Fixes

How do we avoid spreading the “calamities of Flatland” to the 3D modeling web domain? First of all, it should be obvious that “watermarks” are completely useless. Those can be removed via another modelling program that loads the mesh data jacked off a website. Texture watermarks are particularly useless on symmetrical models unless the watermark is used in each symmetric part. Such a watermark may be a deterrent for meshes with complex textures, but a deterrent isn’t a overwhelming obstacle for the persistent.

One solution to the problem – at least from the modeller’s perspective – is to write a new engine. Bad idea. This takes too much time and money. Obscure engines could be used, but then it’s hard to find maintenance.

The best solution (at least for now) would just be to use a Javascript obfuscator or optimizer. (You should probably be using an optimizer anyways to speed up your website.) There are a variety of these around, and while it may not be the perfect solution when someone develops a Javascript IDE (as we’ve been waiting for) that identifies how the code works, it will be much more of a hurdle for the person trying to read the engine code. Even in this case, one last, important part, would be to obfuscate the strings used in the file naming. Without the strings directly saying “Hey! Resource is located at ./rsc/data/meshes/m1”, it’s harder to simply jump straight to the resource, so to speak.

Concluding Thoughts

I don’t think this is a big deal, at least not at the moment, and it’s something that can be avoided with good coding practice. But as I’ve learned, even “professionals” are lazy and may hard-code passwords into their websites. *sigh* Incompetence isn’t necessarily the cause of the greatest expense. The greatest expense is filling a hole that was created because you didn’t do something you should have in the first place.

Enter the space and time of my little world... Welcome Earthling.

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s