Budianto Tandianus
Name

Origin
Program
Interests
E-mail

Site

: - Budianto Tandianus
-陈松生
- Eon Strife
: Indonesia
: M.Sc.(Digital Media Te...
 The

„atom‟ of computing : 0 and 1
 Computer are programmed with 0 and 1 bits


From the earliest day :

Source : http...
 Likewise,

the processed data are also in

digital

10101101 01011011 11001101 10011101
00110110 11011101 00110110 01011...
 Digital

and Analog
BEFORE

AFTER

Source : http://www.travelchinaguide.com

Source : http://photos.pcpro.co.uk
 Most

obvious examples : Game and Movies
 Online

games

Source : http://www.neoseeker.com
 Social



Media :

Instagram
I Love Coffee

Source : http://www.femalemag.com.my/
 Authoring







tools

Autodesk 3DS Max
Adobe Photoshop
Unreal Engine
Cry Engine
Etc.

Source : http://gamedesigns...
 Online



Youtube
NetFlix

 Online



video streaming

Flickr
Picasa

photo sharing
 Visual

stimuli from the display

Source : http://irieman.com/blog

Source : http://3dvision-blog.com/

Source : http://...
10101101 01011011 11001101 10011101
00110110 11011101 00110110 01011011
00011011 11011011 11110110 10000101 …
 Examples
Original

of digital image processing :
Blurred

Noisy
Image

Gray scale

Edge Detection

Denoised
Image
 How


Colour -> Grayscale




to do it ?

Y‟ = 0.212 * R + 0.7125 * G + 0.0722 * B

Image Denoising


Value of the p...
Source : http://pixlr.com/
 Video

is a sequence of images in temporal
domain

Time
 Biggest

issue in video processing is the file

size.
 One image size :


1920 * 1080 * 3 * 8 bits = 5.93 MB

 The

...
 Need

to compress !
 Common way : Discrete Cosine Transform or
Discrete Wavelength Transform
 Lossy Compression
 Basi...
 Not

a good solution if download the whole
video first before the user can watch
 Solution : streaming based
 Bytes of...
 Before

the data are „processed‟ and shown as
pixels in screen, they are still in raw format :




3D Models : polygo...
 Common


representation of 3D model :

3D mesh
vertex

face

edge



Implicit surface, e.g. :


x^2 + y^2 + z^2 = r^2
 Now

we have the 3D mesh, now how we can
see it in display ?


Answer : create a camera

Camera
3D Model
Projection
Pla...
 But

what we see is only a wireframe or only
flat color, not realistic !
 Next step : add light light source(s) and
per...
 Shading

: calculate the amount of
illumination seen for each visible point in the
scene
 The most basic :


Lambertia...


We can improve more, by considering the
illumination from all directions : Global
Illumination



A lot of algorithms ...
 So

far, the process from 3D scene -> final
image is called rendering
 But it‟s boring ! Everything is not moving !
 I...
 Done


by performing basic transformation :

E.g. rotation

 Or

animating rigged character

Source :
http://coreengin...
Post Processing : After rendering the 3D
scene, the developer might do additional image
processing on the results.
 E.g. ...
Source : http://www.awwwards.com/22experimental-webgl-demo-examples.html
Source : http://www.unrealengine.com/html5/
 All

these demos are developed using WebGL
 WebGL is an open standard for 3D rendering
API for web browser



It‟s ba...
 WebGL

compatibility list :

Source : http://caniuse.com/webgl
Digital Image Processing

2D
Image

Computer
Vision

Rendering

3D
Scene
Data

Geometry Processing
or animation
 Given

a 2D image, let the computer interpret
the 3D scene

Source : http://www.digitaltrends.com
I

know that most of you guys here are more
interested in making money

 The

question here is, how to innovatively
make...
 Is

the digital media business very gloomy in
Indonesia‟s market ?



Yeah, more or less
But there is already some int...
 Downloaded

by more than 500k iPhone users
 Top 10 in US and UK

Source : http://www.indoboom.com
Horror game developed by a team in Bandung
 Funded with IndieGoGo, a crowdfunding service
 Going to be released soon


...


Image Processing :




Rafael C. Gonzalez, Richard E. Woods. Digital Image Processing (3rd Edition), Prentice Hall 20...
 Today‟s


http://www.slideshare.net/EonStrife

 OpenGL


Presentation can be found at :
and WebGL specifications :

h...
Visual Digital Media Technology
Visual Digital Media Technology
Visual Digital Media Technology
Visual Digital Media Technology
Visual Digital Media Technology
Visual Digital Media Technology
Visual Digital Media Technology
Upcoming SlideShare
Loading in …5
×

Visual Digital Media Technology

428 views
352 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
428
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Visual Digital Media Technology

  1. 1. Budianto Tandianus
  2. 2. Name Origin Program Interests E-mail Site : - Budianto Tandianus -陈松生 - Eon Strife : Indonesia : M.Sc.(Digital Media Technology) (Full Time) PhD (Part Time) : Gaming, Computer Graphics, Music : BTANDIANUS@NTU.EDU.SG eon_strife@yahoo.com : http://www3.ntu.edu.sg/home2008/budi0010
  3. 3.  The „atom‟ of computing : 0 and 1  Computer are programmed with 0 and 1 bits  From the earliest day : Source : http://en.wikipedia.org  To today‟s programming :  printf(“hello worldn”) -> 01110101011010010101
  4. 4.  Likewise, the processed data are also in digital 10101101 01011011 11001101 10011101 00110110 11011101 00110110 01011011 00011011 11011011 11110110 10000101 …
  5. 5.  Digital and Analog
  6. 6. BEFORE AFTER Source : http://www.travelchinaguide.com Source : http://photos.pcpro.co.uk
  7. 7.  Most obvious examples : Game and Movies
  8. 8.  Online games Source : http://www.neoseeker.com
  9. 9.  Social   Media : Instagram I Love Coffee Source : http://www.femalemag.com.my/
  10. 10.  Authoring      tools Autodesk 3DS Max Adobe Photoshop Unreal Engine Cry Engine Etc. Source : http://gamedesignschools411.com
  11. 11.  Online   Youtube NetFlix  Online   video streaming Flickr Picasa photo sharing
  12. 12.  Visual stimuli from the display Source : http://irieman.com/blog Source : http://3dvision-blog.com/ Source : http://www.mobile2u.com.pk/ Source : http://www.popularmechanics.com/
  13. 13. 10101101 01011011 11001101 10011101 00110110 11011101 00110110 01011011 00011011 11011011 11110110 10000101 …
  14. 14.  Examples Original of digital image processing : Blurred Noisy Image Gray scale Edge Detection Denoised Image
  15. 15.  How  Colour -> Grayscale   to do it ? Y‟ = 0.212 * R + 0.7125 * G + 0.0722 * B Image Denoising  Value of the pixel is the average value of its value and the values of its surrounding pixels
  16. 16. Source : http://pixlr.com/
  17. 17.  Video is a sequence of images in temporal domain Time
  18. 18.  Biggest issue in video processing is the file size.  One image size :  1920 * 1080 * 3 * 8 bits = 5.93 MB  The  5.93 * 24 = 142.32 MB  And  it‟s a two-hour movie : 142.32 MB * 60 seconds * 60 minutes * 2 hours = 1 TB  And  movie is 24 Frames per second if it‟s a 3D movie, then : 1 TB * 2 eyes = 2 TB
  19. 19.  Need to compress !  Common way : Discrete Cosine Transform or Discrete Wavelength Transform  Lossy Compression  Basic philosophy :   One image has a lot of information (values) Just keep the most prominent ones
  20. 20.  Not a good solution if download the whole video first before the user can watch  Solution : streaming based  Bytes of data are transferred one by one  Advantage :  User can watch as the video is downloaded
  21. 21.  Before the data are „processed‟ and shown as pixels in screen, they are still in raw format :    3D Models : polygons, vertices Light sources : point light, directional light, area light, spotlight, etc. Camera : to enable us to see scene
  22. 22.  Common  representation of 3D model : 3D mesh vertex face edge  Implicit surface, e.g. :  x^2 + y^2 + z^2 = r^2
  23. 23.  Now we have the 3D mesh, now how we can see it in display ?  Answer : create a camera Camera 3D Model Projection Plane
  24. 24.  But what we see is only a wireframe or only flat color, not realistic !  Next step : add light light source(s) and perform shading
  25. 25.  Shading : calculate the amount of illumination seen for each visible point in the scene  The most basic :  Lambertian, assume the light is reflected equally to all directions, and it‟s proportional to the angle between the surface normal and direction to the light source: L . N
  26. 26.  We can improve more, by considering the illumination from all directions : Global Illumination  A lot of algorithms :       Distributed Ray Tracing Path Tracing Bidirectional Path Tracing Metropolis Light Transport Photon mapping Etc.
  27. 27.  So far, the process from 3D scene -> final image is called rendering  But it‟s boring ! Everything is not moving !  Intermediate step : Animation
  28. 28.  Done  by performing basic transformation : E.g. rotation  Or animating rigged character Source : http://coreenginedev.blogspot.com
  29. 29. Post Processing : After rendering the 3D scene, the developer might do additional image processing on the results.  E.g. :  Source : http://udn.epicgames.com
  30. 30. Source : http://www.awwwards.com/22experimental-webgl-demo-examples.html
  31. 31. Source : http://www.unrealengine.com/html5/
  32. 32.  All these demos are developed using WebGL  WebGL is an open standard for 3D rendering API for web browser   It‟s based on OpenGL, which is much more powerful Many of PC games you‟ve played might be developed using OpenGL !  WebGL extends javascript  Can run in a lot of web browser  Including web browser of tablets, but they are still struggling
  33. 33.  WebGL compatibility list : Source : http://caniuse.com/webgl
  34. 34. Digital Image Processing 2D Image Computer Vision Rendering 3D Scene Data Geometry Processing or animation
  35. 35.  Given a 2D image, let the computer interpret the 3D scene Source : http://www.digitaltrends.com
  36. 36. I know that most of you guys here are more interested in making money  The question here is, how to innovatively make use of these technologies, how to commercialize the project
  37. 37.  Is the digital media business very gloomy in Indonesia‟s market ?   Yeah, more or less But there is already some interesting development !
  38. 38.  Downloaded by more than 500k iPhone users  Top 10 in US and UK Source : http://www.indoboom.com
  39. 39. Horror game developed by a team in Bandung  Funded with IndieGoGo, a crowdfunding service  Going to be released soon  Source : http://www.indiegogo.com
  40. 40.  Image Processing :   Rafael C. Gonzalez, Richard E. Woods. Digital Image Processing (3rd Edition), Prentice Hall 2007 Rendering :    Donald D. Hearn, M. Pauline Baker, Warren Carithers. Computer Graphics with Open GL (4th Edition), Prentice Hall 2010 Matt Pharr, Greg Humphreys. Physically Based Rendering (2nd Edition) : From Theory to Implementation, Morgan Kaufmann 2010. Animation :   Rick Parent. Computer Animation, Third Edition: Algorithm and Techniques. Morgan Kaufmann 2012. Computer Vision :    Richard O. Duda, Pattern Classification (2nd Edition), Wiley-Interscience 2004. David A. Forsyth and Jean Ponce. Computer Vision: A Modern Approach (2 nd Edition), Prentice Hall 2011. OpenGL :    Graham Sellers, Richard S. Wright, Nicholas Haemel. OpenGL SuperBible: Comprehensive Tutorial and Reference (6th Edition), Addison-Wesley 2013. Dave Shreiner, Graham Sellers, John M. Kessenich, Bill M. Licea-Kane. OpenGL Programming Guide: The Official Guide to Learning OpenGL Version 4.3 (8th edition), Addison-Wesley 2013. WebGL :  Kouichi Matsuda, Rodge Lea. WebGL Programming Guide: Interactive 3D Graphics Programming with WebGL, Addison-Wesley 2013.
  41. 41.  Today‟s  http://www.slideshare.net/EonStrife  OpenGL  Presentation can be found at : and WebGL specifications : http://www.khronos.org/

×