aframe-render-order-component

A component that enables sorting and manually defining render order for transparent objects. A-Frame currently defaults to transparency order based on the order of objects added to the scene.

For A-Frame.

API

System

The render-order system takes a comma-delimited list of strings that name the render order layers. The render order layers will map to a number starting from 0 and counting up from there.

Example:

<a-scene render-order="background, menu, menubutton, menutext, foreground, hud">

Component

Then the render-order component can be applied to specify the layer or render order. The value modify the three.js Object3D's renderOrder property. The value can either be a number or the name of a layer defined in the system.

<a-scene render-order="background, menu, menubutton, menutext, hud">
  <a-entity geometry="primitive: plane" material="transparent: true; opacity: 0.5" render-order="foreground"></a-entity>
 
  <a-entity geometry="primitive: plane" material="transparent: true; opacity: 0.5" render-order="5.5"></a-entity>

Non-Recursive

The component will apply render order recursively by default. To define to be not recursive, set the nonrecursive ID:

<a-entity render-order__nonrecursive="hud"></a-entity>

Installation

Browser

Install and use by directly including the browser files:

<head>
  <title>My A-Frame Scene</title>
  <script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script> 
  <script src="https://unpkg.com/aframe-render-order-component@1.0.0/dist/aframe-render-order-component.min.js"></script> 
</head>
 
<body>
  <a-scene environment="preset: forest" render-order="layer1, layer2, layer3">
    <a-entity geometry="primitive: plane" material="color: red; opacity: 0.5; transparent: true" position="0 1 -1" render-order="layer3"></a-entity>
    <a-entity geometry="primitive: plane" material="color: blue; opacity: 0.5; transparent: true" position="-0.25 1 -2" render-order="layer2"></a-entity>
    <a-entity geometry="primitive: plane" material="color: green; opacity: 0.5; transparent: true" position="-0.5 1 -3" render-order="layer1"></a-entity>
  </a-scene>
</body>

npm

Install via npm:

npm install aframe-render-order-component

Then require and use.

require('aframe');
require('aframe-render-order-component');