SDK Release 4.0.0

Release Notes

Index icon See index
Search Icon

SDK Release 4.0.0

The version 4.0.0 introduces several major changes, those are breaking changes:

Migrated from Three.js to Babylon.js

Three.js was no powerful nor optimized enough to support the amount of elements and materials we wanted to handle. This migration also proves the idea behind the decoupling of the SDK, we managed to change the entire rendering engine without affecting the user scenes.

New material entity

Previously when you wanted to create and modify a material, you needed to specify it as a component of a entity like this:

render() {
  return (
    <scene id="old_scene">
      <sphere material="map: some/url.png; alphaTest: 0.5" />
    </scene>
  )
}

That leads to material duplications and special care with garbage collection in the engine; and to a super verbosic and not well decoupled code in the scene’s code.

We converted the material into an entity itself, now, the materials are using a PBR pipeline by default.

Here is how it looks now:

render() {
  return (
    <scene id="new_scene">
      <material id="reusable_material" albedoColor="some/url.png" roughness="0.5" />
      <sphere material="#reusable_material" />
    </scene>
  )
}

Fixed the coordinate system

Previous to this release, we had a patch for the reference system. The Z axis was inverted inside the parcel in relation to the world-grid.

It means if an object was standing in the world position 55,55, it was in the parcel 5,-4. It is now in the parcel 5,5.

You need to be carefull with this change since it inverts an entire axis, you might have to change the position of your entities.

Changes in the way to receive the users position

Previous to this version, you needed to execute await getMyPositionInEstate() to obtain the position of the user in the screen. Now you can subscribe to the positionChanged event.

import { createElement, ScriptableScene } from 'metaverse-api'

export default class BoxFollower extends ScriptableScene {
  state = { position: { x: 0, y: 0, z: 0 } }

  async sceneDidMount() {
    this.subscribeTo('positionChanged', e => {
      this.setState({ position: e.position })
    })
  }

  async render() {
    return (
      <scene>
        <box position={this.state.position} ignoreCollisions />
      </scene>
    )
  }
}

In addition, we added the following events to the SDK

export type PointerEvent = {
  /** Origin of the ray */
  from: Vector3Component
  /** Direction vector of the ray (normalized) */
  direction: Vector3Component
  /** Length of the ray */
  length: number
  /** ID of the pointer that triggered the event */
  pointerId: number
}

export interface IEvents {
  /**
   * `positionChanged` is triggered when the position of the camera changes
   * This event is throttled to 10 times per second.
   */
  positionChanged: {
    /** Position relative to the base parcel of the scene */
    position: Vector3Component

    /** Camera position, this is a absolute world position */
    cameraPosition: Vector3Component

    /** Eye height, in meters. */
    playerHeight: number
  }

  /**
   * `rotationChanged` is triggered when the rotation of the camera changes.
   * This event is throttled to 10 times per second.
   */
  rotationChanged: {
    /** {X,Y,Z} Degree vector. Same as entities */
    rotation: Vector3Component
    /** Rotation quaternion, useful in some scenarios. */
    quaternion: Quaternion
  }

  /**
   * `setAttributes` is triggered after the system receives new properties.
   */
  setAttributes: {
    [key: string]: any
  }

  /**
   * `click` is triggered when a user points and the ray (from mouse or controller) hits the entity.
   * Notice: Only entities with ID will be listening for click events.
   */
  click: {
    /** ID of the entitiy of the event */
    elementId: string

    /** ID of the pointer that triggered the event */
    pointerId: number
  }

  /**
   * `pointerUp` is triggered when the user releases an input pointer.
   * It could be a VR controller, a touch screen or the mouse.
   */
  pointerUp: PointerEvent

  /**
   * `pointerUp` is triggered when the user press an input pointer.
   * It could be a VR controller, a touch screen or the mouse.
   */
  pointerDown: PointerEvent
}

4.0.1

This release contains several bugfixes and removes the spherical gaze from the center of the screen, instead, it introduces a clean white circle.

4.0.2

This release improves internals of the P2P communications and fix a critical rotation bug.

  • Fixes an important bug in rotations, now rotations behave exactly as they should, they mimic the behavior of Unity
  • Fixes transparency in albedo PNGs
  • Adds the axis in every <scene> in debug mode
  • Adds several properties to the <material> entity
×
×

Subscribe

The latest tutorials sent straight to your inbox.

×

Share

Share this tutorial with your community.