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

原创 于 2011-03-17 11:31:15 发布 · 112 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#JavaScript #ViewUI

本文介绍了一个使用 O3D 技术进行三维场景渲染的例子，包括加载模型、材质和纹理，以及如何为不同的模型部分应用特定的着色器效果。
<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>
佐笾已逝
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值