Skip to main content

Background environment (3D Background)

Environment texture#

For background environment you can use the cubemap textures.

You can create a cubemap texture in 2 steps:

  1. Cube mapping generation from HDR image.
  2. Compressing into KTX.

In this example we already have one with the name env.ktx. More information about the KTX format: https://www.khronos.org/opengles/sdk/tools/KTX/file_format_spec.

Steps to implement#

Effect example: [cubemap_bg](pathname:///generated/effects/cubemap_bg.zip)
  1. Construct an effect with the Filter Editor following steps as in the section Animated 3d mask with environment texture for background. Filter Editor supports environment textures with .hdr and .exr extensions.
  2. Along with generated files put this files into the effect folder:
  • bg.frag
  • bg.vert
  • tri.bsm2

Mentioned files can be found in downloaded effect example archive.

  1. Write the material section in cfg.toml:
[materials.TriMat]
vs = "bg.vert"
fs = "bg.frag"
blend = "off" # "alpha", "premul_alpha", "screen", "add", "multiply"
backfaces = false
colorwrite = true
zwrite = false
shadow = false
samplers = { tex_env="env.ktx" }
  1. Add TriMat material from tri.bsm2 model to the draw order in cfg.toml:
draw_order = ['TriMat']
  1. Add tri.bsm2 mesh spawn in config.js:
Api.meshfxMsg("spawn", 3, 0, "tri.bsm2");
  1. Enable the features in config.json. Add to the general section:
"rotation_vector": true,
"recognizer" : [
"background"
]
Last updated on