RenderBox.js 3.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
  1. // Render to texture example component
  2. var game = Atomic.game;
  3. var cache = game.cache;
  4. var node = self.node;
  5. // we're be setting up our render texture with a chest scene
  6. var chestScene;
  7. var chestNode;
  8. var chestCamera;
  9. // Create a scene which get's rendered to texture
  10. function createChestScene() {
  11. chestScene = new Atomic.Scene();
  12. chestScene.createComponent("Octree");
  13. // create a zone
  14. var zoneNode = chestScene.createChild("Zone")
  15. var zone = zoneNode.createComponent("Zone");
  16. zone.ambientColor = [0.0, 0.0, 0.0];
  17. zone.fogColor = [.2, .2, .2, 1.0];
  18. zone.fogStart = 10;
  19. zone.fogEnd = 100;
  20. // chest node where we will attach the model
  21. chestNode = chestScene.createChild("Chest");
  22. chestNode.pitch(-90);
  23. var model = chestNode.createComponent("StaticModel");
  24. model.setModel(cache.getResource("Model", "Models/Chest.mdl"));
  25. model.setMaterial(cache.getResource("Material", "Materials/Chest.xml"));
  26. // Create a camera for the render-to-texture scene. Simply leave it at the world origin and let it observe the scene
  27. var cameraNode = chestScene.createChild("Camera");
  28. chestCamera = cameraNode.createComponent("Camera");
  29. cameraNode.position = [0, .5, -4];
  30. cameraNode.pitch(0);
  31. chestCamera.farClip = 100;
  32. // Create a point light to the camera scene node
  33. var light = cameraNode.createComponent("Light");
  34. light.lightType = Atomic.LIGHT_POINT;
  35. light.range = 30;
  36. }
  37. function start() {
  38. // create the chest render to texture scene
  39. createChestScene();
  40. // add a box which will have the chest scene rendered on it
  41. var model = node.createComponent("StaticModel");
  42. model.setModel(cache.getResource("Model", "Models/Box.mdl"));
  43. // Create a renderable texture (1024x1024, RGB format), enable bilinear filtering on it
  44. var renderTexture = new Atomic.Texture2D();
  45. renderTexture.setSize(1024, 1024, game.graphics.getRGBFormat(), Atomic.TEXTURE_RENDERTARGET);
  46. renderTexture.filterMode = Atomic.FILTER_BILINEAR;
  47. // Create a new material from scratch, use the diffuse unlit technique, assign the render texture
  48. // as its diffuse texture, then assign the material box object
  49. var renderMaterial = new Atomic.Material();
  50. renderMaterial.setTechnique(0, cache.getResource("Technique", "Techniques/Diff.xml"));
  51. renderMaterial.setTexture(Atomic.TU_DIFFUSE, renderTexture);
  52. model.setMaterial(renderMaterial);
  53. // Get the texture's RenderSurface object (exists when the texture has been created in rendertarget mode)
  54. // and define the viewport for rendering the second scene, similarly as how backbuffer viewports are defined
  55. // to the Renderer subsystem. By default the texture viewport will be updated when the texture is visible
  56. // in the main view
  57. var surface = renderTexture.getRenderSurface();
  58. var rttViewport = new Atomic.Viewport(chestScene, chestCamera);
  59. surface.setViewport(0, rttViewport);
  60. node.pitch(-90);
  61. }
  62. function update(timeStep) {
  63. // Let's roll
  64. node.roll(timeStep * 15);
  65. chestNode.roll(timeStep * 75);
  66. }