Web360² (Vue.js edition)

What is Web360²?

Web360² is an application that plays 360-degree video and object-based 3D sounds interactively on the Web.

This repository is a revised version of sdm-wg/web360square.

Author:

• Shin Kato

Contributors:

• Tomohiro Ikeda
• Mitsuaki Kawamorita
• Manabu Tsukada
• Hiroshi Esaki

Citing Web360²:

• Shin Kato, Tomohiro Ikeda, Mitsuaki Kawamorita, Manabu Tsukada, Hiroshi Esaki, "Web360²: An Interactive Web Application for viewing 3D Audio-visual Contents", 17th Sound and Music Computing Conference (SMC), pp. 32-39, Torino, Italy, 2020.

  @inproceedings{Kato2020,
     title = {Web360^{2}: An Interactive Web Application for viewing 3D Audio-visual Contents},
     author = {Shin Kato and Tomohiro Ikeda and Mitsuaki Kawamorita and Manabu Tsukada and Hiroshi Esaki},
     url = {https://zenodo.org/record/3898664/files/SMCCIM_2020_paper_102.pdf},
     doi = {10.5281/zenodo.3898664},
     year = {2020},
     booktitle = {17th Sound and Music Computing Conference (SMC)},
     pages = {32-39},
     address = {Torino, Italy},
  }
  

• or Japanese version in DCC23

Usage

1. Access Web360² (GitHub Pages hosted from this repository)

   

2. Select an event

   

3. Enjoy watching

   

   

   

• Change viewpoints (beta feature)

  

  

Integration with SDM Ontology

Web360² integrates with SDM Ontology, an ontology for the multi-media domain that models the workflow from recording to consumption.

This application uses an SDM Ontology-based linked open data (LOD): fetching event information and viewer data (contents URL, media start/end time, recorder coordinates, and ...).

SPARQL query

Fetch event information

Search from the sdmo:Player class instance and fetch event information.

• yellow: the nodes and properties traced during the search
• blue: the information acquired as the result

PREFIX sdm: <http://sdm.hongo.wide.ad.jp/resource/>
PREFIX sdmo: <http://sdm.hongo.wide.ad.jp/sdmo/>
PREFIX schema: <http://schema.org/>

SELECT DISTINCT ?event ?eventName ?eventDate ?eventPlaceName ?eventPlaceAddress WHERE {
  VALUES ?playerClass {sdmo:Player sdmo:DataPlayer sdmo:AudioPlayer sdmo:VideoPlayer sdmo:CompositePlayer}
  ?player
    a ?playerClass ;
    schema:name "Web360Square" ;
    sdmo:plays ?event .
  ?event
    a sdmo:SDMEvent ;
    schema:name ?eventName ;
    schema:startDate ?eventDate ;
    schema:contentLocation ?eventPlace .
  ?eventPlace
    a schema:Place ;
    schema:name ?eventPlaceName ;
    schema:address ?eventPlaceAddress .
}

Fetch viewer data

Search from the sdmo:Player class instance and fetch viewer data.

• yellow: the nodes and properties traced during the search
• red: trace only if the node or property exists
• blue: the information acquired as the result

PREFIX sdm: <http://sdm.hongo.wide.ad.jp/resource/>
PREFIX sdmo: <http://sdm.hongo.wide.ad.jp/sdmo/>
PREFIX geom: <http://data.ign.fr/def/geometrie#>
PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#>
PREFIX schema: <http://schema.org/>

SELECT DISTINCT ?playerClass ?contentUrl ?eventTime ?viewLabel ?startAt ?endAt ?x ?y ?z ?eulerDegX ?eulerDegY ?eulerDegZ ?eulerOrder WHERE {
  ?player
    a ?playerClass ;
    schema:name "Web360Square" ;
    # `eventId` is a JavaScript variable!
    sdmo:plays sdm:${eventId} ;
    sdmo:inputFrom ?appMedia.
  VALUES ?appMediaClass {sdmo:Media sdmo:DataMedia sdmo:AudioMedia sdmo:VideoMedia sdmo:CompositeMedia}
  ?appMedia
    a ?appMediaClass ;
    schema:contentUrl ?contentUrl ;
    sdmo:inputFrom ?processor .
  VALUES ?plocessorClass {sdmo:Processor sdmo:Generator sdmo:Converter sdmo:Analyzer sdmo:CompositeProcessor}
  ?processor
    a ?plocessorClass ;
    sdmo:inputFrom ?originalMedia .
  OPTIONAL {
    ?appMedia
      sdmo:hasMediaEvent ?mediaEvent .
    ?mediaEvent
      a sdmo:MediaEvent ;
      sdmo:hasMedia ?originalMedia ;
      sdmo:eventTime ?eventTime .
  }
  VALUES ?originalMediaClass {sdmo:Media sdmo:DataMedia sdmo:AudioMedia sdmo:VideoMedia sdmo:CompositeMedia}
  ?originalMedia
    a ?originalMediaClass ;
    sdmo:inputFrom ?recorder ;
    sdmo:startAt ?startAt ;
    sdmo:endAt ?endAt .
  OPTIONAL {
    ?originalMedia
      rdfs:label ?viewLabel .
  }
  VALUES ?recorderClass {sdmo:Recorder sdmo:DataRecorder sdmo:AudioRecorder sdmo:VideoRecorder sdmo:CompositeRecorder}
  ?recorder
    a ?recorderClass ;
    sdmo:geometryAt ?geometry .
  ?geometry
    a sdmo:Geometry ;
    geom:coordX ?x ;
    geom:coordY ?y ;
    geom:coordZ ?z .
  OPTIONAL {
    ?geometry
      sdmo:eulerDegX ?eulerDegX ;
      sdmo:eulerDegY ?eulerDegY ;
      sdmo:eulerDegZ ?eulerDegZ ;
      sdmo:eulerOrder ?eulerOrder .
  }
}

Project setup

yarn install

Compiles and hot-reloads for development

yarn serve

Compiles and minifies for production

yarn build

Run your unit tests

yarn test:unit

Lints and fixes files

yarn lint

Deploy to GitHub Pages

yarn deploy

Customize configuration

See Configuration Reference.