`
wjlgryx
  • 浏览: 307056 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

o3d中对人体模特的不同部分单独贴图的实现方法

JavaScript 
阅读更多
<html> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
<title> 
Shader Test 
</title> 
<mce:style type="text/css"><!-- 
  html, body { 
    height: 100%; 
    margin: 0; 
    padding: 0; 
    border: none; 
  } 
--></mce:style><style type="text/css" mce_bogus="1">  html, body { 
    height: 100%; 
    margin: 0; 
    padding: 0; 
    border: none; 
  }</style> 
<!-- Include sample javascript library functions--> 
<mce:script type="text/javascript" src="o3djs/base.js" mce_src="o3djs/base.js"></mce:script> 
 
<!-- Our javascript code --> 
<mce:script type="text/javascript" id="o3dscript"><!-- 
o3djs.require('o3djs.util'); 
o3djs.require('o3djs.rendergraph'); 
o3djs.require('o3djs.pack'); 
o3djs.require('o3djs.math'); 
o3djs.require('o3djs.camera'); 
o3djs.require('o3djs.effect'); 
o3djs.require('o3djs.loader'); 
 
o3djs.require('o3djs.scene'); 
 
// Events 
// init() once the page has finished loading. 
// unload() when the page is unloaded. 
window.onload = init; 
window.onunload = unload; 
 
// global variables 
var g_o3d; 
var g_client; 
var g_viewInfo; 
 
var g_o3dElement; 
var g_pack; 
var g_math; 
 
var skirtPack; 
var headPack; 
 
var g_finished = false;  // for selenium testing 
 
 
 
// root node of scene 
var g_sceneRoot; 
 
 
var g_effects; 
var g_effect_body; 
var g_effect_head; 
 
var g_bumpTextureSampler; 
var g_bumpTextureSampler1; 
var g_bumpTextureSampler2; 
 
 
var g_viewMatrix; 
var g_projMatrix; 
 
 
/*
* Creates the client area.
*/ 
function init() { 
  o3djs.util.makeClients(initStep2); 
} 
 
 
function applyShader(pack) { 
    var materials = pack.getObjectsByClassName('o3d.Material'); 
 
    for (var m = 0; m < materials.length; m++) { 
     
    var material = materials[m]; 
     
    g_effects.createUniformParameters(material); 
     
    material.effect = g_effects; 
     
    setParam(material, 'texSampler0', g_bumpTextureSampler); 
  } 
} 
 
function applyShaderL(skirtPack){ 
var materials = skirtPack.getObjectsByClassName('o3d.Material'); 
 
    for (var m = 0; m < materials.length; m++) { 
     
    var material = materials[m]; 
     
    g_effect_body.createUniformParameters(material); 
     
    material.effect = g_effect_body; 
     
    setParam(material, 'texSampler0', g_bumpTextureSampler1); 
  } 
} 
 
function applyShaderH(headPack){ 
var materials = headPack.getObjectsByClassName('o3d.Material'); 
 
    for (var m = 0; m < materials.length; m++) { 
     
    var material = materials[m]; 
     
    g_effect_head.createUniformParameters(material); 
     
    material.effect = g_effect_head; 
     
    setParam(material, 'texSampler0', g_bumpTextureSampler2); 
  } 
} 
/*
* Initializes O3D and loads the scene into the transform graph.
*/ 
function initStep2(clientElements) { 
 
  // Initialize global variables and libraries. 
  g_o3dElement = clientElements[0]; 
  g_o3d = g_o3dElement.o3d; 
  g_math = o3djs.math; 
  g_client = g_o3dElement.client; 
  // Creates a pack to manage our resources/assets 
  g_pack = g_client.createPack(); 
 
   
     
  // Create the render graph for a view. 
  g_viewInfo = o3djs.rendergraph.createBasicView( 
      g_pack, 
      g_client.root, 
      g_client.renderGraphRoot); 
       
      
  // Create a transform node to act as the 'root' of the scene 
  g_sceneRoot = g_pack.createObject('Transform'); 
  // Attach it to the root of the transform graph. 
  g_sceneRoot.parent = g_client.root; 
   
  skirtPack = g_client.createPack(); 
  headPack = g_client.createPack(); 
 
        g_effects = g_pack.createObject('Effect'); 
        var shaderString = 'shaders/texture-only.shader'; 
        o3djs.effect.loadEffect(g_effects, shaderString); 
  
        g_effect_body = skirtPack.createObject('Effect'); 
        var shaderString = 'shaders/texture-only.shader'; 
        o3djs.effect.loadEffect(g_effect_body, shaderString); 
         
        g_effect_head = headPack.createObject('Effect'); 
        var shaderString = 'shaders/texture-only.shader'; 
        o3djs.effect.loadEffect(g_effect_head, shaderString); 
 
  var rampWidth = 64; 
   
   
  var texture = g_pack.createTexture2D( 
      rampWidth, 1, g_o3d.Texture.XRGB8, 1, false); 
       
       
     var texture1 = skirtPack.createTexture2D( 
      rampWidth, 1, g_o3d.Texture.XRGB8, 1, false); 
       
       var texture2 = skirtPack.createTexture2D( 
      rampWidth, 1, g_o3d.Texture.XRGB8, 1, false); 
       
  var pixels = []; 
  for (var ii = 0; ii < rampWidth; ++ii) { 
    var level = ii > rampWidth * 0.5 ? 1 : 0.3; 
    pixels.push(level, level, level); 
  } 
   
  texture.set(0, pixels); 
  texture1.set(0, pixels); 
  texture2.set(0, pixels); 
 
 
 
 
  var loader = o3djs.loader.createLoader(initStep3);              
  loader.loadTexture(g_pack, 'assets/rock_texture.jpg', 
                     function(texture, exception) { 
                       if (exception) { 
                         alert(exception); 
                       } else { 
                         g_bumpTextureSampler = g_pack.createObject('Sampler');  
                         g_bumpTextureSampler.texture = texture; 
                         g_bumpTextureSampler.mipFilter = g_o3d.Sampler.LINEAR; 
                       } 
                     }); 
 
loader.loadTexture(skirtPack, 'assets/rock_texture1.jpg', 
                     function(texture1, exception) { 
                       if (exception) { 
                         alert(exception); 
                       } else { 
                         g_bumpTextureSampler1 = skirtPack.createObject('Sampler');  
                         g_bumpTextureSampler1.texture = texture1; 
                         g_bumpTextureSampler1.mipFilter = g_o3d.Sampler.LINEAR; 
                       } 
                     }); 
  
  
loader.loadTexture(headPack, 'assets/rock_texture2.jpg', 
                     function(texture2, exception) { 
                       if (exception) { 
                         alert(exception); 
                       } else { 
                         g_bumpTextureSampler2 = headPack.createObject('Sampler');   
                         g_bumpTextureSampler2.texture = texture2; 
                         g_bumpTextureSampler2.mipFilter = g_o3d.Sampler.LINEAR; 
                       } 
                     }); 
// var transform = g_pack.createObject('Transform'); 
// var g_skirtTransform= transform; 
   
       
       
   
  loadScene(headPack, 'assets/head.o3dtgz', g_sceneRoot); 
//loadScene(g_pack, 'assets/hair.o3dtgz', g_sceneRoot); 
  
   
// loadScene(skirtPack, 'assets/trousers.o3dtgz', g_sceneRoot); 
loadScene(skirtPack, 'assets/body.o3dtgz', g_sceneRoot); 
  // loadScene(g_pack, 'assets/jacket.o3dtgz', g_sceneRoot); 
loadScene(g_pack, 'assets/trousers.o3dtgz', g_sceneRoot); 
  //loadScene(g_pack, 'assets/skirt.o3dtgz', g_sceneRoot);  
    
loader.finish(); 
 
} 
 
function initStep3() {                                                                        
                                                                          
  changeShader(g_pack); 
  applyShaderL(skirtPack); 
  applyShaderH(headPack); 
  g_finished = true;  // for selenium testing. 
} 
 
/**
* Swaps which shader we are using and applies it.
*/ 
 
function changeShader(g_pack) { 
  var pack=g_pack; 
  applyShader(pack); 
} 
 
 
/*************************************************************************************/ 
 
function loadScene(pack, fileName, parent) { 
  // Get our full path to the scene 
  var scenePath = o3djs.util.getCurrentURI() + fileName; 
 
  // Load the file given the full path, and call the callback function 
  // when its done loading. 
  o3djs.scene.loadScene(g_client, pack, parent, scenePath, callback); 
   //make it facing forword 
 
  function callback(pack, parent, exception) { 
    if (exception) { 
      alert('Could not load: ' + fileName + '\n' + exception); 
      return; 
    } 
    // Get a CameraInfo (an object with a view and projection matrix) 
    // using our javascript library function 
    var cameraInfo = o3djs.camera.getViewAndProjectionFromCameras( 
        parent, 
        g_client.width, 
        g_client.height); 
 
    // Copy the view and projection to the draw context. 
    g_viewInfo.drawContext.view = cameraInfo.view; 
    g_viewInfo.drawContext.projection = cameraInfo.projection; 
 
    // Generate draw elements and setup material draw lists. 
    o3djs.pack.preparePack(pack, g_viewInfo); 
 
    g_finished = true;  // for selenium testing 
  } 
} 
 
 
 
 
function setParam(object, paramName, value) { 
  var param = object.getParam(paramName); 
  if (param) { 
    param.value = value; 
  } 
} 
 
 
 
function getCurrentPath() { 
  var path = window.location.href; 
  var index = path.lastIndexOf('/'); 
  return path.substring(0, index + 1); 
} 
/**
* Removes any callbacks so they don't get called after the page has unloaded.
*/ 
function unload() { 
  if (g_client) { 
    g_client.cleanup(); 
  } 
} 
// --></mce:script> 
</head> 
<body> 
 
<!-- Start of O3D plugin --> 
O3D Test 
<div   id="o3d" style="width: 50%; height:80%;"  ></div> 
<!-- End of O3D plugin --> 
<br/> 
<p> 
 
</body> 
</html>
分享到：
| 常见的文件后缀名大全
评论
发表评论

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

相关推荐

    O3D 物体 编辑器

    综上所述，"O3D 物体编辑器"是一个基于O3D库的3D模型编辑工具，它在Firefox浏览器中实现了3D物体的拖动和旋转操作，为Web上的3D创作和交互提供了强大支持。开发者和设计师可以利用这个工具，轻松地在Web页面上创建和...

    O3D学习笔记[一]素材准备*.3ds转成*.o3dtgz

    总结来说，O3D学习笔记第一部分主要涉及了3DS模型的转换，这是3D开发中常见的需求，因为不同的软件和引擎通常使用不同的文件格式。通过了解3DS格式和O3DTGZ的特性，以及使用适当的工具和库，开发者可以有效地在O3D...

    O3D 实例 研究中

    1. **硬件加速**：O3D 利用 WebGL 实现了硬件加速，提高了三维图形的性能。 2. **丰富的图形功能**：支持多边形建模、光照、纹理映射、动画等复杂图形效果。 3. **交互性**：用户可以通过鼠标和键盘与三维场景进行...

    O3D文档说明（主要关键字的说明及翻译）

    5. **Pack 包**：在O3D中，包是一个管理数据的对象，它存储对其他数据的引用，如纹理、状态、缓冲区、形状和变换。包的主要作用是控制这些数据的生命周期，例如，当一个包被销毁时，与其关联的所有资源也会被释放。 ...

    谷歌O3D的javascript源码

    谷歌O3D是一种由Google开发的JavaScript库，用于在Web浏览器中实现高性能的3D图形渲染。这个技术主要目标是让网页开发者能够轻松地在不借助插件的情况下创建丰富的、交互式的3D内容。O3D的核心是基于OpenGL的硬件...

    3D-o3d.zip

    在3D-o3d.zip这个压缩包中，我们看到的是Objective-3D视频游戏引擎的相关资料，这是一个专门用于3D游戏开发的工具。 Objective-3D游戏引擎，以其强大的功能和灵活性，为开发者提供了构建逼真3D游戏环境的可能性。它...

    google o3d例子3

    o3d是Google开发的基于web的3d编程API，因文件太大分三次上传

    google o3d 编程例子1

    google开发的web3d编程APT o3d.提供的各种3d效果例子，因文件太大，分三个包传上

    o3d lib1 graph javascript ajax

    o3d lib1 graph javascript ajax

    o3de实现Texture Distortion

    在O3DE中实现类似的纹理扭曲，尽管语法和工具可能有所不同，但基本原理是相同的。O3DE支持自定义Shader，可以通过AzSL（Azurite Shading Language）来编写。你需要： 1. **创建Shader资源**：在O3DE中创建一个新的...

    o3d goolge javascript

    o3d goolge javascript texture graph

    CaO-Al2O3和CaO-SiO2-Al2O3渣系中组元活度的计算 (2013年)

    根据分子和离子共存理论,建立了CaO-Al2O3 和CaO-SiO2-Al2O3 渣系的活度计算模型,并利用模型对渣中各组元的活度进行了计算,分析了 w (CaO )对渣中组元活度的影响.结果表明,在 CaO-Al2O3 渣系中,当w(CaO)小于45%时,...

    野村综研O3W架构资料（内部）

    - **统一的数据访问**：通过标准的接口实现对不同数据源的一致访问。 - **增强的安全性**：提供更高级别的安全机制，包括身份验证、授权和加密，以确保数据的安全传输和处理。 - **简化系统维护**：利用自动化...

    o3dv_0.8.3.zip

    "o3dv_0.8.3.zip" 是一个压缩包文件，包含了 Online3DViewer 的 0.8.3 版本。Online3DViewer 是一个基于 Web 的三维模型查看器，它允许用户在浏览器中查看和交互三维模型，无需安装任何额外的软件。这个工具主要利用...

    制备方法对Ni-MgO-Al2O3催化剂上CH4-CO2重整制合成气的影响

    制备方法对Ni-MgO-Al2O3催化剂上CH4-CO2重整制合成气的影响，王佳佳，潘秉荣，本文以共沉淀法分别制备了一系列不同组成的镁、铝双组分及镍、镁、铝三组分层状双金属氢氧化物(LDHs)，650℃焙烧后获得了镁、铝和镍

    google o3d 编程例子2

    o3d是Google开发的基于web的3d编程API，因文件太大分三次上传

    不同掺杂浓度对Al2O3Cr光电特性的影响设计说明.doc

    【标题】和【描述】提及的是一个关于"不同掺杂浓度对Al2O3Cr光电特性的影响"的研究，这是一项探讨掺杂不同浓度铬(Cr)的氧化铝(Al2O3)材料在光电性能上的变化的学术论文。这篇论文可能是应用物理学专业的一篇工学学士...

Magicbox
Global site tag (gtag.js) - Google Analytics