E-mote WebGL SDK
2018/02/05 M2

EDescription

͂̕ E-mote WebGL SDK ̃}jAłB

This document is the manual of E-mote WebGL SDK.


EFolders

tH_\͈ȉ̂悤ɂȂĂ܂B

driver/ 
    E-mote SDK{
data/
    E-mote Tvf[^
simpledemo/ 
    VvE-mote\f
controldemo/
    vpeB̑܂ޕ̃vC̓f
es5/
    ES5ɃgXNvgXNvgƃTv

The folder structure is as follows.

driver /
    E-mote SDK
data /
    E-mote sample data
simpledemo /
    Simple E-mote display demo
controldemo /
    Simultaneous operation demo of multiple players including property operation.
es5/
    Scripts and samples transcribed to ES5


ESupported JavaScript version

E-mote WebGL SDKES2015(ES6)dlJavaScriptŋLqĂ܂B
݊̂߂ɁABabelES5փgXNvgXNvgƃTv𓯍Ă܂B
IE11œ삳ƂړIES5dlœ삳ꍇ́A'es5' tH_̓eŏ㏑Rs[ĂB

E-mote WebGL SDK is written in JavaScript of ES 2015 (ES 6) specification.
For compatibility, we bundle scripts and samples transcribed to ES5 with Babel.
If you want to operate with ES5 specification for the purpose of running on IE11, please overwrite it with the contents of 'es5' folder.


ESDKs

SDKœɕKvȃt@C͈ȉ2łB

drivers/emotedriver.js
drivers/emoteplayer.js

emotedriver_d  emotedriver_v ́AꂼꓮmFṕufobOŁvuœKfobOŁṽhCołB


The following two files are required for operation with SDK.

drivers/emotedriver.js
drivers/emoteplayer.js

emotedriver_d and emotedriver_v are drivers of "debug version" and "no optimization debug version" for confirming operation.


EAPIs

// total memory amount of emotedriver.js can use.
// (this variable must initialized before loading emotedriver.js
EmoteModule.TOTAL_MEMORY = 100663296;

// external emote animation override hook.
// (this variables must initialized before loading emotedriver.js)
// if you defined these functions,
// they are called when emote device required animation.
// record device variable, and call device.drawAnimation(timeStamp)
// on your own animation timing.
EmoteModule.onStartEmoteAnimation(device);
EmoteModule.onStopEmoteAnimation(device);

// timeline play flag
EmotePlayer.TimelinePlayFlags = {
	PARALLEL:  1 << 0,
	DIFFERENCE: 1 << 1,
};

// mask mode
EmotePlayer.MaskMode = {
	STENCIL: 0,
	ALPHA: 1,
};

// set existent hidden canvas as rendering canvas.
EmotePlayer.setRenderCanvas(canvas);

// create new hidden canvas as rendering canvas.
EmotePlayer.createRenderCanvas(width, height);

// require emote device (reference count).
EmotePlayer.requireDevice();

// release emote device (reference count).
EmotePlayer.releaseDevice();

// mask mode for rendering.
// By default, the mask mode is set to ALPHA. 
// In the ALPHA setting, the processing load is high for the smartphone browser, so please set it to STENCIL in that case.
EmotePlayer.maskMode = EmotePlayer.MaskMode.ALPHA;

// whether to protect translucent texture color or not.
EmotePlayer.protectTranslucentTextureColor = true;

// mask region clipping (gpu optimization).
EmotePlayer.maskRegionClipping = true;

// mesh division ratio for all emote players.(0-1)
EmotePlayer.globalMeshDivisionRatio;

// hair physics scale for all emote players.(0-1)
EmotePlayer.globalHairScale;

// parts physics scale for all emote players.(0-1)
EmotePlayer.globalPartsScale;

// bust physics scale for all emote players.(0-1)
EmotePlayer.globalPartsScale;


class EmotePlayer {
  //----------------------------------------------------------------------
  // constructor & destructor

  // create new emote player target as specified canvas.
  constructor(canvas = null);

  // destroy emote player resources.
  // be sure to call this function before destroying the object.
  destroy();


  //----------------------------------------------------------------------
  // model loading

  // load emote data from url.
  // multiple arguments correspond to loading of split exported data. 
  loadDataFromURL(urls...);

  // load on memory emote dataum.
  loadData(dataum..._;

  // unload emote data
  unloadData();


  //----------------------------------------------------------------------
  // canvas management

  // change target canvas.
  canvas; 

  // when checke this property, movement of the target canvas is 
  // incorporated into the physical calculation of E-mote. 
  convolveCanvasMovementToPhysics;


  //----------------------------------------------------------------------
  // appearance

  // change drawing priority in same target canvas.
  zIndex;

  // show emote object or not.
  hide;

  // mesh division ratio for player. (0 - 1)
  meshDisivionRatio;
  
  // global alpha of drawing. (0 - 1)
  globalAlpha;

  // global color of drawing (hex format like #ffffff)
  globalColor;

  // vertex color for internal drawing
  // #808080 is neutral color.
  // when specify an color channel value larger than #80, the color gets brighter.
  vertexColor;

  // grayscale ratio for drawing. (0 - 1)
  grayscale;

  // animate global alpha with easing animation.
  setGlobalAlpha(alpha, ms = 0, easing = 0);

  // animate global color with easing animation.
  setGlobalColor(color, ms = 0, easing = 0);

  // animate vertex color with easing animation.
  setVertexColor(color, ms = 0, easing = 0);

  // animate grayscale with easing animation.
  setGrayscale(grayscale, ms = 0, easing = 0);


  //----------------------------------------------------------------------
  // transform

  // emote object coord as array format like [ 0, 0 ];
  coord;

  // emote object scale
  scale;

  // emote object rotation as radius.
  rot;

  // animate coord with easing animation.
  setCoord(x, y, ms = 0, easing = 0);

  // animate scale with easing animation.
  setScale(scale, ms = 0, easing = 0);

  // animate rotation with easing animation.
  setRot(rot, ms = 0, easing = 0);

  //----------------------------------------------------------------------
  // behaviour

  // whether animation is in progress or not.
  animating;

  // immediately stops playing animations.
  // we strongly recommend that you use the pass() function instead.
  skip();

  // Smoothly terminates playing animations.
  pass(); 

@// when check this property, the animation of E-mote becomes discrete and 
  // it will be updated only in delimited frame units. 
  stepUpdate;

  // animation playeing speed
  speed;

  // hair physics scale for this player. (0 - 1)
  hairScale;

  // parts physics scale for this player. (0 - 1)
  partsScale;

  // bust physics scale for this player. (0 - 1)
  bustScale;

  // wind speed.
  windSpeed;

  // wind minimum power
  windPowerMin;
  
  // wind maximum power
  windPowerMax;


  //----------------------------------------------------------------------
  // timelines

  // array of effective main timeline labels.
  mainTimelineLabels;

  // currently playing main timeline label.
  mainTimelineLabel;

  // array of effective diff timeline labels.
  diffTimelineLabels;
  
  // currently playing diff timeline label slots.
  diffTimelineSlot1;
  diffTimelineSlot2;
  diffTimelineSlot3;
  diffTimelineSlot4;
  diffTimelineSlot5;
  diffTimelineSlot6;

  // diff timeline slots' transition time on ms.
  diffTimelineFadeOutTime;

  // check if timline is loop timelin   
  isLoopTimeline(label);

  // check timeline total playing time in milli seconds
  getTimelineTotalMilliSeconds(label);

  // play timeline.
  playTimeline(label, flags = 0)  

  // stop timeline
  stopTimeline(label = "");

  // check if timeline is playing.
  isTimelinePlaying(label = "");

  // set timeline blend ratio.
  setTimelineBlendRatio(label, value, ms = 0, easing = 0, stopWhenBlendDone = false);

  // get timeline blend ratio
  getTimelineBlendRatio(label);

  // fade in diff timeline.
  fadeInTimeline(label, ms, easing = 0)

  // fade out diff timeline.
  fadeOutTimeline(label, ms, easing = 0) {

  // currently playing timeline information list
  playingTimelineInfoList;   


  //----------------------------------------------------------------------
  // variables

  // set emote variable with easing animation.
  setVariable(label, value, ms = 0, easing = 0);

  // get emote variable value.
  getVariable(label);

  // set emote variable difference with easing animation.
  // this function is used to add an arbitrary difference to a specific variable.
  // module is any user-defined string.
  // used for the purpose of implementing interactive character reactions such as eye tracking to the mouse.
  setVariableDiff(module, label, value, ms = 0, easing = 0);

  // get emote variable difference value.
  getVariableDiff(module, label);

  // get variable and its' frame alias list. ( use for debug purpose )
  variableList;

  //---------------------------------------------------------------------- 
  // collision 
  
  // get marker position
  // ( currently support symbol 'eye', 'mouth', 'bust', 'top', 'bottom'
  getMarkerPosition(label);

  //----------------------------------------------------------------------
  // api log

  // start record api log.
  startRecordAPILog();

  // stop record api log.
  startRecordAPILog();

  // check if recording api log.
  recordingAPILog

  // start replay api log.
  startReplayAPILog();

  // stop replay api log.
  startReplayAPILog();

  // check if replaying api log.
  replayingAPILog

  // clear api log.
  clearAPILog()

  // set/get api log string.
  apiLog

};
