Open Source Cinema | Elements | Protagonist, Setting, Breadcrumb
Homework link:
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).
Change & adjust setting setting
Same as character’s features above.
Ambience sound instead of dialogue lines.
