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;
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;
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;
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;
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>
页:
[1]