Web-based multiplex image synthesisfor digital signage

Yoshiki Fujisawa 1 – Hisataka Suzuki 1 – Rex HSIEH 1 – Akihiko Shirai 1

1ShiraiLab, Kanagawa Institute of Technology, Japan

ÖËÐèȼÚî˨��X�¢0"£�¡�M�µ¡�´

* Digital signage is used advertising media in the public.

ȼÚî˨��¦~m¥7'¸hV�¡�´���A¦1 §ps��hV¢�¥�* Digital signage shows important information in the public.

However it can’t show multiple language at same time.

ÖËÐèȼÚî˧ÇìÕìÔ¨B>�5m¢�´

* Digital signage contents must be update.

Ø Some supplemental Japanese texts are shown in this presentation to tell the concept of our research…

Motivation

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-ARPublic Vision

Challenge : more useful, easier to use

Generation Project Name2010

2013

2015

ExPixel for digital signage + Manga Generator

ExField / SSSD : Spatial Augmented Reality in the public

)~�:g¨{��¡�¡�´��ÜßçÓÃ!�ȼÚî˦¨S�¨5mö

* Does public signage allow the glasses?

ȼÚî˧hV�¡�´7'�7'��a�t®´ps¢�´§�ö)ps¸�A¦hV�±�£�´£�1 ��³§ps§A�°X�¸K.��´* 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.

ÖËÐèȼÚî˧ÇìÕìÔ¨�y7'°H�§±�¦�Q¢���³�)=§È¼ÚîËZF¦�A¦ÇìÕìÔB>¸}��´5m��´�

* 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

ÜßçÓÃ!�ȼÚî˦¨[5�§jS)~�@�:g�E3�µ´* The public signage needs 5th gen grassless multiplex imagery technology.

hV¿çº¸K²��¦�A¦�µ�µ§ps¸ÞèÌÃçîì¢hV�´�£¢A�£X�¸K.��¥�:g

* Technology which can show a full screen information for each language without any time and/or space compression.

)~�ȼÚî˧ÇìÕìÔ§ÚÓ×ëîÃB>¸9w¦f�:g

* Technology which can distribute and update multiplex contents simply.

Solutions of my idea

Algorithm of ExPixel

With a circular polarization filter

Contrast compression(1)

(2)

(3)

Inversed gamma correction

Even odd selection

Algorithm of ExFiled

ÜßçÓÃ!�ȼÚî˦¨[5�§jS)~�@�:g�E3�µ´* The public signage needs 5th gen grassless multiplex imagery technology.

hV¿çº¸K²��¦�A¦�µ�µ§ps¸ÞèÌÃçîì¢hV�´�£¢A�£X�¸K.��¥�:g

* Technology which can show a full screen information for each language without any time and/or space compression.

)~�ȼÚî˧ÇìÕìÔ§ÚÓ×ëîÃB>¸9w¦f�:g

* Technology which can distribute and update multiplex contents simply.

Solutions of my idea

* Develop multiplex image by PlayCanvas.)~�@�§+i¦¨PlayCanvas¸�M�´

* PlayCanvas is public web-based game engine.

PlayCanvas¨�2§½¾ßáîÌÆîâ¿ìËì¢�´

* It uses JavaScript and 2 GLSL shadersin PlayCanvas

JavaScript£GLSLʾîѸ2 �M�´

implementation

Original image

PlayCanvas

JavaScript GLSL shader

GLSL shader

Multiplex image

* 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¿Ö»Ðî��´

I�¥¼ìÐîÚÓ×ßæ½Éî¢���´

ÇìÕìÔ¨ÈîÛî¸��¡���µ´

URL��µ©��«¬�

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

* Mitsubishi : Diamondcrysta RDT234WX-3D

Result of Web-based ExPixel (4th Gen)

* TOSHIBA : REGZA-42Z8 Naked eye Polarized filter

Naked eye Polarized filter

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

Implementation of ExFiled (5th Gen)for PlayCanvas

!"#$%"&'()+,&-Pitch H = 567879:;<=9>?7@AB(5)

EFG(HIJK)(1)

'LM N =

O3 −

Rtan 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-6http://www.ijvr.org/web/search/singleArticle/307

* 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

* Show this technology with original signage and 3D display product (Alioscopy) ÀçËÙèȼÚîË£3Dk#¸¯��¡/V¸f��* Original display and poster show multiple images as advertising signage.

Public Event : DCEXPO20162016/10/27~30

Poster for original signage Left : original signage Right : Alioscopy

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

* ExPixel demo talked in IWAIT2017

Test of Web-based ExPixel

URL : https://playcanv.as/p/sipfSQO4/

* ExField demo talked in IWAIT2017

Result of Web-based ExField

URL : https:playcanv.as/b/GoQpn3se/

Results

[ó�ExPixel£[ô�ExField¸�y§¿ìËì¢ßæ½É�¦+i��* Implemented as a browser app which has an united engine both of ExPixel and ExField.

AlioscopyWk§Y�Ö»Ìàé¼k#¢C*òÒäìÚèõ §hV��b£¥��* It is possible to show 3 channels for 8 audiences in maximum using Alioscopy’s

auto-stereoscopic product in actual condition.

ßæ½É�§¿Ö»Ðî¢ÇìÕìÔ¸_���URL¸}�íB>��b¦¥��* 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/)

Give us feedback please!ExField@shirai.la

Web-based multiplex image synthesis fordigital 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