#<3

D3pth engine - Gamma - Documentation

1. Purpose of this document

In this document we describe what Gamma is able to do and what it is not able to do.

Gamma is a simple 3D engine where the page combines HTML content cards with a 3D scene configuration and not just scroll-driven state transitions.

2. Overall page structure

Main elements:

  • viewport3d
  • scene
  • world
  • card elements
  • scrollSpace

3. 3D viewport container

The viewport3d element holds the scene in place.

3.1 Expected role

This is the visible 3D viewport and perspective container.

4. Scene container

The scene element is where the perspective really happens.

4.1 Expected role

This element represents the transformed 3D scene.

5. World container

The world element is where you put your layout.

5.1 Expected role

This element contains all positioned 3D content.

6. Card elements

These are the elements you work with using 3D translations and rotations. To use the elements in state machines, they have to have a class named “card”.

Multiple data properties are used:

  • data-item: identification in state machines
  • data-x: default translation in x direction
  • data-y: default translation in y direction
  • data-d3pth: default “depth”
  • data-alpha: default rotation around x axis
  • data-beta: default rotation around y axis
  • data-gamma: default rotation around z axis

7. Scroll space element

This element creates page height for scroll-driven interaction. Do not touch it.

8. Global JavaScript configuration: cfg

TODO: Describe the purpose of the cfg object.

8.1 Parameter overview

  • gap: this is a gap between cards
  • sideFrac: this is a left and right column width for 3 column layouts in percent [not in Gamma]
  • midFrac: this is a middle column width for 3 column layouts in percent [not in Gamma]
  • modelMax: this is the max width for 3 column layouts in px [not in Gamma]
  • perspective: perspective property of the perspective
  • sceneZ: shift of the scene
  • zScale: scale of the d3pth
  • rxTop: delta for top camera position for scrolling camera implementations [not in Gamma]
  • rxBottom: delta for bottom camera position for scrolling camera implementations [not in Gamma]

9. Scene state definitions: states

These are the scene states.

9.1 State structure

  • state: each state identification is made using state property
  • items: item states in a state

9.2 Item structure

  • item: items/cards are identified by item property
  • props: properties of items

9.3 Supported props

  • x: translation in x direction
  • y: translation in y direction
  • d3pth: “depth”
  • alpha: rotation around x axis
  • beta: rotation around y axis
  • gamma: rotation around z axis

Special item: camera. Use the same logic as in other items to control camera.

10. State machines: machines

Multiple finite state machines consume common signals and traverse common states. The action function is returned from the engine. Feel free to use it in any creative way: run it in event handlers you bind to events, or write your own logic.

10.1 Machine structure

  • name
  • transitions

10.2 Transition structure

  • event: this is the signal the machine expects to make its transition
  • from: transition happens only if the machine is in the “from” state
  • to: the machine switches to the “to” state
  • time: how long the animation between states takes
  • fromEvent: your logic at the transition trigger time
  • toEvent: your logic at the time that is scheduled as the end of the transition

11. Accessibility notes

You are fully responsible for solving all accessibility problems. In the end, you may make a system that does not use D3pth engine at all, simply using CSS.

Possible topics:

  • semantic headings
  • link text
  • keyboard navigation
  • color contrast
  • focus states
  • reduced motion
  • screen reader behavior
  • clickable elements inside transformed 3D containers

12. Responsive design notes

You are fully responsible for all responsive design decisions. There are multiple approaches you can use. Make some experience in your local environment first before you ask for help. This is no longer a simple 2D website.

Possible topics:

  • viewport width
  • viewport height
  • card height
  • mobile layout
  • perspective on small screens
  • scroll distance
  • touch interaction

13. Styling notes

You are fully responsible for CSS.

Possible topics:

  • inline styles
  • moving styles to CSS classes
  • repeated card heights
  • repeated colors
  • color palette
  • typography
  • spacing

14. Usage example

See d3pth.store with examples.

15. Summary

Let's make the internet 3D!