addbackground.js 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155
  1. window.prepareBackgroundMaterial = function() {
  2. var backSky = new BABYLON.BackgroundMaterial("backSky", scene);
  3. var hdrTexture = BABYLON.CubeTexture.CreateFromPrefilteredData("/Playground/textures/environment.dds", scene);
  4. hdrTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE
  5. backSky.reflectionTexture = hdrTexture;
  6. backSky.backFaceCulling = false;
  7. var back = new BABYLON.BackgroundMaterial("back", scene);
  8. back.diffuseTexture = new BABYLON.Texture("/Playground/textures/WhiteTransarentRamp.png", scene);
  9. back.diffuseTexture.hasAlpha = true;
  10. // Skybox
  11. backgroundSkybox = BABYLON.Mesh.CreateBox("hdrSkyBox", 1000.0, scene);
  12. backgroundSkybox.material = backSky;
  13. backgroundSkybox.setEnabled(false);
  14. var mirrorMesh = BABYLON.Mesh.CreateTorus("torus", 4, 2, 30, scene, false);
  15. mirrorMesh.setEnabled(false);
  16. mirrorMesh.position = new BABYLON.Vector3(0, 3, 0);
  17. mirrorMesh.material = new BABYLON.StandardMaterial("", scene);
  18. mirrorMesh.material.emissiveColor = BABYLON.Color3.Red();
  19. var mirror = new BABYLON.MirrorTexture("mirror", {ratio: 0.3}, scene, true);
  20. mirror.renderList = [mirrorMesh];
  21. mirror.clearColor = new BABYLON.Color4(1, 1, 1, 0.0);
  22. mirror.mirrorPlane = new BABYLON.Plane(0, -1.0, 0, 0.0);
  23. mirror.adaptiveBlurKernel = 64;
  24. var perceptualColor = new BABYLON.Color3(1, 1, 1);
  25. var primaryColor = new BABYLON.Color3(1, 1, 1);
  26. registerRangeUI("background", "primaryColorR", 0, 1, function(value) {
  27. mirror.clearColor.r = value;
  28. back.primaryColor.r = value;
  29. backSky.primaryColor.r = value;
  30. if (back.perceptualColor) {
  31. back.perceptualColor.r = value;
  32. backSky.perceptualColor.r = value;
  33. }
  34. perceptualColor.r = value;
  35. primaryColor.r = value;
  36. }, function() {
  37. return back.primaryColor.r;
  38. });
  39. registerRangeUI("background", "primaryColorG", 0, 1, function(value) {
  40. mirror.clearColor.g = value;
  41. back.primaryColor.g = value;
  42. backSky.primaryColor.g = value;
  43. if (back.perceptualColor) {
  44. back.perceptualColor.g = value;
  45. backSky.perceptualColor.g = value;
  46. }
  47. perceptualColor.g = value;
  48. primaryColor.g = value;
  49. }, function() {
  50. return back.primaryColor.g;
  51. });
  52. registerRangeUI("background", "primaryColorB", 0, 1, function(value) {
  53. mirror.clearColor.b = value;
  54. back.primaryColor.b = value;
  55. backSky.primaryColor.b = value;
  56. if (back.perceptualColor) {
  57. back.perceptualColor.b = value;
  58. backSky.perceptualColor.b = value;
  59. }
  60. perceptualColor.b = value;
  61. primaryColor.b = value;
  62. }, function() {
  63. return back.primaryColor.b;
  64. });
  65. registerRangeUI("background", "primaryColorShadowLevel", 0, 1, function(value) {
  66. back.primaryColorShadowLevel = value;
  67. backSky.primaryColorShadowLevel = value;
  68. }, function() {
  69. return back.primaryColorShadowLevel;
  70. });
  71. registerRangeUI("background", "primaryColorHighlightLevel", 0, 1, function(value) {
  72. back.primaryColorHighlightLevel = value;
  73. backSky.primaryColorHighlightLevel = value;
  74. }, function() {
  75. return back.primaryColorHighlightLevel;
  76. });
  77. registerRangeUI("background", "reflectionBlur", 0, 1, function(value) {
  78. backSky.reflectionBlur = value;
  79. }, function() {
  80. return backSky.reflectionBlur;
  81. });
  82. registerRangeUI("background", "shadowLevel", 0, 1, function(value) {
  83. back.shadowLevel = value;
  84. backSky.shadowLevel = value;
  85. }, function() {
  86. return back.shadowLevel;
  87. });
  88. registerRangeUI("background", "alpha", 0, 1, function(value) {
  89. back.alpha = value;
  90. }, function() {
  91. return back.alpha;
  92. });
  93. registerRangeUI("background", "mirrorAmount", 0, 10, function(value) {
  94. back.reflectionAmount = value;
  95. }, function() {
  96. return back.reflectionAmount;
  97. });
  98. registerRangeUI("background", "mirrorFalloff", 0, 5, function(value) {
  99. back.reflectionFalloffDistance = value;
  100. }, function() {
  101. return back.reflectionFalloffDistance;
  102. });
  103. registerButtonUI("background", "ToggleBackRGB", function() {
  104. back.useRGBColor = !back.useRGBColor;
  105. });
  106. registerButtonUI("background", "TogglePerceptualColor", function() {
  107. if (back.perceptualColor) {
  108. back.perceptualColor = null;
  109. backSky.perceptualColor = null;
  110. back.primaryColor = primaryColor.clone();
  111. backSky.primaryColor = primaryColor.clone();
  112. }
  113. else {
  114. back.perceptualColor = perceptualColor.clone();
  115. backSky.perceptualColor = perceptualColor.clone();
  116. }
  117. });
  118. registerButtonUI("background", "ToggleSkyRGB", function() {
  119. backSky.useRGBColor = !backSky.useRGBColor;
  120. });
  121. registerButtonUI("background", "ToggleMirror", function() {
  122. if (back.reflectionFresnel) {
  123. back.reflectionFresnel = false;
  124. back.reflectionTexture = null;
  125. mirrorMesh.setEnabled(false);
  126. }
  127. else {
  128. back.reflectionFresnel = true;
  129. back.reflectionTexture = mirror;
  130. mirrorMesh.setEnabled(true);
  131. }
  132. });
  133. return back;
  134. }