=Paper=
{{Paper
|id=None
|storemode=property
|title=Filter and Mobile Oh My!
|pdfUrl=https://ceur-ws.org/Vol-869/Dec3D2012_LT_01.pdf
|volume=Vol-869
}}
==Filter and Mobile Oh My!==
https://ceur-ws.org/Vol-869/Dec3D2012_LT_01.pdf
Slides, Filters and Mobile Oh My!
(Demonstrations of HTML and Declarative 3D Integration)
Sandy Ressler
sressler@nist.gov
National Institute of Standards and Technology
Gaithersburg MD 20899
ABSTRACT web pages. Upon discovering this suite, naturally the question was
This paper describes a set of demonstrations that illustrate some of can Web3D graphics be embedded into those types of slide show
the advantages of declarative 3D. Putting descriptions of 3D pages? The short answer is yes and this demo illustrates the
geometry directly into the DOM structure of a web document results of this test.
offers content creators the ability to use the rich infrastructure that
already exists for the development and deployment of web pages.
The three demonstrations illustrate the use of 3D in the context of
a slide show (HTML as slide show substitute), of new CSS3
filtering capabilities, and finally the use of jQuery mobile to
provide a user interface framework around pages containing 3D
graphics.
Categories and Subject Descriptors
H.5.3 [Information Interfaces and Presentation]: Group and
Organization Interfaces – Web-based interaction.
General Terms
Documentation, Design, Human Factors, Standardization,
Languages.
Keywords
Web3D, declarative 3D, X3D. Figure 1. Overview of HTML "slideshow"
1. INTRODUCTION
A collection of three demonstrations is described in this short
paper. Each of the demos highlights an aspect of declarative 3D.
Placing 3D geometry directly into the DOM of web pages allows
content developers to leverage the rich infrastructure that already
exists for the development and deployment of web pages. Each of
these examples may be viewed live on the web (URLs are listed in
the descriptions). The three demonstrations cover the usage of
declarative 3D in the context of 1) a slide show, 2) integrated with
CSS content filtering and 3) integrated with jQuery mobile, a
JavaScript framework for mobile devices. These particular
demonstrations use X3DOM[1], however, the principles are
generalizable to any declarative 3D technology.
2. Deck.js
URL: math.nist.gov/~SRessler/deckjs/introduction/index2x3d.html
Deck.js [2] is a clever little JavaScript framework that enables Figure 2. Slide with embedded 3D content
users to create slideshows within the context of a web browser.
Simply code up your slides and present your show via a set of
3. CSS3 Content Filtering
URL: math.nist.gov/~SRessler/x3dom/CSS3-Content-Filter/index.html
Copyright 2012 for the individual papers by the papers’ authors. The new version of CSS3 offers the ability to filter content based
Copying permitted only for private and academic purposes. This volume on the class attribute of an element. In this example, modeled after
is published and copyrighted by its editors. Gupta[3], the actual filtering is via “negation pseudo-class”
Dec3D2012 workshop at WWW2012, Lyon, France
combined with the class attibute. In code it looks like:
a[class=”threed”]:focus ~ div:not( [class=”threed”])
{
height:0px; width:0px; border: none; margin:0;
}
Figure 3. HTML page with content types including embedded
3D Figure 4. jQuery mobile index page
4. jQuery mobile
URL: math.nist.gov/~SRessler/x3dom/jqmobile.html
jQuery mobile [4] is “A unified, HTML5-based user interface
system for all popular mobile device platforms, built on the rock-
solid jQuery and jQuery UI foundation.” This demonstration was
created to see if the jQuery mobile framework could in fact work
with pages that have declarative 3D embedded in the page. As the
demo illustrates the answer is yes, however, there were issues
initially. On first loading the slideshow the 3D content displayed
once and then disappeared. It turns out that, perhaps due to a
peculiarity of X3DOM or the peculiarities of the browser
(Chrome in this case), the graphics much be cached and remain in
the cache. Fortunately jQuery mobile has a function to “pre-
cache” page content and this solved the problem.
Figure 5. jQuery mobile 3D content page with active buttons
5. REFERENCES
[1] Johannes Behr , Peter Eschler , Yvonne Jung , Michael
Zöllner, X3DOM: a DOM-based HTML5/X3D integration
DISCLAIMER: Please note that mention of any commercial model, Proceedings of the 14th International Conference on
products, companies and technologies does not constitute an 3D Web Technology, June 16-17, 2009, Darmstadt,
endorsement by NIST. Germany [doi>10.1145/1559764.1559784]
[2] Deck.js http://imakewebthings.github.com/deck.js/
[3] Gupta, http://www.priteshgupta.com/2011/12/css3-content-
filter-using-negation-pseudo-class/
[4] jQuery mobile, http://jquerymobile.com