Super Mario 64 Start Screen Like 3D Model Manipulation by Users

[David Roberts]

Good Afternoon All,

I'm currently working on a project where I'm hoping to replicate the stretching and posing of Super Mario's face in the Super Mario 64 Start Screen.
http://www.youtube.com/watch?v=3CfGQoSKePM

I'm looking to create another Cartoon Face (Our Schools Mascot) and have users find this as an easter egg on the schools website.

I've got the Viewer set up, with the model in .js format. Its displaying, but I'm looking for a way to allow the users to select a vertices and drag them to stretch the model.


I'm very new to WebGL, so any help would be greatly appreciated!

I've attached the Files I have been working with, just so you get a better idea of what I'm working with.

Thanks a Bunch!

Dave

[Tony Parisi]

Hi Dave

Cool...

I suggest you set up a Github project for this, you'll be able to get a better dialog going with people who want to help. Email + ZIP files is going to get clunky real quick.

Tony

--
You received this message because you are subscribed to the Google Groups "WebGL Dev List" group.
To unsubscribe from this group and stop receiving emails from it, send an email to webgl-dev-lis...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

--

Tony Parisi                             tpa...@gmail.com
CTO at Large                         415.902.8002
Skype                                     auradeluxe
Follow me on Twitter!             http://twitter.com/auradeluxe
Read my blog at                     http://www.tonyparisi.com/

Learn WebGL                         http://learningwebgl.com/

Read my books!
Programming 3D Applications in HTML5 and WebGL
http://www.amazon.com/Programming-Applications-HTML5-WebGL-Visualization/dp/1449362966
WebGL, Up and Running
http://www.amazon.com/dp/144932357X

[Theo Armour]

David

I have looked at the video a few times. I have a feeling that the edits are carried out on perhaps ten or so groups or vertices/faces with each group having two or three edits that can be applied 

So it comes down to ascertaining which region or group the user seems interested in/has click on. Show the puff of smoke to indicate which region you think the user wants to edit. Then use the mouse up and down and side to side movement numbers to the stretching or whatever is the designated behavior for the group.

The model you attached is built with Three.js. You should be able to select groups of vertices using a Three.js Ray. Mr.doob and Lee Stemkoski both provide examples on using the Ray.

Even having said all that, please note that this is a WebGL mailing list and not a Three.js list.

You might consider re posting your question in Stack Overflow/tags/threejs where there are many people who help with Three.js issues.

And, nonetheless, I would be delighted to see what Jack could put together in actual WebGL ray-casting.

Theo

On Thu, Feb 20, 2014 at 11:45 PM, Jack Pryne <jack....@gmail.com> wrote:

Hi, Dave,

One way to achieve the effect you're looking for is to implement face-picking via ray-casting, & send the derived clicking point in world-space, along with the 2D vector defined by the mouse-drag to the vertex-shader as uniforms. In the vertex-shader, check the world-position of the vertex against the clicked world-space point, & translate the vertex by the 2D drag-vector in camera space. I know this is technical, but might give you some ideas of where to start. I'm busy with a gig right now, but might have time to help you out in a week or so.

Jack

[David Roberts]

Below is a link to the public github repo.

https://github.com/DaveBenRoberts/WebGL-3D-Face-Manipulation