Professional Documents
Culture Documents
Tdc2014 Tizen 3d Ui Dali
Tdc2014 Tizen 3d Ui Dali
DALi 3D Engine
building exciting
User Interfaces
Kimmo Hoikka
Samsung
Introduction
Introduction
Kimmo Hoikka
Introduction
Tizen 3D UI
DALi is a 3D Engine
System Architecture
DALi is part of the Tizen
Native Framework
Implemented in C++
DALi (Dynamic Animation Library)
Architecture
Architecture
Core Library
Threading model
Integration with the main loop
Platform abstraction
Toolkit
Core
Adaptor
Actors
Animation
Dynamics
Math
Effects
Events
UI Controls
Event
Loop
Window
Effects
Sensors
Sound /
Haptic
Scripting
Support
Adaptor
Dali
Toolkit
Reusable UI controls,
Effects and Scripting support
Scene
Graph
Rendering
Platform Abstraction
Platform
OpenGL
Native Windowing
/ EGL
Threading
Resouce
Loading
Dali
Module
Required
Module
Uses
3D Scene Graph
Root
Position,
Rotation
Scale
Node
Position,
Rotation
Scale
Node
Position,
Rotation
Scale
Node
Node
Node
Node
Position,
Rotation
Scale
Position,
Rotation
Scale
Position,
Rotation
Scale
Position,
Rotation
Scale
Multithreaded Engine
Update
Thread
Render
Thread
Resource
Threads
Render Thread
Event
Thread
Update Thread
Event Thread
Application Process
Resource Threads
Process
Thread
Inter-thread
communication
3D Core library
Animation framework
Event & gesture handling
Rendering of the 3D scene
Physics plug-in API
Actors
Animation
Alpha-functions, Constraint
Key Frames
Common
Stage, Light
Dynamics
Body, Collision, Joint
Shape, World
Geometry
Images
Math
Mesh, Spline,
Animated-mesh/vertex,
Bitmap, Distance-field,
Frame buffer, Native
Matrix, Quaternion,
Radian, Vector, Rect
Modeling
Bone, Entity,
Material, Model-animation
10
Render-tasks
Shader-effects
Text
Uniform animation
Font, Text-Style
3D Toolkit library
JSON Builder
Controls
Scroll-view
Image-view
Masked-image
Button
Check-box, Push
JSON Builder
11
Motion blur,
Gaussian-blur,
Super-blur-view
Scroll-group, Scroll-view-effect
Carousel-effect, Cube-effect, Depth-effect
Slide-effect, Twist-effect, Wobble-effect
Item-view
Item-factory, Item-layout
Album-layout, Depth-layout, Grid-layout
Roll-layout, Spiral-layout
Focus-manager
Table-View
Text-Input
Slider
Effect-view
Markup-processor
Text-View
Popup
Magnifier
Shadow-view
Adaptor libraries
Provides integration into the native windowing system: EFL, X11, Wayland
Platform Abstraction
Data-cache
Plug-ins
Common
Accessibility, Clipboard, Device-layout, Timer, Drag-and-drop, Haptic player,
Orientation, Pixmap-image, Render-surface, Sound-player, Style, Tilt sensor,
Tts-player, Virtual keyboard, Window,
Dynamics
Glyph loading
Ecore-x
Resource loaders
12
Feedback
Window surface,
Pixmap surface,
NativeBuffer surface
(Bullet)
Events
Event handler,
Gesture detector
Open GL / EGL
abstraction
Model load
(Assimp)
APIs: C++
Applications can be developed in C++
// C++
Dali::ImageActor imageActor = Dali::ImageActor::New( Dali::Image::New( "/photos/background.jpg" ) );
imageActor.SetParentOrigin( Dali::ParentOrigin::CENTER );
imageActor.SetAnchorPoint( Dali::AnchorPoint::CENTER );
Dali::Stage::GetCurrent().Add( imageActor );
...
bool onPressed( Dali::Actor, const TouchEvent& event )
{
Dali::Animation anim = Dali::Animation::New( 1.5f );
anim.MoveTo( actor, Vector3( 200,-100,0), AlphaFunctions::Bounce );
anim.play();
return true; // consume the touch event
}
...
imageActor.TouchedSignal().Connect( &onPressed );
13
APIs: JavaScript
Applications can be developed in JavaScript (*)
// JavaScript
var imageActor = new dali.ImageActor( new dali.Image( "/photos/background.jpg" ) );
imageActor.parentOrigin = dali.CENTER;
imageActor.anchorPoint = dali.CENTER;
dali.stage.add( myImageActor );
...
function onPressed( actor, touchEvent )
{
var animOptions = { alpha: "bounce", delay: 0, duration: 15 };
var anim = new dali.Animation();
anim.animateTo( actor, "position", [ 200,-100,0], animOptions );
anim.play();
return true; // consume the touch event
}
...
imageActor.connect( "touched", onPressed );
APIs: JSON
Application UI layout and interaction can also be described in
JSON
// JSON
"animations":
{
"move-image":
{
"duration": 1.5,
"properties":
[
{
"actor":"image",
"property":"position",
"value":[200,-100,0],
"alpha-function": "BOUNCE",
}
]
}
}
15
"stage":
[
{
"name":"image",
"type":"ImageActor",
"image":
{
"filename":/photos/background.jpg"
},
"signals" :
[
{ "name" : "touched", "action": "play",
"animation": "move-image" }
],
}
]
}
Features
Image, Text and Mesh Actors are the Building Blocks (*)
17
Features: Animation
Property animation
18
Model animation
Constraint
Property notification
19
Dissolve Effect
Bubble Effect
Features: Effects
Image effects
Effect containers
Bloom effect
Gaussian Blur
Super blur
Shadow View
Effect View
Shadow View
Bubble effect
Motion blur effect
Motion Blur Effect
21
Features: ItemView
ItemView
22
Features: ScrollView
ScrollView
23
Actor has dynamics API to set properties for the physics simulation
Actor::EnableDynamics()
The actor will behave as a rigid/soft body in the simulation
Stage::InitializeDynamics()
Initialize the dynamics world and enable simulation
25
Features: Video
26
27
Outputs a JSON file that DALi-launcher can run or C++ application can load
Run with
Dali-launcher
Output a Script
28
JSON
Retrieve
contacts
Run
C++ Application
Load template(s)
to use, apply data
Export Template(s)
JSON
Loaded at Runtime
29
30
Playback
Controls
Movable
playback head
Properties being
Animated
31
Working area
(Direct
Manipulation)
Timeline
Easing
Functions
32
What next?
Get the code:
Play with it
Contribute
33
Thank You!!
Contact: kimmo <dot> hoikka <at> samsung <dot> com