Hi there!

Half a year ago, Me and a friend set out to create a new, easy to implement modelviewer in webGL. This flowed from a feeling that almost all other solutions out there are either paid, hard to get right or require a plugin to function. Our aim has been to remove these obstacls and create something that just works!

Eventually we set out to make the SJViewer. A simple to implement webGL ModelViewer.
Right now, a solid tutorial accompanies the viewer. It is our goal to completely automate this process: drag obj in program, get package ready to drop onto webserver. For now a little bit of work is still involved. But not much!

STILL IMAGE (HTML IS NOT ALLOWED ON POSTS):


You can find a working example here : http://www.jaccogoris.com/modelviewer.php
To download and start using it: http://www.jaccogoris.com/ViewerDownload.php
The tutorial on the second page is also included in the downloaded zip/rar.

Finally I'd like to make self advertisments:
My friend and main webGL/JS/GLSL dev: Seppe Rousseau
And me! Main OpenGL/C++/WIN32 Dev: Jacco Goris
Would be great if you'd drop by.

I hope this tool can help many of you to better showcase their stuff on their website and encourage you to contact any of us in case you run into trouble!

Cheers!
PS: I hope I posted this in the right place

This looks really neat. I could see this working well on a portfolio page. Instead of having just picture of your work, have an intractable version!

Is there a poly limit? Also do you plan to take it any further? For example, it'd be cool if you could edit the lighting setup.

Originally Posted by ghaztehschmexeh

This looks really neat. I could see this working well on a portfolio page. Instead of having just picture of your work, have an intractable version!

Is there a poly limit? Also do you plan to take it any further? For example, it'd be cool if you could edit the lighting setup.

Thank you for your positive reply! The general rule of thumb is, would a game with this many polices run in a browser, very high poly models are thus off the table I guess, we've not done extensive testing as far as a maximum because that also depends on your rig. But as you can see, the example has a fair amount of tris, I'm pretty sure you can fit a mid poly character or a scene into it.

We do in fact. Work is being done on a streamlined offline tool which allows you to play around with gizmos and shader settings before exporting, we are just sorting out the kinks now. For now all lighting setup can be modified in the model.xml file by hand! Happy guesstimating!

This project only just began and all feedback to make it more awesome is welcome! For instance /r/openGL helped us better define the wireframe so it didn't have as much zfighting. As new versions come out things will become more stable on more platforms.

Hey this is cool stuff. I was working on my own implementation but I've been using three js cause I didnt want to go that low level. Awesome that you guys exposes the shader aspect or at least from me glancing it seems I can configure a shader.

Originally Posted by JaccoG

Thank you for your positive reply! The general rule of thumb is, would a game with this many polices run in a browser, very high poly models are thus off the table I guess, we've not done extensive testing as far as a maximum because that also depends on your rig. But as you can see, the example has a fair amount of tris, I'm pretty sure you can fit a mid poly character or a scene into it.

We do in fact. Work is being done on a streamlined offline tool which allows you to play around with gizmos and shader settings before exporting, we are just sorting out the kinks now. For now all lighting setup can be modified in the model.xml file by hand! Happy guesstimating!

This project only just began and all feedback to make it more awesome is welcome! For instance /r/openGL helped us better define the wireframe so it didn't have as much zfighting. As new versions come out things will become more stable on more platforms.

Sounds really awesome. I look forward to when I (hopefully) get good enough to use this on a portfolio website

Originally Posted by haiddasalami

Hey this is cool stuff. I was working on my own implementation but I've been using three js cause I didnt want to go that low level. Awesome that you guys exposes the shader aspect or at least from me glancing it seems I can configure a shader.

There is a separate shader file, so if you keep certain things in there that the viewer needs you can indeed experiment with the glsl code and get some cool effects in there.

Apart from the tool I've talked about it would be cool to have a custom shader feature or at least deliver a set of shaders to pick from in the future! Thanks for the input!

Looks awesome!

Did anyone try using Maya for exporting? I'm going to give it a go.

EDIT:
I get it working, but model only shows half of the triangles. Triangulating prior to exporting doesn't seem to work either. I don't have the equivalent setting in Maya that you have in your tutorial screenshots. The "Faces: Triangles" one.

Originally Posted by kodde

Looks awesome!

Did anyone try using Maya for exporting? I'm going to give it a go.

EDIT:
I get it working, but model only shows half of the triangles. Triangulating prior to exporting doesn't seem to work either. I don't have the equivalent setting in Maya that you have in your tutorial screenshots. The "Faces: Triangles" one.

thanks for trying it out! I'm figuring it out in maya but untill i add a way to do it for other programs you can send it to me, I can import it into 3Ds MAX and export it for you quickly if you'd like.

Thank you for the offer JaccoG. I'll wait for a proper solution instead. I'd want to experiment back and forth and wouldn't want to bother you everytime I wanted to try exporting something new.

Originally Posted by kodde

Thank you for the offer JaccoG. I'll wait for a proper solution instead. I'd want to experiment back and forth and wouldn't want to bother you everytime I wanted to try exporting something new.

kodde, I just tried it and have no problem exporting. are you sure all of your normals are pointing outward? this may not be important for your model or task at hand but for .OBJ this is very important to show the planes correct in openGL.

EDIT: nevermind, I got lucky, It doesn't seem to work so far

Hmmm...
I tried it at work. Was using a model which I hadn't created myself so I'm not entirely sure. But pretty much. Don't see how that would make half of the triangles be gone. Very evenly, like every other triangle was gone.

I'll try again with a simpler model for testing purposes and let you know.

Originally Posted by kodde

Hmmm...
I tried it at work. Was using a model which I hadn't created myself so I'm not entirely sure. But pretty much. Don't see how that would make half of the triangles be gone. Very evenly, like every other triangle was gone.

I'll try again with a simpler model for testing purposes and let you know.

kodde, Maya OBJ's seem to be differently constructed than standard waveforms. as such we will expand the importer of the viewer rather than forcing the user to manualy edit it to look the same. expect a working maya compatible version soon!

EDIT: maya seems to write a different face order than standard max waveform. our importer reads in the entire thing but expects a max order of faces.

Aha I see. I will give it a go when you have a new version then. Thanks.