<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>