Open Source Cinema | Elements | Protagonist, Setting, Breadcrumb

Homework link:

http://165.227.205.200/osc/week3/

These are the components of my assignment this week:

Importing an OBJ element and attempting to style it. 
Importing a Collada (.dae) animation 
Capturing more 360 footages & making the background changeable 
Creating breadcrumb in the scene

OBJ : importing and styling

Firstly, I wanted to combine two of DanO’s examples (saving scene + loading different assets). After initial issues with the version of three.js (the cloudfare link is not the most updated!) I managed to do so.

Other issues that I had:

I had to comment out all of the kinectron keying functions / lines. 
I did not have a texture initially, so the console kept throwing error in WebGL (would be great to have a checklist of elements to have before you can see the model in the scene). 
Finding the actual model. It was really small and was lying down.

Ideally I would want to be able to have a menu to change the skin of the model. But making a UV texture was too complicated a task for me.

Collada

I thought that the OBJ model did not make a compelling protagonist – it was still and had its arms up. It would be something else if the model was already in a pose and/or I could impose faces onto the model’s face (this is probably doable with openCV).

So I browsed three,js examples to see if there are examples of importing animated 3D models.

I came across an example that used JSON, but I got really confused with how three.js controlled the vertices/animation.

Then I found an example with collada file format, and it has a dancing stormtrooper. I ran into some error because I did not include “mixer” in the animate() function, but I managed to adapt the code in.

// collada

var loader = new THREE.ColladaLoader();

loader.load( 'assets/collada/stormtrooper/stormtrooper.dae', function ( collada ) {

var animations = collada.animations;

var avatar = collada.scene;

avatar.position.y = -5;

avatar.position.z = -2;

avatar.position.x = 0;

avatar.rotation.z = -Math.PI;

mixer = new THREE.AnimationMixer( avatar );

var action = mixer.clipAction( animations[ 0 ] ).play();

scene.add( avatar );

} );

function animate() {

requestAnimationFrame(animate);

// Update the textures for each animate frame

//animateKey();

animateVideo();

if ( mixer !== undefined ) {

mixer.update( delta );

}

renderer.render(scene, camera3D);

}

Changeable 360 Background

I went around with Ricoh Theta last week to capture more footages (because I misinterpreted week 2’s assignment).

For this assignment, I wanted to be able to change the BG, so created an interface to show the name of the setting and buttons to switch between settings. The name/labelling of the setting is important because I think it is the starting point to have “hyperlinked” cinema elements.

I have yet to add the functionality to save selected background to the database.

Breadcrumb

I used p5 function from the example to load the next available video background. This is an element from week 2’s experiment. I wanted to see if having a “breadcrumb” would make sense in this cinema-making framework.

I’m still undecided if it is useful because I am not sure if the breadcrumb would be part of the viewing experience or the cinema-making.

Some Reflections

Ideally, I would like to have these features:

Change & adjust protagonist (and other characters)

Connect to an open source Collada / JSON model repository 
GUI to search for model name and animation 
GUI to change the styling of the model (it can be broad style like cell-shading, realistic, surreal, etc.) 
GUI to attach sound clips to the model (or write my own lines for the protagonist).