第4.2章材质贴图2—立方体贴图例子逐步解释

最新推荐文章于 2021-05-04 15:16:23 发布

O3D_tech

最新推荐文章于 2021-05-04 15:16:23 发布

阅读量1.4k

点赞数

分类专栏： O3D开发文章标签： shader input float matrix url struct

本文链接：https://blog.csdn.net/o3d_tech/article/details/4528336

版权

O3D开发专栏收录该内容

13 篇文章 0 订阅

订阅专栏

第1步：定义纹理坐标
下面的步骤操作和代码指定纹理坐标，将其添加到一个数组，并添加到数组的缓冲区。该setVertexStream （）函数指定如何读取缓冲区，并设置了一个顶点缓冲流。

指定（u，v）纹理坐标为每个顶点，并将其添加到一个数组（ texCoordsArray ）：

var texCoordsArray = [ 0, 0, 1, 0, 1, 1, 0, 1, 0, 0, 1, 0, 1, 1, 0, 1, 1, 1, 0, 1, 0, 0, 1, 0, 0, 0, 1, 0, 1, 1, 0, 1, 0, 0, 1, 0, 1, 1, 0, 1, 0, 0, 1, 0, 1, 1, 0, 1 ];

创建一个顶点缓冲区保存纹理坐标（ texCoordsBuffer ）。并在这个缓冲区设置纹理坐标数组：

var texCoordsBuffer = g_pack.createObject('VertexBuffer'); var texCoordsField = texCoordsBuffer.createField('FloatField', 2); texCoordsBuffer.set(texCoordsArray);

调用setVertexStream （）函数，将纹理坐标缓冲区和基元数据流银行关联起来。调用这个函数设置语义纹理坐标顶点流（ TEXCOORD ）以及有关如何读取数据流中数据的其他信息：

streamBank.setVertexStream( g_o3d.Stream.TEXCOORD, // 语意 0, // 语意索引 texCoordsField, // 域 0); // 起始索引

第2步：创建纹理取样器
下面的步骤操作和代码创建纹理采样和确定其状态。

•调用Effect.createUniformParams （）创建一个材料参数的每一个效果的统一的参数（即，参数，适用于原始作为一个整体）。在这个例子中，有一个统一的参数，纹理取样器：

cubeEffect.createUniformParameters(cubeMaterial);

•获取材料的采样参数：

var samplerParam = cubeMaterial.getParam('texSampler0');

•创建纹理采样器，并设定其状态。该例子的缩小过滤器（ minFilter ）设置为各向异性ANISOTROPIC。从某一角度看，此值可以提高纹理的质量：

g_sampler = g_pack.createObject('Sampler'); g_sampler.minFilter = g_o3d.Sampler.ANISOTROPIC; g_sampler.maxAnisotropy = 4;

•将此纹理采样器赋值给材质采样器参数：

samplerParam.value = g_sampler;

第3步：获取纹理

下面演示了初始化材质贴图文件的路径参数，并且当用户改变材质贴图文件时，这个路径参数会发生相应的改变。

• 初始化纹理网址（在 initStep2 （）函数中）

var path = window.location.href; var index = path.lastIndexOf('/'); path = path.substring(0, index+1) + 'assets/texture_b3.jpg'; var url = document.getElementById("url").value = path;

•每当用户指定一个新的纹理，在changeTexture （）函数获取一个新的纹理文件。

function changeTexture() { var textureUrl = document.getElementById('url').value; try { o3djs.io.loadTexture(g_pack, textureUrl, function(texture) { // Remove the currently used texture from the pack so that when it's not // referenced anymore, it can get destroyed. if (g_sampler.texture) g_pack.removeObject(g_sampler.texture); // Set the texture on the sampler object to the newly created texture // object returned by the request. g_sampler.texture = texture; // We can now safely add the cube transform to the root of the // transform graph since it now has a valid texture. If the transform // is already parented under the root, the call will have no effect. g_cubeTransform.parent = g_client.root; . . .//Error handling calls here. }

这个函数使用util.loadTexture （）从指定的地址加载纹理。此实用工具，反过来，调用createFileRequest （）函数。根据预设， createFileRequest （）创建了一套mipmaps时加载纹理。如果您知道您不会使用mipmapping ，您可以明确要求加载纹理文件，并指定generateMipmaps属性FileRequest为FALSE 。

•在<body>的HTML网页，添加用户输入框和按钮，使用户可以指定一个新的纹理：

<body> <h1>Hello Cube: Textures</h1> This example shows how to texture map a cube using an image fetched from a URL. <br/>  <div id="o3d" style="width: 600px; height: 600px;"></div>  <br /> Image URL: <input type="text" id="url" size="100"> <input type="button" οnclick="changeTexture();" value="Update Texture"><BR>

第4步：创建着色器

在这个例子中， <textarea>元素包含的代码顶点和像素着色器。输入属性的顶点着色器的位置，有语义的立场，有语义的TEXCOORD0 。顶点着色器转换成均匀顶点位置剪辑空间。在这里，立场载于positionsBuffer和纹理坐标载于texCoordsBuffer 。顶点着色器通过纹理坐标值（ TEXCOORD0 ）通过不变（ output.tex = input.tex ; ）。支持Pixel Shader然后在查询中每个像素的原始和效益的颜色相应位的纹理贴图。以下是代码的顶点和像素着色器：

<textarea id="effect"> // World View Projection matrix that will transform the input vertices // to screen space. float4x4 worldViewProjection : WorldViewProjection; // The texture sampler is used to access the texture bitmap in the fragment // shader. sampler texSampler0; // input for our vertex shader struct VertexShaderInput { float4 position : POSITION; float2 tex : TEXCOORD0; // Texture coordinates }; // input for our pixel shader struct PixelShaderInput { float4 position : POSITION; float2 tex : TEXCOORD0; // Texture coordinates }; /** * The vertex shader simply transforms the input vertices to screen space. */ PixelShaderInput vertexShaderFunction(VertexShaderInput input) { PixelShaderInput output; // Multiply the vertex positions by the worldViewProjection matrix to // transform them to screen space. output.position = mul(input.position, worldViewProjection); output.tex = input.tex; return output; } /** * Given the texture coordinates, our pixel shader grabs the corresponding * color from the texture. */ float4 pixelShaderFunction(PixelShaderInput input): COLOR { return tex2D(texSampler0, input.tex); } // Here we tell our effect file *which* functions are // our vertex and pixel shaders. // #o3d VertexShaderEntryPoint vertexShaderFunction // #o3d PixelShaderEntryPoint pixelShaderFunction // #o3d MatrixLoadOrder RowMajor