Web-based multiplex image synthesis for digital signage Yoshiki Fujisawa, Hisataka Suzuki, Rex HSIEH, Akihiko Shirai ShiraiLab, Kanagawa Institute of Technology, Japan (Presentation in IWAIT2017) See ExPixel demo: https://playcanv.as/p/sipfSQO4/ ExPixel project details: http://www.shirai.la/project/expixel publication: http://blog.shirai.la/publications/

1. Web-based multiplex image synthesis
for digital signage
Yoshiki Fujisawa 1 – Hisataka Suzuki 1 – Rex HSIEH 1 – Akihiko Shirai 1
1ShiraiLab, Kanagawa Institute of Technology, Japan

2. * Digital signage is used advertising media in the public.
1
* Digital signage shows important information in the public.
However it can’t show multiple language at same time.
* Digital signage contents must be update.
Ø Some supplemental Japanese texts are shown in this presentation to tell the concept of our research…
Motivation

3. History of Multiplex imagery in ShiraiLab
* Scritter (Projector-based)
* “Scritter” (use 2filters)
* “ScritterH” (use 1filter)
* “2x3D”(2D+3D Hybrid)
* ExPixel (3DFlat panel + Polarized lens)
* “ExPixel”
* “FPGA” (hardware include ExPixel)
* ExField (Flat panel + Lenticular lens)
* “ExField”
1st Gen &
2nd Gen:
DMD
Projectors
3rd Gen: LCD Projector
4th Gen:
Flat Panel
5th Gen:
Glassless-AR
Public Vision
Challenge : more useful, easier to use
Generation Project Name
2010
2013
2015

4. ExPixel for digital signage + Manga Generator

5. ExField / SSSD : Spatial Augmented Reality in the public

6. * Does public signage allow the glasses?
1
* Is the appearing language readable for the targeted users?
If the sign shows multi language, It must be compressed time and /or space for each
language.
* Digital signage contents must be updated for many terminal devices simultaneously,
because its contents are dynamic thing like traffic or stock market.
Issue of current multiplex for signage

7. 5
* The public signage needs 5th gen grassless multiplex imagery technology.
* Technology which can show a full screen information for each language
without any time and/or space compression.
* Technology which can distribute and update multiplex contents simply.
Solutions of my idea

8. Algorithm of ExPixel
With a circular
polarization filter
Contrast compression(1)
(2)
(3)
Inversed gamma correction
Even odd selection

9. Algorithm of ExFiled

10. 5
* The public signage needs 5th gen grassless multiplex imagery technology.
* Technology which can show a full screen information for each language
without any time and/or space compression.
* Technology which can distribute and update multiplex contents simply.
Solutions of my idea

11. * Develop multiplex image by PlayCanvas.
PlayCanvas
* PlayCanvas is public web-based
game engine.
PlayCanvas
* It uses JavaScript and 2 GLSL shaders
in PlayCanvas
JavaScript GLSL 2
implementation
Original image
PlayCanvas
JavaScript
GLSL
shader
GLSL
shader
Multiplex image

12. * PlayCanvas is a HTML5/WebGL based game engine
* It has GUI editor like Unity
* Running on several Internet browser
* Contents are published on server
* player need an URL to play any contents powered by PlayCanvas
What is PlayCanvas?
PlayCanvas HTML5/WebGL
Unity GUI
URL

13. Implementation of ExPixel (4th Gen)
for PlayCanvas
* Javascript code takes input images and shader code
* Contrast compression, output line-by-line.
PlayCanvasJava Script
Texture Asset
Texture Asset
Original Image
Shader Asset
Shader Asset
Fragment
Shader
Vertex
Shader
Contrast compression
Even odd selection
On display

14. * Mitsubishi : Diamondcrysta RDT234WX-3D
Result of Web-based ExPixel (4th Gen)
* TOSHIBA : REGZA-42Z8
Naked eye Polarized filter
Naked eye Polarized filter

15. PlayCanvas
Java Script
Texture Asset
Texture Asset
Original Image
Shader Asset
Shader Asset
Fragment
Shader
Vertex
Shader
Even odd selection
On display
* Javascript code takes input images and shader code
* Fragment shader processing each pixels color, and output
Implementation of ExField (5th Gen)
for PlayCanvas
AAA
BBB

16. Implementation of ExFiled (5th Gen)
for PlayCanvas
!"#$%"&'() +,&- Pitch H =
567879:; <=9> ?7@AB(5)
EFG (HIJK)
(1)
'LM N =
O
3
−
R
tan U
+ ! ×100 ZL"[!
!
(2)
'ℎ#,-ℎ"^)[ ∶ 'LM`
a
b$O,)c")"#(d,f) (b(d,f))
b d,f =
c(1)(d,f) (0 ≤ N ≤
1
&
)
c(2) d,f (
1
&
≤ N ≤
2
&
)
⋮
c(& − 1)(d,f) (
& − 2
&
≤ N ≤
& − 1
&
)
c(&)(d,f) ("'ℎ,#i$-,)
(3)
∗ N,O'^#,c")"#1 d,f = c(1)(d,f)
JavaScript : (1),(2)
Fragment Shader : (3)
Please refer paper: Hisataka SUZUKI, Akihiko SHIRAI, Kazuhisa YANAKA,
Glassless Augmented Display for Public Signage, The International Journal of Virtual Reality, 2016, 16 (01): pp. 1-6
http://www.ijvr.org/web/search/singleArticle/307

17. * IODATA : LCD-M4K282XB
Result of Web-based ExField (5th Gen)
* Alioscopy : Alioscopy 3D HD 24” LV
In front of display
Left side of display Right side of display
In front of display
Left side of display Right side of display
Angle range 20-30 degrees in horizontal Angle range 2-3 degrees in horizontal

18. * Show this technology with original signage and 3D display product (Alioscopy)
3D
* Original display and poster show multiple images as advertising signage.
Public Event : DCEXPO2016
2016/10/27~30
Poster for original signage Left : original signage Right : Alioscopy

19. Video (URL : https://youtu.be/-cr3g6ejshg)

20. * ExPixel demo talked in IWAIT2017
Test of Web-based ExPixel
URL : https://playcanv.as/p/sipfSQO4/

21. * ExField demo talked in IWAIT2017
Result of Web-based ExField
URL : https:playcanv.as/b/GoQpn3se/

22. Results
ExPixel ExField
* Implemented as a browser app which has an united engine both of ExPixel and ExField.
Alioscopy
* It is possible to show 3 channels for 8 audiences in maximum using Alioscopy’s
auto-stereoscopic product in actual condition.
URL
* It is possible to create user’s contents on PlayCanvas editor, and it can be possible to
distribute and update via one URL. (https://playcanv.as/p/sipfSQO4/)

23. Give us feedback please!
ExField@shirai.la
Web-based multiplex image synthesis for
digital signage
Yoshiki Fujisawa 1 – Hisataka Suzuki 1 – Rex HSIEH 1 – Akihiko Shirai 1
Affiliation: 1ShiraiLab, Kanagawa Institute of Technology
http://www.shirai.la/project/expixel