This is the fourth day of my participation in the More text Challenge. For details, see more text Challenge

In development, the most common thing is to load resources, and this article will show you how to introduce resources in Oasis. You use resourceManager mounted to the Engine instance to manage and load resources. Then use the load method to pass in the URL.

We’ll look at three common texture resource loads in Oasis

What is texture

The most common resource used in 3D rendering is the Texture. When we color the model, we need to set a color value for each element. In addition to manually setting the color value, we can also choose to read the texture and color it to achieve a richer artistic effect.

It’s worth noting that images, Canvas, raw data, videos, etc. can all be used as textures, and the Oasis engine currently supports all WebGL standard textures.

2 d texture

    const textureResource = {
       type: AssetType.Texture2D,
       url: 'image url'
    }
    
    // Use ResourceManager to load 2D textures
    engine.resourceManager.load<Texture2D>(textureResource)
    .then((cubeMap: Texture2D) = > {
    
      // Create a Sprite entity
      const spriteEntity = rootEntity.createChild('sprite')
      const spriteRenderer = spriteEntity.addComponent(SpriteRenderer)
      spriteEntity.transform.position = new Vector3(-5.0)
      
      // Load the texture onto the Sprite entity via the new Sprite
      const sprite = new Sprite(engine, texture)
      spriteRenderer.sprite = sprite
    })
Copy the code
The Sprite texture effect successfully loaded

3 d texture

Loading a 3D texture requires a 6-sided image, and the cubic texture must have the same resolution for each 2D texture, which means that each 2D texture must have the same width and height.

    const cubeTextureResource ={
       type: AssetType.TextureCube,
       urls: ["Px-right image URL"."Nx-left Image URL"."Py-top Image URL"."Ny-bottom image URL"."Pz-front Image URL"."Nz-back Image URL"]},// Use ResourceManager to load 3D textures
  engine.resourceManager.load<TextureCubeMap>(cubeTextureResource)
    .then((cubeMap: TextureCubeMap) = > {
    
      // Create a cube entity
      const cubeEntity = rootEntity.createChild('cube')
      const cube = cubeEntity.addComponent(MeshRenderer)
      cube.mesh = PrimitiveMesh.createCuboid(engine, 5.5.5)
      
      // Get the material by creating PBRMaterial
      const material = new PBRMaterial(engine)
      // Use the reflectionTexture method under PBRMaterial to load 3D texture resources on the material
      material.reflectionTexture = cubeMap
      // Set the solid material
      cube.setMaterial(material)
    })
Copy the code
The 3D texture effect was successfully loaded

Tiankeng point

Be careful when loading 3D textures

    const material = new PBRMaterial(engine);
    constTexture = generate texture ();// What is shown above will not be repeated

    material.baseColorTexture = texture;
Copy the code

The baseColorTexture method is used to load the texture resources in the tutorial on the website, but in the actual application, this method should be deprecated

When learning Oasis Engine here, I deeply understand that indeed on a ship, version with the new, interface changes, tutorials do not need to change?

On the verge of giving up, I decided to take the boat down

Under PBRMaterial there is a method reflectionTexture with type TextureCubeMap

Right way

    const material = new PBRMaterial(engine)
    constTexture = () to generate texture material. ReflectionTexture = textureCopy the code

In the tutorial section of the Oasis website, it is possible to encounter a problem that is not updated in time. For API usage advice, check out the Oasis Engine API

Skybox texture

The skybox was explained in the previous chapter on VR implementations

Skyboxes require similar resources to 3D textures

This is the old interface in the texture tutorial on the official website,ASkyBoxThis class has been removed in the new version.

Below, the skybox texture loads correctly

  engine.resourceManager.load<TextureCubeMap>(cubeTextureResource)
    .then((cubeMap: TextureCubeMap) = > {
      background.mode = BackgroundMode.Sky
      const skyMaterial = (background.sky.material = new SkyBoxMaterial(engine))
      skyMaterial.textureCubeMap = cubeMap
      background.sky.mesh = PrimitiveMesh.createCuboid(engine, 2.2.2)})Copy the code

The complete code

import {
  Camera,
  WebGLEngine,
  Vector3,
  AssetType,
  Texture2D,
  SpriteRenderer,
  Sprite,
  TextureCubeMap,
  MeshRenderer,
  PrimitiveMesh,
  PBRMaterial,
  DirectLight,
  Color,
  BackgroundMode,
  SkyBoxMaterial
} from 'oasis-engine'
import { OrbitControl } from '@oasis-engine/controls'

export function createOasis () :void {
  // Initialize the Engine
  const engine = new WebGLEngine('canvas')
  engine.canvas.resizeByClientSize()

  // Get the scene root entity
  const scene = engine.sceneManager.activeScene
  const { background } = scene
  const rootEntity = scene.createRootEntity('root')

  // Create a camera entity
  const cameraEntity = rootEntity.createChild('camera_entity')
  cameraEntity.transform.setPosition(0.0.10)
  cameraEntity.addComponent(Camera)
  cameraEntity.addComponent(OrbitControl)
  
  // Create an optical entity
  const lightEntity = rootEntity.createChild('light')
  const directLight = lightEntity.addComponent(DirectLight)
  directLight.color = new Color(1.0.1.0.1.0)
  directLight.intensity = 0.5

  // Define 3d resources
  const cubeTextureResource = {
    type: AssetType.TextureCube,
    urls: [
      require('.. /assets/px.png'),
      require('.. /assets/nx.png'),
      require('.. /assets/py.png'),
      require('.. /assets/ny.png'),
      require('.. /assets/pz.png'),
      require('.. /assets/nz.png')]}// Load the 3D resources
  engine.resourceManager.load<TextureCubeMap>(cubeTextureResource)
    .then((cubeMap: TextureCubeMap) = > {
      const cubeEntity = rootEntity.createChild('cube')
      const cube = cubeEntity.addComponent(MeshRenderer)
      cube.mesh = PrimitiveMesh.createCuboid(engine, 4.4.4)
      const material = new PBRMaterial(engine)
      material.reflectionTexture = cubeMap
      cube.setMaterial(material)
    })
    
  // Load the skybox
  engine.resourceManager.load<TextureCubeMap>(cubeTextureResource)
    .then((cubeMap: TextureCubeMap) = > {
      background.mode = BackgroundMode.Sky
      const skyMaterial = (background.sky.material = new SkyBoxMaterial(engine))
      skyMaterial.textureCubeMap = cubeMap
      background.sky.mesh = PrimitiveMesh.createCuboid(engine, 2.2.2)})// Load 2D resources
  engine.resourceManager
    .load<Texture2D>({
      urls: [
        require('.. /assets/i1.png')].type: AssetType.Texture2D
    })
    .then((texture: Texture2D) = > {
      const spriteEntity = rootEntity.createChild('sprite')
      const spriteRenderer = spriteEntity.addComponent(SpriteRenderer)
      const sprite = new Sprite(engine, texture)
      spriteRenderer.sprite = sprite
      spriteEntity.transform.position = new Vector3(-5.0)})// Start the engine
  engine.run()
}
Copy the code
To complete the effect

End

respect by myself