本文主要是介绍轻量封装WebGPU渲染系统示例＜4＞-CubeMap/天空盒(源码)，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
当前示例源码github地址:
https://github.com/vilyLei/voxwebgpu/blob/version-1.01/src/voxgpu/sample/ImgCubeMap.ts
此示例渲染系统实现的特性:
1. 用户态与系统态隔离。
2. 高频调用与低频调用隔离。
3. 面向用户的易用性封装。
4. 渲染数据和渲染机制分离。
5. 用户操作和渲染系统调度并行机制。
当前示例运行效果:
此示例基于此渲染系统实现，当前示例TypeScript源码如下：
export class ImgCubeMap {geomData = new GeomDataBuilder();renderer = new WGRenderer();initialize(): void {console.log("ImgCubeMap::initialize() ...");let urls = ["static/assets/hw_morning/morning_ft.jpg","static/assets/hw_morning/morning_bk.jpg","static/assets/hw_morning/morning_up.jpg","static/assets/hw_morning/morning_dn.jpg","static/assets/hw_morning/morning_rt.jpg","static/assets/hw_morning/morning_lf.jpg"];let td = new WGImageCubeTextureData(urls);const shdSrc = {vertShaderSrc: { code: vertWGSL, uuid: "vtxShdCode" },fragShaderSrc: { code: fragWGSL, uuid: "fragShdCode" }};const material = this.createMaterial(shdSrc, [td]);this.createEntity([material]);}private createMaterial(shdSrc: WGRShderSrcType,texDataList?: WGImageTextureData[]): WGMaterial {let pipelineDefParam = {faceCullMode: "back"};const texTotal = texDataList ? texDataList.length : 0;const material = new WGMaterial({shadinguuid: "base-material-tex" + texTotal,shaderCodeSrc: shdSrc,pipelineDefParam});if (texTotal > 0) {const texWrappers: WGTextureWrapper[] = new Array(texTotal);for (let i = 0; i < texTotal; ++i) {texWrappers[i] = new WGTextureWrapper({ texture: { data: texDataList[i], shdVarName: "texture" + i } });}material.textures = texWrappers;}return material;}private createEntity(materials: WGMaterial[]): Entity3D {const renderer = this.renderer;const rgd = this.geomData.createCubeWithSize(200);const geometry = new WGGeometry().addAttribute({ shdVarName: "position", data: rgd.vs, strides: [3] }).setIndexBuffer({ name: "geomIndex", data: rgd.ivs });const entity = new Entity3D();entity.materials = materials;entity.geometry = geometry;renderer.addEntity(entity);return entity;}run(): void {this.renderer.run();}
}
这篇关于轻量封装WebGPU渲染系统示例＜4＞-CubeMap/天空盒(源码)的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
