Featured Posts

Open Source Cinema | Elements | Protagonist, Setting, Breadcrumb

April 12, 2018

Homework link: 

http://165.227.205.200/osc/week3/

https://github.com/hafiyyandi/osc

 

 

These are the components of my assignment this week:

  1. Importing an OBJ element and attempting to style it.


  2. Importing a Collada (.dae) animation


  3. Capturing more 360 footages & making the background changeable


  4. 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:

  1.  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).


  2.  Change & adjust setting setting


    •  Same as character’s features above.


    •  Ambience sound instead of dialogue lines.

       

 

 

Share on Facebook
Share on Twitter
Please reload

Related Posts
Please reload

Generative Music | Latent Space Sequencer

December 13, 2018

1/10
Please reload

Recent Posts
Please reload

Search By Tags