Use Cases and Requirements

From Declarative 3D for the Web Architecture

This document describes use cases and requirements for the development of the Declarative 3D for the Web Architecture specification.

Introduction

The mission of the Declarative 3D for the Web Architecture Community Group is to find an easy way to add interactive high-level declarative 3D objects to the HTML-DOM to allow anyone to easily create, share, and experience interactive 3D graphics.

This document presents the major use cases where embedding 3D data in HTML using declarative approach provides significant benefit. Each use case explores how publishers and consumers benefit from D3D (can we refer to D3D as to a syntax that expresses 3D data in HTML – subset of X3D). From these use cases, we deduct the different required dimensions for the D3D specification.

This document reviews use cases and requirements for Declarative 3D for the Web with the following structure:

  • The remainder of this section motivates why Declarative 3D for the Web is necessary and needed, it highlights the importance of a standard; then it introduces actors of the use cases, and provides a brief overview of the use cases and requirements.
  • In the next section D3D use cases are reviewed.
  • The last section discusses requirements regarding Declarative 3D for the Web, driven by an analysis of the aforementioned use cases.

Why should we embed 3D data in HTML using declarative approach?

Why declarative approach? Why is it better than WebGL?

Why do we need a standard?

What are the reasons for a standard? E.g., a web-page in HTML with 3D graphics declared in it can be viewed by different Web browsers from different vendors.

Actors

In this document, we consider Publishers and Users. For simplicity, we give our fictitious users first names whose first letter matches their role: Paul, Peter, Patrick and Penny are publishers; Ula and Ulrich are users.

  • Paul – math teacher running MathBlog – a blog dedicated to promoting the beauty of Mathematics; knows basic HTML;
  • Peter – scientist who writes web-based articles on his website BioScienceSite, where he discusses proteins, genes, etc; knows HTML and is experienced in using 3D modeling software (Blender, 3DS Max);
  • Patrick – professional web developer working for DevMasters; he has good knowledge of HTML, CSS, JavaScript; currently working on VirtualMuseum and CarConfigurator projects;
  • Penny – museum curator, working with Patrick on a virtual museum exhibition called VirtualMuseum; she has good knowledge of 3D scanning technologies.
  • Ula and Ulrich are typical Internet users; they have good understanding of hypertext-based Web interaction; Ula is an accountant and has little experience with 3D graphics; Ulrich is a math and biology student, who occasionally plays 3D games.

An Overview of the Use Cases

MathBlog:

BioScienceSite:

  • Use Case UC201: BioScienceSite – Reusing existing 3D data
  • Use Case UC202: BioScienceSite – Enabling labeling of 3D data

VirtualMuseum:

  • Use Case UC301: VirtualMuseum – Using 3D geometries produced by 3D scanning
  • Use Case UC302: VirtualMuseum – Enabling walking-type navigation
  • Use Case UC303: VirtualMuseum – Enabling facet-like navigation

CarConfigurator:

  • Use Case UC401: CarConfigurator – Using 3D geometries exported from CAD software
  • Use Case UC402: CarConfigurator – Enabling animation

An Overview of the Requirements

Syntax Requirements:

  • Requirement SR01: Simple D3D Syntax
  • Requirement SR02: The D3D specification shall be authored using XML

DOM Requirements:

  • Requirement DR01: DOM document hierarchy should reflect the scene-graph hierarchy

Scene Graph Requirements:

  • Requirement SGR01: Grouping & Transformations

Interaction Requirements:

  • Requirement IR01: Navigation – supporting the task of moving user's viewpoint through an environment
  • Requirement IR02: Selection – supporting the task of choosing an object
  • Requirement IR03: Manipulation – supporting the task of specifying object's position, orientation and scale

Use Cases

In which situations do users need Declarative 3D? This section explains the types of user interactions with 3D Web resources that D3D will enable. For each type it shows how D3D can improve the usefulness, usability, and functionality of online content.

Use Case Description UCD1: MathBlog

Paul is a crazy about math. Loves to put equations and 3D surfaces into everything he creates. The popular math blog (SurfaceShmurface.com) is a hit with students of all ages. He needs a simple method to define the surface and to allow his readers to manipulate those same surfaces. He's also convinced that he must include these surfaces in his blog such that anyone with a standard web browser can interact with his surfaces.

Use Case UC101: MathBlog – Adding basic 3D geometry to a post

Paul maintains a math blog and wishes to enrich his new post about geometric figures with the 3D representations of those figures. For this purpose, he chooses to use shape nodes and declare them in the HTML.

Authoring the web site

Paul's starting HTML (before declaring 3D) is:

<html>
    <head><title>Paul's Blog</title></head>
    <body>
    ...
    <div id="Post2011-07-21">
        <h2>Geometric Figures</h2>
        <p>
            The cube is a three-dimensional solid object bounded by six square faces, facets or sides, with three meeting at each vertex.
        </p>
    ...
    </div>
    </body>
</html>

After including D3D scene Paul's HTML is:

<html>
    <head><title>Paul's Blog</title></head>
    <body>
    ...
    <div id="Post2011-07-21">
        <h2>Geometric Figures</h2>
        <p>
            The cube is a three-dimensional solid object bounded by six square faces, facets or sides, with three meeting at each vertex.
        </p>

        <d3d width="400px" height="400px">
          <scene>
            <viewpoint position='0 0 10'></viewpoint>
              <shape>
                <appearance>
                    <material diffuseColor='0.6 0.8 0.9'></material>
                </appearance>
                <box DEF='box' size='1 1 1'></box>
             </shape>
          </scene>
        </d3d>
    ...
    </div>
    </body>
</html>

Using the web site

Ulrich can see the post with the static 3D box geometry. No interaction is possible.

Derived Requirements

This use case leads to the following requirements:

Use Case UC102: MathBlog – Enabling simple 3D navigation

Paul notices that a static 3D scene is no different from an image. He decides to enable simple 3D navigation for his 3D scene – orbiting around the models included into that scene.

Authoring the web site

Paul's HTML with 3D navigation enabled:

<html>
    <head><title>Paul's Blog</title></head>
    <body>
    ...
    <div id="Post2011-07-21">
        <h2>Geometric Figures</h2>
        <p>
            The cube is a three-dimensional solid object bounded by six square faces, facets or sides, with three meeting at each vertex.
        </p>

        <d3d width="400px" height="400px">
          <scene>
            <viewpoint position='0 0 10'></viewpoint>
              <shape>
                <appearance>
                    <material diffuseColor='0.6 0.8 0.9'></material>
                </appearance>
                <box DEF='box' size='1 1 1'></box>
             </shape>
          </scene>
        </d3d>
    ...
    </div>
    </body>
</html>

Using the web site

Ulrich can see the post with the 3D geometry. Now he can drag a mouse over the 3D scene to examine the model.

Derived Requirements

This use case leads to the following requirements:

Use Case Description UCD2: BioScienceSite

Peter is really into chemicals, genes and proteins (not to mention how much he likes their taste). His BioScience web site (EatMyGenes.com) is starting to become popular. etc...etc...

Use Case UC201: BioScienceSite – Reusing existing 3D data

Peter writes web-based science articles where he discusses proteins, genes, and chemicals. With newly released 3D capable browsers, Peter wants to reuse the large 3D object repositories already defined by the scientific community over the years (example?) to enrich his text-based materials. Ulrich can then browse Peter’s site and learn about the proteins and genes.

Authoring the web site

Using the web site

Derived Requirements

Use Case Description UCD3: Virtual Museum

Penny and Patrick are museum curators and are developing a VirtualMuseum. They want it to be just like the real thing. People should be able to wander around the virtual space, look at the artifacts and learn. etc..etc...

Use Case UC301: VirtualMuseum – Using 3D geometries produced by 3D scanning

Penny is a museum curator working with Patrick on a virtual museum exhibition called VirtualMuseum. Penny would like to show ALL the pieces of the museum (those that are exhibited to the large public and those that are part of the reserve collection) to internet users (natively in a web browser) and to visitors (on their smartphones during the visit, or on a huge interactive screen at the end of the visit). Therefore, all these pieces have been scanned, categorized according to various criteria (by artist, by date, by art movement, by geographical origin, by size, by activity, etc) and stored in a huge database. At first, Penny proposes a standard way (list, grid, or picture wall) to navigate within a collection.

Authoring the web site

Using the web site

Derived Requirements

Use Case UC302: VirtualMuseum – Enabling walking-type navigation

As a second type of navigation, Penny proposes a walking-type metaphor for navigation in the virtual museum.

Authoring the web site

Using the web site

Derived Requirements

Use Case UC303: VirtualMuseum – Enabling facet-like navigation

Another type of navigation Penny proposes is a 3D-facet-like navigation.

Authoring the web site

Example of a tower of carousels of carousels for a music catalog.

To do so, Penny asks to Patrick to define a new metaphor of art pieces presentation. As the 3D graphic interface will be dedicated to Art, Penny asks firstly for a well-designed metaphor much more suitable than the typical cover-flow, carousel, or picture wall, secondly for the visualization of 3D models such as sculptures, and thirdly for a metaphor that will offer a global visualization of all art pieces. Moreover, Penny wants to let the users define how they will organize the art pieces by defining an ordered multi-criteria query. For example, Ula would like to navigate within the sculptures of the museum sorted by art movement, then by geographical origin, then by artist, while Ulrich would like to navigate within all the art pieces of the museum sorted by activities, then by dates, then by art movements and finally by artists.

Patrick will define a dynamic 3D graphic interface that will take as input data the art pieces organized in a hierarchical structure extracted from the database, and that will automatically place them in the 3D space according to the rule defined by the given metaphor. Patrick decides to present the art pieces thanks to a tower of carousels such as the one shown in Figure 1.

Using the web site

At home, Ula wants to do some research on the sculptures of the museum. She connects to the museum web site, clicks on the button to access the 3D visualization of art pieces, and selects in a 2D menu her research criteria (only sculpture, ordered by art movement, then geographical origin, and finally artist). As soon as she confirms her request, a tower of carousels of carousels in 3D appears on the web page, representing all the sculpture of the museum. She clicks on the art movement of her choice represented by a flat cylinder with the name above it (modernism). Thanks to mouse wheel, she can scroll through the art movements (modern classicism, post-modernism, etc). When she double-clicks on an art movement, the viewpoint of the virtual camera automatically focus on a carousel suggesting geographical origins. She clicks on the geographical origin of her choice (US) to automatically move the viewpoint in front of the next carousel. By double-clicking on it, she selects US (Sculpture/modernism/US), and her virtual viewpoint is now focused on a carousel presenting all US and modernist artists. Again, she clicks on Tony Smith (Sculpture/modernism/US/TonySmith), and visualizes all his sculptures. She realizes that Tony Smith was not the artist she was looking for, and decides to come back to the upper level (Sculpture/modernism/US) by clicking on the back button of her web browser. Finally, she selects Larry Bell (Sculpture/modernism/US/LarryBell) in order to visualize his sculptures.

Derived Requirements

This use case leads to the following requirements:

Requirements for D3D

This section describes the list of required D3D addressing dimensions that have resulted from the use case analysis. We divided the requirements into core and optional categories.

Syntax Requirements

Requirement SR01: Simple D3D Syntax

The D3D language/syntax should be easily implementable for lightweight Web applications and have a shallow learning curve to foster early adoption by Web developers.

This requirement comes from: UC101,...

Requirement SR02: The D3D specification shall be authored using XML

DOM Requirements

Requirement DR01: DOM document hierarchy should reflect the scene-graph hierarchy

Scene Graph Requirements

Requirement SGR01: Dynamic Scene Graph

  • Provide a way to define a 3D style sheet using the body of a scene graph. Some parameters of this scene graph, such as the value of a translation along the Y-axis could depend on the number of elements extracted from a database (to represent the tower). This requirement comes from: UC303.

Requirement SGR02: Levels of Detail

  • Provide a way to adapt the complexity of the virtual scene according to the viewpoint in order to run the website on various terminals. This requirement comes from: UC303.

Interaction Requirements

Requirement IR01: Navigation – supporting the task of moving user's viewpoint through an environment

Navigation refers to the task of moving user's viewpoint through an environment. D3D should support:

  • General movement - Exploratory movement, such as walking through a simulation of an architectural design;
  • Targeted movement - Movement with respect to a specific target, such as moving in to examine a detail of an engineering model;
  • Specified coordinate movement - Movement to a precise position and orientation, such as to a specific viewing position relative to a car model;
  • Specified trajectory movement - Movement along a position and orientation trajectory, such as a cinematographic camera movement.

Requirement IR02: Selection – supporting the task of choosing an object

Selection refers to techniques of choosing an object. Direct Selection, the most common way to select objects in 3D space, is positioning a mouse cursor over given object and clicking a mouse button (it is based on Ray Casting). Indirect Selection - selection of objects can also be done indirectly from a collection of objects (similarly to selecting viewpoints that are defined for a 3D scene).

Requirement IR03: Manipulation – supporting the task of specifying object's position, orientation and scale

Manipulation refers to techniques of specifying object's position, orientation and scale. The task can be simplified by using of manipulators (clicking and dragging on the handles of manipulators displayed together with the object) or by exploiting knowledge about real world (e.g., gravity) and natural behaviour of objects (e.g., solidity).

Web-type Task Requirements

Requirement WTR01: Use Back and Forward Buttons – saving 3D navigation actions into the browser's navigation tree

Normally Back and Forward buttons allow users to return to previously visited documents. Similarly to standard behavior of saving the usage of local hyperlinks into navigation history of web browsers, navigation actions (like usage of targeted POI movement) should also be saved into the navigation tree.

The current URL should be updated each time we change the viewpoint - see the work of W3C Media Fragments Working Group.

Requirement WTR02: Bookmark sth. or use bookmark – storing information regarding the current state of the embedded 3D scene

Bookmarks of pages with Dec3D should store information regarding the current state of the embedded 3D scene (position and orientation of the virtual camera). Therefore, the virtual camera should be animated to the given viewpoint immediately upon the user's arrival at the bookmarked site.

The inspiration for the structure for describing use cases and requirements

The inspiration for the structure for describing use cases and requirements comes from the following W3C activities: