o3d—立方体贴图例子逐步解释

wjlgryx

浏览: 299605 次
性别:
来自: 北京

最近访客更多访客>>

Helkern

Helenhhj

cao510453

1729051657

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

3D 文章

Access

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

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

view plaincopy to clipboardprint?
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 ）。并在这个缓冲区设置纹理坐标数组：

view plaincopy to clipboardprint?
var texCoordsBuffer = g_pack.createObject('VertexBuffer');
var texCoordsField = texCoordsBuffer.createField('FloatField', 2);
texCoordsBuffer.set(texCoordsArray);

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

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

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

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

view plaincopy to clipboardprint?
cubeEffect.createUniformParameters(cubeMaterial);

•获取材料的采样参数：

view plaincopy to clipboardprint?
var samplerParam = cubeMaterial.getParam('texSampler0');

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

view plaincopy to clipboardprint?
g_sampler = g_pack.createObject('Sampler');
g_sampler.minFilter = g_o3d.Sampler.ANISOTROPIC;
g_sampler.maxAnisotropy = 4;

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

view plaincopy to clipboardprint?
samplerParam.value = g_sampler;

第3步：获取纹理

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

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

view plaincopy to clipboardprint?
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 （）函数获取一个新的纹理文件。

view plaincopy to clipboardprint?
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网页，添加用户输入框和按钮，使用户可以指定一个新的纹理：

view plaincopy to clipboardprint?
<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" onclick="changeTexture();" value="Update Texture"><BR>

第4步：创建着色器

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

view plaincopy to clipboardprint?
<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

分享到：

3D绘图过程及原理简介 | o3d中对人体模特的不同部分单独贴图的实现 ...

2011-03-17 11:35
浏览 1091
评论(0)
分类:非技术
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论