WebGL and the future of Portfolios
polycounter lvl 8
Hey my fellow polys,
since 3D gets more and more serious in todays browsers especially after the launch of Sketchfab, Verold and the three.js libary. I really start to ask myself if it would be good to include such tech into portfolios. On the other hand i ask myself if it could still end like flash which is know for being hated on portfolios.
In general i like the idea of seeing portfolios with fancy rendershots and a rotatable 3D Mesh but if people get annoyed by it, it would be rather a waste of time especially if you do it by your own.
Don't get me wrong this should be a talk about the general use of WebGL in portfolios not about the use of Sketchfab or Verold in portfolios.
What do you guys think?
A qualified feature for portfolios or should we rather ignore it?
since 3D gets more and more serious in todays browsers especially after the launch of Sketchfab, Verold and the three.js libary. I really start to ask myself if it would be good to include such tech into portfolios. On the other hand i ask myself if it could still end like flash which is know for being hated on portfolios.
In general i like the idea of seeing portfolios with fancy rendershots and a rotatable 3D Mesh but if people get annoyed by it, it would be rather a waste of time especially if you do it by your own.
Don't get me wrong this should be a talk about the general use of WebGL in portfolios not about the use of Sketchfab or Verold in portfolios.
What do you guys think?
A qualified feature for portfolios or should we rather ignore it?
Replies
It shouldnt be required to view the content, but if they wish to see it its there
So while it's supported natively by Chrome, Safari, Firefox and Opera there is IE to think about.
I'd add it to a few pieces you're especially proud of as a bit of a showcase but wouldn't make a switch to it completely just yet, at least not until IE11 rolls out.
Reserve it for supplement content until the technology is as prevalent as something like flash...unless of course you're at that stage in your career where you're not relying on a web portfolio's visitors to find you work anymore.
It doesn't hurt to include WebGL in addition to your regular portfolio presentation.
Mind explaining this gir? Just wondering as for one of my school portfolio projects I worked on making a prototype 3d model viewer using threejs and writing the shaders wasnt that hard. been a while since I tinkered with it again though. I like what sketchfab has where you click the image and it loads an html.
Gir, it's going to be awhile before a real-time view can match what you're generating in your image renders. But if you want to show an employer your modelling skills, it's probably not good enough to show a nice render. You've got to include wireframes and maps, and for that a viewer like Verold's lets you provide all of that in one nice embeddable viewer. And I'd challenge you to find a feature missing from the Verold material system - it's about as robust as you could expect. There's always more to do, but open challenge to you, what do you need that's not there now?
You aren't going to get the same quality of say vs the Crytek engine on these online ones yet. While when you do, Crytek would have already moved on.
This would be good as a con portfolio (GDC, face-to-face w/ a recruiter, etc.) if you have a mobile/tablet device with a big enough display for evaluation.
So, keep the plain vanilla no flash site for your regular and the dynamic folio for "live" presentations. Don't forget to leave a business card in case they're impressed!
[SKETCHFAB]qvmA9fX4jpOyScUFHaE16Bn3lBV[/SKETCHFAB]
Balrog comparison (click to view in 3D)
i really didn't like sketchfab, the way they force the environmental reflections into the material is extremely intrusive and it essentially makes EVERYTHING look super glossy regardless of any settings used.
i actually kinda liked Verald, it produced some fairly nice results. BUT...
1. loading times...
for a web based portfolio the loading times of this stuff will never be good enough. HR will pass over any folio where things take longer than 5 seconds to load. they just don't have the time to wait! so the only option for any of this stuff is to have it on a secondary/optional portion of your folio site, and have still images for the main section. what will likely happen is an HR guy will shortlist your portfolio based on the still shots, and the art lead will then check out the 3d stuff IF THEY HAVE TIME. the likelihood being though, that as MagicSugar points out, it's probably far easier just to have the 3d stuff on a tablet that you can take to show at interviews or conventions.
2. materials
while i'm aware that sketchfab and verold support multiple material instances on a single model, i found things crashed a LOT if i tried to use it. in the end i had to switch from a human test model with 3 material instances, to a fire demon with one just to make sure it loaded in and didn't crash + reset every 30 seconds.
so ultimately my point of view is this:
for your portfolio, you're far far better off just taking some screenshots in-engine with wireframes and without and using those on your portfolio. and then using these apps for face to face stuff.
Verold: Slow to load, awkward controls, terrible browser performance. However, I really like that I can switch into different viewing modes like normals only, unlit, UVs, wires, etc.
three.js seems like it could be customized to be super, super awesome, but at a glance it doesn't look nearly as user-friendly to set up as Sketchlab or Verold.
I like the idea of using Sketchlab in addition to the standard screenshots and reels. Verold and three.js don't seem as immediately usable. Embedding Sketchlab so that you *have* to click it to load -- and only if you want to -- seems cool to me, but it's merely extra, not a replacement for how portfolios should generally be made, IMO.
p3d.in gives the most accurate results from what I've seen. I'm not too concerned with browser support since most modern browsers automatically update themselves these days.
If you're afraid of people doing that, you're better off not publishing anything at all. Seriously, at some point the control freak mindset has to be put to rest. Let it go. Focus on your reputation as an artist. Obscurity is your biggest problem, not people copying your assets. Being known means those that know you can spot fakes a mile away and they'll call them out on it.
or you could, y'know, just stick to 2d renders...probably better than not publishing anything I would think
I'm in the same boat as Gir here...I take full advantage of marmosets skin shaders, parallax etc...for folio stuff, if I were doing pieces with lower tri counts and fewer bells and whistles then I would consider it, but otherwise its a no from me.
You clearly have never been in the circles I have been in. Don't be surprised if Gir's Balrog will end up in Gmod or XNALara, in a porno shoot, as he's canoodling Cortana from Halo.
You'll see a significant speedup in performance on Verold in the next couple of weeks. Three.js gives us access to a great community, which is important as we open our tools up to other developers. But it definitely wasn't designed for the kind and complexity of models that we throw at it. The good news is that Three.js is open source, so we're fixing the loader and going to submit it back. In dev, models that take almost a minute to load today are almost instantaneous. Of course, you've still got to download the meshes and textures, but those are highly compressed and on a decent network connection come down reasonably quickly.
It's a false dichonomy to compare 2d renders and 3d views. They really do serve different purposes. The best representation of your work is going to be your 2d render. However, that doesn't tell much about how the work was made. And if that's what you're trying to communicate (either in a daily review meeting, with your instructor/peers in a workshop, or with a hiring manager) then they will care about your topology, how you textured your model, etc. With an interactive view, you can efficiently provide that additional information.
Beyond that, the really exciting opportunity is that we're about to see a lot more 3d content bringing web experiences to life. If you take a look at the interactive trailer to Oz, or Burberry's latest campaign, you see two real business examples of interactive 3d being used to enhance a web experience. That's what really excites us, our tools as a way for web designers to easily collaborate with CG artists in the design and development of a new class of interactive experiences.
Ross
I'm saying that worrying about people extracting your assets is just OCD and over-possessive. Your art isn't your commodity, you are your commodity. Take stock in the fact that without you, that art wouldn't exist. People may copy your work, but that's only because they can't do the work themselves. You have the talent, you have the skill, and you have the training to make ideas into art. They just copy stuff they rip and slap silly crap on them thinking they're special little shits. The truth comes out when people recognize the work they're copping as their own is some other person's work or are asked to create something that they have to make from scratch, they utterly fail to live up to expectations.
The paranoia around people ripping assets is just not worth the energy because there's no stopping it and they'll eventually step on toes big enough to kick them into next week. So calm down, have some decaf, and think soothing thoughts. It's not worth getting worked up over it.
I wouldn't recommend three.js for non technical people.
I wrote a three.js based model viewer for embedding 3D canvases into a page (as opposed to sketchlab's fullscreen), and it took me quite some effort to make it work on all browsers and then display an image on non supported browsers instead. Plus adding a custom shader, making sure textures load, etc. Took me a few of days of coding make it all work flawlessly and on all platforms.
Tip: if you choose a sketchlab style solution, test it on all browsers and make sure you have a plan-B for non 3D enabled browsers. e.g. on some browsers sketchlab just gets stuck in an endless "loading" state. At this point I will close the page when reviewing a folio!
@Jon: Yeah three.js is a library and I'm with Kwramm, wouldnt suggest it unless you're quite technical. It definitely not super low level where you're actually doing a lot of opengl stuff but can be quite annoying to work with at times (making sure you're grabbing the right semantics to send across to shaders etc)
@Kwramm: Assume you're doing them with iframes. I remember there was a function to check if a browser was webgl compatible though its been a while.
multiple canvases - less clunky
and yes, there's some functions that help detecting some support but you still need to add some of your own code to make it detect webgl support and if its enabled.
Look at that balrog ! Sure render stills are great, but there you can really appreciate the shapes, how everything work together, how that edge line defines a muscle... There's no cheating, you can't hide anything. As a real time 3d art enjoyer, this is to me far more interesting than 2d shots.
But i take the fact models could be easily ripped is a no go for some artists.
I don't know if some solution could be find where the model isn't direcly in the client graphic card.