1# Creating and Using Image Resources 2<!--Kit: ArkGraphics 3D--> 3<!--Subsystem: Graphics--> 4<!--Owner: @zzhao0--> 5<!--SE: @zdustc--> 6<!--TSE: @zhangyue283--> 7 8Image is essentially a two-dimensional buffer for storing information required for 3D rendering calculation, such as basic colors and normals. 9 10ArkGraphics 3D provides the capability of creating image resources in PNG, JPG, and KTX formats and customizing image resources. 11 12 13## Creating and Using an Image 14An image resource in a 3D scene can be directly used by the GPU. Key parameters for creating an image resource include the name and path of the image resource. It is a common operation to apply an image resource to a material as one of the material attributes. The sample code is as follows: 15```ts 16import { Image, Shader, MaterialType, Material, ShaderMaterial, Animation, Environment, Container, SceneNodeParameters, 17 LightType, Light, Camera, SceneResourceParameters, SceneResourceFactory, Scene, Node } from '@kit.ArkGraphics3D'; 18 19function createImagePromise() : Promise<Image> { 20 return new Promise((resolve, reject) => { 21 // Load scene resources, which supports .gltf and .glb formats. The path and file name can be customized based on the specific project resources. 22 let scene: Promise<Scene> = Scene.load($rawfile("gltf/CubeWithFloor/glTF/AnimatedCube.glb")); 23 scene.then(async (result: Scene) => { 24 let sceneFactory: SceneResourceFactory = result.getResourceFactory(); 25 // Load image resources, which can be used for material mapping. The URI can be specified based on the project structure. 26 let sceneImageParameter: SceneResourceParameters = { name: "image", uri: $rawfile("bricks.jpg") }; 27 // Create an image. 28 let image: Promise<Image> = sceneFactory.createImage(sceneImageParameter); 29 image.then(async (imageEntity: Image) => { 30 let sceneMaterialParameter: SceneResourceParameters = { name: "material" }; 31 // Create a material. 32 let material: Promise<Material> = sceneFactory.createMaterial(sceneMaterialParameter, MaterialType.SHADER); 33 // ShaderMaterial inherits from Material. 34 material.then(async (materialEntity: ShaderMaterial) => { 35 // Use the created image resource to set the texture property. 36 if (materialEntity && materialEntity.colorShader) { 37 materialEntity.colorShader.inputs["BASE_COLOR_Image"] = imageEntity; 38 } 39 resolve(imageEntity); 40 }); 41 }); 42 }); 43 }); 44} 45``` 46
