[Portfolio] (3d interactive): Hendrik-Jan Schoenmaker, MM|VR-Designer
sublime tool
I guess its finally time to start a own thread of this project. I will update this thread a few times as improvements are made with the content and with the framework.
link:
http://www.renderhjs.net/portfolio2k9/dmo5/
2.07 MB of which are:
- 80 KB initial flash movie load,
- 2.00 MB textures [40x] & 3d models [15x] . The pages should load sequentially meaning that you can flip those pages that are not yet loaded you will see a checker map instead.
controls: (in case you did not understood my help page)
- mouse wheel up and down to flip 1 page a time
- left & right cursor keys to flip a page
- mouse click to flip a page
- mouse dragging to manually flip a page
- hover over images to zoom into
additional keys:
shift = show debug information
ctrl = switch anti-aliasing
crits & feedback:
The first feedback I would like to have is about the navigation, performance, loading speed and how intuitive it is to use at first. I am still working on the content, text and at some places layout. So what you see atm. is not complete (some pages are not yet included, some I am not yet allowed to show).
then perhaps in detail maybe some suggestions or comments about the:
a.) zoom lens effect,- is it annoying? - should it be triggered by click instead of hovering?, key press ?
b.) does it run fast enough (+40 fps) on the higher quality mode (ctrl - key to switch) ?
c.) what do you think of the general idea of this presentation type ?
At some later point I could use some help regarding spell checking as I usually tend to make alot of mistakes.
Some issues I noticed just now myself:
- in some cases the book base frame gets lost or totoally wrong placed- in that case just reload the page and it should appear at the propper spot- have to debug that one out myself.
- minor slowdowns at each page load, I assume this is because of how the flash player works causing a little lage if data is loaded. Will try to improve this as well.
some background info on the portfolio
I did this portfolio both for my upcomming application and as a semester project at the university (multimeda VR- Design). At first I started the Layout with InDesign as a regular book (which will be printed as well). Each page is exported as JPEG image in a much smaler size (512² atm for each page).
I created the 3d models in 3dsmax and exported them as vertex animation using maxscript and a custom file format that compresses the animation and polygon data, by this I can compress the file down to 2 - 10% of a similar *.dae (collada) format. because of the smal filesize and binary filetype parsing and loading times are very fast. As for the textures: PNG, GIF and JPG are supported.
The engine used is written from ground up for this project- it renders n-gons instead of triangles to save performance on flat surfaces. Because it uses a orthographic projection and affine texture mapping faces do not need to be triangulated and can thus be rendered as n-gons at once. There are some minor drawbacks you have to keep in mind with the modeling but in most cases you can model using quads combined with triangles without any problems.
xtra footage:
(previous layout posts)
http://www.renderhjs.net/portfolio2k9/5pack_01.jpg
http://www.renderhjs.net/portfolio2k9/5pack_02.jpg
http://www.renderhjs.net/portfolio2k9/5pack_03.jpg
http://www.renderhjs.net/portfolio2k9/5pack_04.jpg
(low poly models)
http://www.renderhjs.net/bbs/polycount/submissions/portfolio_lowpoly_3.gif
link:
http://www.renderhjs.net/portfolio2k9/dmo5/
2.07 MB of which are:
- 80 KB initial flash movie load,
- 2.00 MB textures [40x] & 3d models [15x] . The pages should load sequentially meaning that you can flip those pages that are not yet loaded you will see a checker map instead.
controls: (in case you did not understood my help page)
- mouse wheel up and down to flip 1 page a time
- left & right cursor keys to flip a page
- mouse click to flip a page
- mouse dragging to manually flip a page
- hover over images to zoom into
additional keys:
shift = show debug information
ctrl = switch anti-aliasing
crits & feedback:
The first feedback I would like to have is about the navigation, performance, loading speed and how intuitive it is to use at first. I am still working on the content, text and at some places layout. So what you see atm. is not complete (some pages are not yet included, some I am not yet allowed to show).
then perhaps in detail maybe some suggestions or comments about the:
a.) zoom lens effect,- is it annoying? - should it be triggered by click instead of hovering?, key press ?
b.) does it run fast enough (+40 fps) on the higher quality mode (ctrl - key to switch) ?
c.) what do you think of the general idea of this presentation type ?
At some later point I could use some help regarding spell checking as I usually tend to make alot of mistakes.
Some issues I noticed just now myself:
- in some cases the book base frame gets lost or totoally wrong placed- in that case just reload the page and it should appear at the propper spot- have to debug that one out myself.
- minor slowdowns at each page load, I assume this is because of how the flash player works causing a little lage if data is loaded. Will try to improve this as well.
some background info on the portfolio
I did this portfolio both for my upcomming application and as a semester project at the university (multimeda VR- Design). At first I started the Layout with InDesign as a regular book (which will be printed as well). Each page is exported as JPEG image in a much smaler size (512² atm for each page).
I created the 3d models in 3dsmax and exported them as vertex animation using maxscript and a custom file format that compresses the animation and polygon data, by this I can compress the file down to 2 - 10% of a similar *.dae (collada) format. because of the smal filesize and binary filetype parsing and loading times are very fast. As for the textures: PNG, GIF and JPG are supported.
The engine used is written from ground up for this project- it renders n-gons instead of triangles to save performance on flat surfaces. Because it uses a orthographic projection and affine texture mapping faces do not need to be triangulated and can thus be rendered as n-gons at once. There are some minor drawbacks you have to keep in mind with the modeling but in most cases you can model using quads combined with triangles without any problems.
xtra footage:
(previous layout posts)
http://www.renderhjs.net/portfolio2k9/5pack_01.jpg
http://www.renderhjs.net/portfolio2k9/5pack_02.jpg
http://www.renderhjs.net/portfolio2k9/5pack_03.jpg
http://www.renderhjs.net/portfolio2k9/5pack_04.jpg
(low poly models)
http://www.renderhjs.net/bbs/polycount/submissions/portfolio_lowpoly_3.gif
Replies
-On FF it simply didn't load for me
-If you really want to stick with the flipbook, you should consider implementing mouse flicks for the navigation. I'd rather simply 'throw' my mouse a little to flip pages, rather than having to cross the center binding line.
-Since the first pages gave me a checker texture, I kept on flipping, until I realized the loading was trying to catch up. I was at page #31 when I realized this.
-You should also have a link to a normal, plain html version of the folio. And maybe even make the plain version the default page (and linking to the fancy 3D one as a candy bonus)
-I'll let other forum members argue about the risk of using such a proprietary navigation interface...
-I kindof like it myself, but I would never take such a risk. It could be very popular for a very specific category of users tho (for online picture albums for instance) so maybe you could ditribute this somehow. However no art director would like to browse that in my opinion. (but obviously, it's a different story if you apply for a position as a commercial UI designer)
-However for it to really work you really need antialiasing... (edit : ok, just found it, should be on by default. And use tickboxes for that, not modifier keys)
-The Cooliris/Piclens custom gallery feature is quite powerful, that's what you are competing with on this.
-Screen area could be used better. Even when I maximize the window, the flipbook only takes 1/4 of the availalbe space.
-Drop the zoom lens, and enable mouse wheel zoom instead!
-Also, the most important rule of webdesign ... No matter how many hours you spent on a navigation system, if it's not serving it's purpose well, better trash it than sticking with it. (but since I don't know what your goal is with this, I have no real recommandation)
-What is MM/VR? No need for crypting slang
-Personal preference : I dont like when navigation bars have some kind of an ease-in/ease-out behaviour overriding my mouse moves(top bar stuff). I like a 1 to 1 snappy cursor behaviour better.
-See http://www.hellomuller.com/
In itself, it's very impressive! Not sure of it's purpose tho. Anyhow, good luck!
Looks great, just need to get used to it,
It might not do your work 100% justice but it sure is a different way to put things down wich give it a +1
renderhjs: Does the first page say "indlex" instead of "index" ?
Also, the colour bar at the top which scrolls along, isn't clickable. This feels broken to me - that should be a "fast jump" bar so you could right to the end of the book, or to a specific page. It really feels like I should be able to click on those colours/titles and go right to that page, instead it does nothing other than scroll left to right, which feels pretty useless...
I still stand by what I said in the other thread - as a portfolio site I don't think it works very well, the only thing this is going to be useful for is getting a job as a flash developer on some crazy stuff. While I appreciate all the technical and background work that's gone into it, I don't think it's actually worth it as a usable and browsable site / UI.
That said, I think you've obviously done a lot of very good work here, and it's an impressive job in itself, but personally I just don't like it. I'm not a flash/web/booth/app developer though, so I guess I'm not your target audience
Edit: Oh, and I think it's great that you've written your own 3d format and exporting tools, that is really cool, maybe you could have a market for selling that technology to 3rd parties?
Edit2: Looks like the "page turn" arrows are broken for me, when I move to the left of the left page, I don't get any arrow at all (although it looks like the navigation help image appears to the left of the window, but it's cut off so I can't read it) ... and when I move to the right of the right page, then the arrow which looks like it's meant to be for the left page appears and clips through the page. I would get a screenshot but my webspace is down at the moment
For example I get a much better idea of your actual work from your forum posts in Flashkit and here on PC, than I do from your portfolio. The size of the book seems small, not being able to save images with your name / email embedded on image seems like a miss in basic ease of use and basic interactivity, if you are concerned about recruiters for content.
Obviously given your skills you can apply for positions concerning the interactivity alone, but the book and all seems to exist on your site, merely to exist for itself. If you are creating interactivity to present 3d content, and I cant see the content fully easily and properly, seems wrong. You have a lot of great content all over the web, this execution doesnt seem to bring it all together properly IMO
Well, this is REALLY cool, and I love the flipbook idea, and I'm quite impressed.
The problem is that you aren't Ikea, I'm not looking for furniture, and you need to put your art before the gimmicks. Right now that flipbook, cool as it is, really overshadows the content to the point where I can't even remember one thing I saw in there other than the keyboard/mouse scroll instructions.
If you were just up for scripting and programming it'd be a great site to get people interested in what you can do. For visual art, it's not so nice.
Still, slick work.
PS. Can I have a wallpaper with some of the chicks that you drew? XD
Now that I think about it, if you could make it a bit bigger the pictures would be more easy to view?
Cool for shops and stuff tho' no doubt someone will want to buy this tech
As for a crit: Someone at a company wants to see your art, not how nicely animated the site is (unless you apply for a webdesign gig ofc). They want instant access to your art, they want to see in a blink of an eye if it holds interesting pieces.
Right now there's no way to either bookmark a specific artpiece, or page. Let alone save a pic to show it around or mail it to someone else who has to see it.
I think it is a pretty cool site, but like others have said, there's a lot of broken items here; bar at the very top is unclickable, use mouse flicks not full mouse pulls, get rid of the zoom feature and enlarge the book which is way too small right now. What I found most detracting was that the zoom tool would show the woork a little bigger, but if you couldn't read the text in the book, the zoom tool didn't work on ANY of the text. If you put the text in there, people should be able to read it, and I can't on my 1024x768. If you keep the zoom tool, it should just be a hover over the body of work on that page and it blows it up to a larger size on the screen. I have no idea how to get in touch with you from the website. I couldn't find any e-mail or experience information, etc. I would also change "layouting" to just "layout". Your color choices are great though (much better mine).
(got rid of some of the 'ings' hehe)
Having the flipbook as a "next" button of sorts with the main images displayed below it would be a decent gimmick, but really, if you want the flipbook idea to be incorporated I would suggest simply making it half a book, perhaps in the style of a magazine with it's pages folded over all the way. That way you get to flip through, but the art will be visible in a large format. Also turning that sliding bar at the top of your page into a thumbnail slideshow that you can click directly on would be a nice way to expedite surfing.
Only thing that bothered me was it was a little small, and the magnifying glass really was actually annoying because I couldn't get the entire flow of the pictures at once.
:thumbup:
pior :
- mouse flicks:
yes I will add that,- seems that quite a few people suggested that
- normal, plain html version of the folio:
will do that,- at the bottom of this post I did a quick test and I do think myself that the pictures do better represent themselves. I will propably end up using 2 versions.
- default anti- aliasing:
yes will be default next time- my developing machine was not that fast but on other computers it was often quick enough
- Screen area could be used better
I had a liquid layout at first (a layout that resizes with the browser window) but I had performance issues back then- guess I can go back on that now since I tweaked performance
- Drop the zoom lens
might be a option - maybe a click will do too
- I don't know what your goal is with this
game design/development defenitly more a focus on not webdesign
-What is MM/VR
Multimedia|Virtual Reality Design,- the official title I get once graduated, might change it
- navigation bars ... ease-in/ease-out behaviour
will change that
-..use your interactive3D knowledge to display your gameart 3D projects
I had that in mind at first- but the engine does not handle that well poly intense models - it would propably have to be below 300-400 polygons.
But since all the 3d models quite distract from my content I am thinking of using less and less 3d stuff around the pages.
MoP:
- indlex" instead of "index
typos like that happen often- because I type to quickly and dont check that often
- colour bar at the top ...isn't clickable
but its intended in the end- its something I planned
- "page turn" arrows are broken for me
sometimes the loading order is out of order
Microneezia:
- The size of the book seems small
will propably change it to dynamic - so it scales with the browser window
- not being able to save images with your name / email embedded on image
will add that- maybe a double click or some sign to click on
dfacto:
- I can't even remember one thing... other than the keyboard/mouse scroll instructions
maybe those were to much - and perhaps just one control type would be enough to explain (e.g just scroll wheel). I would still keep the other shortcuts but not necessarily explaining them on the first page
rasmus:
- atleast have artwork pop out to an isolated window
I was thinking about showing only the defined rectangular area (you can see them with the shift key) it would them show a larger bitmap slice of the particular part one clicked or double clicked
- 3d models around the actual art is the major culprit here
I realized that - thinking of reducing them or maybe go in the end completely without them
t4paN:
- Can I have a wallpaper with some of the chicks that you drew? XD
will create one if you insist as soon as I have time
pestibug:
- Let alone save a pic to show it around
I will consider that- it would be usefull
Firebert:
- what kind of position are you looking for?
game related- not 100% sure though as what specific- maybe thats not so important though. But perhaps I should adress the game- design more
- zoom tool didn't work on ANY of the text
its because the text is not yet written so I am not sure 100% where and how much text will be placed where. Because of that I left out the area definitions for the text parts
- I couldn't find any e-mail or experience information, etc.
will be added,- same as other contact options. A CV (where things like experience information belong into) will be added once its all done
- change "layouting" to just "layout"
thanks,- its stuff like that I dont notice rigt away
whats_true:
- supposed to read those tiny words in the page?
it does not work yet,- but it will be readable at some point
commander_keen:
- a lot of wasted space on the bottom (at least with widescreen)
yes will change to liquid layout- so it scales with the browser window.
rdmlegend:
- REALLY glad you put the controls in the beginning otherwise people would be really lost
I think they are maybe to much- some people said to me that there were to many control types (which I think is a good idea) but maybe explaining less of the possible controls is better for a quick introduction.
phew --sweat drop--
I have not yet something to show regarding the flash content- but here is a test with just the pages in a html page:
http://renderhjs.net/portfolio2k9/dmo5/index_raw.htm
I assume that the content stands more out compared to the flash version. I propably will end up using 2 version + a PDF download in a print resolution (~ 300 ppi).
I will work a bit more on the general design so that booth flash and HTML version somehow have the same design.
Say you had 2 virtually identical sites, one in flash and one in html, could you insert some unobtrusive code that would automatically direct a visitor to the appropriate site by checking the browser instead of directing to a splash page?
imo a splash page is yet another click that may be taking away crucial time that the employer has and could ultimately decide whether they bother investigating further or not. Personally I wouldn't like to take that chance as I'm creating a pure html portfolio but with all your design and effort expended on this it would seem a waste not including it in a more efficient manner.
the difficulty is that its rather discussion of personal preference of the visitor - that he might decide on (but propably only if he wants it not). Anyone else propably would`t care as long as they see just the portfolio.
My idea so far is to start/launch with the flash version and have a link at the top to switch to the html version
Thats what I was going to suggest you do, seems like this way the people who don't like it the fancy way, will be happy to see they can have it the standard way, thus pleasing everyone.
www.renderhjs.net
by default for now the html version is the default that will be called on the domain call. But as soon as I fix some loading and navigation issues in the flash version I will place the flash version as default. For serious job applications I will use the html link (people then can switch anytime).
Some big changes that happened meanwhile:
- reduced by half (I had about 50 pages a week ago)
- smaller head: just th name and what I do
- pdf download link
- html version with additional lightbox navigation (middle mouse button works as well for opening in as background tab)
I have recorded from about every project that is included gameplay and debugging footage that I need to cut and edit before I upload it to vimeo. I will link to those videos booth from the html and flash version.
What's left besides that is some spell checking, CV and some fine tuning. One big project from this year which is still NDA will hopefully added soon.
Couple things I was thinking -
1. was hoping for wireframes and texture flats mainly. Is Chronos procedural textured? if not, you did this solo? projection mapping? haha :poly142:
2. on the interactive portion, the color bar at the top looks like it could be a timeline - so then I was wondering, how long this work took to complete. I know you are pretty fast, so probably its in your favor to include time lines maybe. Timelines arnt really usual in a game portfolio ive noticed, But yours isnt a usual folio anyway.
looks great man! congrats!
My biggest complain is that, no matter what I tried, I couldn't figure out a way to simply view any image fullscreen or just simply opening them in a new tab. Also the HTML version seems to create a weird increasing frame, on Safari at least.
The 3d version obviously shows your 3d authoring skills, and the images suggests that you can do great art too, but I couldnt find a way to check it all up close, so I think you still have to work on this since the is the +main+ purpose of a folio ...
and i figured out how to zoom in (for the html at least) i think. Middle click on the image and it will bring it to a new page. When you click on a page now, it will be a little bit bigger.
As a portfolio for a Flash designer, I'd hire you in a heartbeat. In terms of proficiency with Flash, this is a real show-pony. Bells and whistles everywhere. I was very impressed with the unique interface, the level of interactivity, the 3D rendering. I specifically loved the magnifying glass feature you added when certain image elements on the pages were moused over. A stunning example of Flash programming.
It's definitely better than before, but even with the HTML version really takes the cake for me because I can click a picture and it pops up a bit bigger, helps a lot though I didn't notice I could do that the first pass through. I guess as a designer this is pretty top notch but as an artist or 3d artist portfolio it can be a little unconventional. I kind of think the magnifying glass should be able to be used on every page, with a simply key press or something instead of selective. Good work though man never seen anything like it!
no all unique unwrapped and textured (every little corner, wire, stone,...). It was done by 2 students me beeing the character modeler and texture artist and the other one beeing responsible for most of the environment work- though advertisements and boards were my models.
About the timeline - it is something that is not yet finsihed because of course you should be able to click it and then the pages would flip to that spot.
a.) same here with chrome - I assume it affects all webkit engines. It has to do with the lightbox I am using from inside a frame- maybe I will change that html page to a single big page that you have to scroll as a whole down.
b.) thanks for that input - I was hoping at least for the html version that the lightbox frames would be bigger but that is often not the case (not with 1280*1024 and alike height resolutions). As for the flash version - you can hit the [enter] key and it will open the image in a tab. This will be available though the GUI and you can already see some points at the tops of each page saying view or download page xx.
because there is some NDA stuff that I can not show yet so I removed it for now.
the problem with many flash designers is (and you might know that as well) is that you are often working alone and usually on either ad or ultra low budget (almost crap) games.
Things are about to change (even EA now has a flash game studio) but to me not fast enough hence why I don't mind at all burying the whole flash stuff.
i think that u have to consider what it is you're after or what do you simply like doing, and focus the portfolio on that. your artwork looks much stronger presented this way, but if you want to make art than u should make sure it is as strong presented piece-by-piece, without the gimmicky book. if you want to do something else, make sure it is presented properly as the focal point of your portfolio.
For the majority of other people that know me or other companies that might have more a focus on interaction or perhaps flash the flash version will server better.
updates:
new url
http://www.renderhjs.net
some changes:
in the flash version (default for the URL):
- external links to the project eg. a youtube video or a interactive demo link
- download option for each page will open the page as JPEG file
- dynamic detail / aliasing if the framerate drops below 24 fps. There are 3 levels but most likely you wont notice them swapping or changing it all. Just at the beginning when pages are loaded flash seems to cause some CPU drain and aliasing might be visible on normal computers.
in the html version:
- no lightbox anymore - instead direct links to the JPEG files. With middle mouse button one could then for example open multiple pages in background taps.
- added youtube and flash interactive links
I think that the gradient or gloss that appears on the page as you fold it is really cool, but perhaps a bit strong? at least on pages that are mainly black IE curing colors, but seems ok on Chronos. Its probably the same gradient every time. perhaps tone it down?
either way, thats some nitpickery - Great job!
and here is a youtube video:
[ame]
keep in mind that until now I still have not shown all pages (and the whole cover) that is because there is still a NDA project that has not yet been released to public and therefore I am not yet allowed to show that in public.
I used a print service of a drugstore here in germany:
http://fotoservice.schlecker.de/cewe...otopapier.html
and they offer also printed hardcover versions that really look like a professional book. I payed for each book I ordered around 24,- which is like 34.37 US$ and it came with 26 printable pages + front and back cover custom printed. You can upgrade pages by 8 and then it cost a little bit more.
The trick was though to export the pages as huge resolution JPEG images from inDesign and put them as background images in their consumer level software. So I exported the pages @600 dpi and added 3mm bleeding space to the outer edges (not the inner fold direction).
Then I used their ordering software to place the images as background images on the pages (cheating with the layout, because it usually expects you to choose a template and consumer design theme). Once done you can set your order, where you want it to be delivered (I choose a local drug store of them because I am only nights at home
The cool thing is that you do not need to pay until you see the real thing, perhaps quality check it and only if you are satisfied with it and take it pay for it. Delivery time took about a 5 days.
I had to hack and test things though before I knew all that but with some background knowledge in printing it was just a matter of time to figure it out. If you need some additional info for a similar thing hit a PM and I might be able to help out with some of the print stuff.