六狼论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

新浪微博账号登陆

只需一步,快速开始

搜索
查看: 16|回复: 0

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

[复制链接]

升级  97.67%

153

主题

153

主题

153

主题

举人

Rank: 3Rank: 3

积分
493
 楼主| 发表于 2013-1-29 09:31:02 | 显示全部楼层 |阅读模式
<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>
您需要登录后才可以回帖 登录 | 立即注册 新浪微博账号登陆

本版积分规则

快速回复 返回顶部 返回列表