Selected: {{ selected }}
Characters Images Shapes
{{ character }}
Choose a pose A: {{ pose }}
Authenticate via GitHub to add images.
{{ url | limitTo:-30 }}
{{ shape }}
Add Scene Play Length: {{ encoded.length }}

Welcome to Yume.js. Yume (夢) means dream in Japanese. Yume.js allows you to make 3D (WebGL) comics from your mobile phone.

This two minute video shows how it all works.

To start, just click the "Add Scene" md-button to add your first scene. You can add as many scenes as you want. Then, add a character and optionally change the rotation or position. You can also animate the camera on the scene. Then, click play to play the entire comic, or preview just the scene. Once you have a comic you like, just share the play link.

Warning: URLs longer than 2000 characters won't work in many browsers. If you need to make comics which expand longer than that, consider getting a paid account where you can make unlimited comics which are stored on the server (among other features).

Scene: {{ ( scene.caption && ( '"' + scene.caption + '"' ) ) || ($index+1) }}


Optional. Camera starts at 0,0,0 and then animates to this final destination

3D Model(s): {{ scene.models.length }} in scene

Please add a character/image/shape and then optionally select it to edit attributes
Select one of the characters below to edit attributes.
Rotate Position Initial Rotation Size

Model Rotation

Optional. Rotation of the model during the scene (degrees)

Model Starting Rotation

Optional. Initial rotation of the model (degrees)

Position in Scene

Optional. Position of the model in the scene


Optional. Scale (preferred) or absolute size of image (defaults to image dimensions)
{{ scene.currentCharacter | json }}
Remove Character
Delete Scene Preview Scene

Yume code

	      var data = {{ scenes | json }};
	      yume = new Yume();
	      yume.load( data );
	      yume.setup( "comic" );

	      <div id="container">
	      <div id="caption"> </div>
	      <div id="comic"> </div>
	      <div class="progression" id="back"> Back </div>
	      <div class="progression" id="next"> Next </div>