I have it F5 until I got the problem with this link: https://playground.babylonjs.com/#JEI1D9#2
Text content of the PG:
var createScene = function () {
// This creates a basic Babylon Scene object (non-mesh)
var scene = new BABYLON.Scene(engine);
scene.debugLayer.show({
embedMode:true
});
var backgroundCube = new BABYLON.MeshBuilder.CreateBox("backgroundCube", {
size:60,
sideOrientation:2
}, scene);
scene.fogMode = BABYLON.Scene.FOGMODE_LINEAR;
scene.fogStart = 5;
scene.fogEnd = 25;
scene.fogColor = new BABYLON.Color3(0.1, 0.08, 0.25);
scene.fogDensity = 0.1;
var mainCamera = new BABYLON.ArcRotateCamera("mainCamera", BABYLON.Tools.ToRadians(100), BABYLON.Tools.ToRadians(85), 10, new BABYLON.Vector3(-0.25, 1, 0), scene);
mainCamera.layerMask = 1;
// This attaches the camera to the canvas
mainCamera.attachControl(canvas, true);
var textureCamera = new BABYLON.ArcRotateCamera("textureCamera", 0, 0, 190, BABYLON.Vector3.Zero(), scene);
textureCamera.layerMask = 2;
textureCamera.mode = 1;
textureCamera.orthoBottom = -7;
textureCamera.orthoLeft = -7;
textureCamera.orthoRight = 7;
textureCamera.orthoTop = 7;
var waterPlane = new BABYLON.Mesh.CreateGround("waterPlane", 15, 15, 400);
waterPlane.layerMask = 2;
var waterShader = BABYLON.NodeMaterial.ParseFromSnippetAsync("7X2PUH", scene).then(nodeMaterial => {
nodeMaterial.name = "causticMaterial";
waterPlane.material = nodeMaterial;
});
var volumetricEmitter = new BABYLON.AbstractMesh("volumetricEmitter", scene);
var numberCells;
var setupAnimationSheet = function(system, texture, width, height, numSpritesWidth, numSpritesHeight, animationSpeed, isRandom){
system.isAnimationSheetEnabled = true;
system.particleTexture = new BABYLON.Texture(texture, scene, false, false, BABYLON.Texture.TRILINEAR_SAMPLINGMODE);
system.particleTexture.wrapU = BABYLON.Texture.CLAMP_ADDRESSMODE;
system.particleTexture.wrapV = BABYLON.Texture.CLAMP_ADDRESSMODE;
system.spriteCellWidth = width / numSpritesWidth;
system.spriteCellHeight = height / numSpritesHeight;
numberCells = numSpritesWidth * numSpritesHeight;
system.startSpriteCellID = 0;
system.endSpriteCellID = numberCells - 1;
system.spriteCellChangeSpeed = animationSpeed;
system.spriteRandomStartCell = isRandom;
system.updateSpeed = 1/30;
};
var volumetricSystem = new BABYLON.ParticleSystem("volumetricSystem", 100, scene, null, true);
setupAnimationSheet(volumetricSystem, "https://raw.githubusercontent.com/PatrickRyanMS/BabylonJStextures/master/Demos/underwater/assets/volumetricLight.png", 1024, 1024, 4, 1, 0, true);
volumetricSystem.emitter = volumetricEmitter.position;
var boxEmitter = volumetricSystem.createBoxEmitter(new BABYLON.Vector3(-1,0,0), new BABYLON.Vector3(1,0,0), new BABYLON.Vector3(-5, 5, -3), new BABYLON.Vector3(5,5,3));
boxEmitter.radiusRange = 0;
volumetricSystem.minInitialRotation = 0;
volumetricSystem.maxInitialRotation = 0;
volumetricSystem.minScaleX = 6;
volumetricSystem.maxScaleX = 10;
volumetricSystem.minScaleY = 30;
volumetricSystem.maxScaleY = 50;
volumetricSystem.minLifeTime = 6;
volumetricSystem.maxLifeTime = 9;
volumetricSystem.emitRate = 15;
volumetricSystem.minEmitPower = 0.05;
volumetricSystem.maxEmitPower = 0.1;
volumetricSystem.minSize = 0.1;
volumetricSystem.maxSize = 0.2;
volumetricSystem.addColorGradient(0, new BABYLON.Color4(0,0,0,0));
volumetricSystem.addColorGradient(0.5, new BABYLON.Color4(0.25, 0.25, 0.3, 0.2));
volumetricSystem.addColorGradient(1, new BABYLON.Color4(0,0,0,0));
volumetricSystem.blendMode = BABYLON.ParticleSystem.BLENDMODE_ADD;
volumetricSystem.start();
var renderTarget = new BABYLON.RenderTargetTexture("RTT", 1024, scene);
renderTarget.activeCamera = textureCamera;
scene.customRenderTargets.push(renderTarget);
renderTarget.renderList.push(waterPlane);
var light = new BABYLON.SpotLight("spotLight", new BABYLON.Vector3(0, 30, 0), BABYLON.Vector3.Down(), BABYLON.Tools.ToRadians(50), 8, scene);
light.intensity = 1;
light.projectionTexture = renderTarget;
var blurAmount = 70;
var standardPipeline = new BABYLON.PostProcessRenderPipeline(engine, "standardPipeline");
var horizontalBlur = new BABYLON.BlurPostProcess("horizontalBlur", new BABYLON.Vector2(1, 0), blurAmount, 1, null, null, engine, false);
var verticalBlur = new BABYLON.BlurPostProcess("verticalBlur", new BABYLON.Vector2(0, 1), blurAmount, 1, null, null, engine, false);
var blackAndWhiteThenBlur = new BABYLON.PostProcessRenderEffect(engine, "blackAndWhiteThenBlur", function(){return [horizontalBlur, verticalBlur]});
standardPipeline.addEffect(blackAndWhiteThenBlur);
scene.postProcessRenderPipelineManager.addPipeline(standardPipeline);
scene.postProcessRenderPipelineManager.attachCamerasToRenderPipeline("standardPipeline", textureCamera);
BABYLON.SceneLoader.ImportMesh("", "https://raw.githubusercontent.com/PirateJC/assets/master/underWaterDemo/ground/", "underwaterGround.glb", scene, function(newMeshes){
newMeshes[0].name = "underWaterGround";
var childMeshes = newMeshes[0].getChildMeshes(false);
for (var i = 0; i {
nodeMaterial.name = "groundMaterial";
scene.getMeshByName("ground").material = nodeMaterial;
})
});
return scene;
};
Filter
Please select an entity in the scene explorer.
Forum Sandbox Documentation Search
=> I have done CTRL+A to select everything, then I have pasted here. Note that I got the 3 last lines you can see above by doing this, but those lines were not visible in the PG editor.
Chrome Console content: https://popov72.github.io/BabylonDev/temp/playground.babylonjs.com-1582581450108.log
=> last line is truncated because there were too many lines. This was displayed at the end: “Show more (69.7 KB) Copy”.
Chrome Network tab content: Babylon.js Playground
Nice.
) and we are today releasing the part 7 of the Mystery Demo Tutorial Series! In this video we continue to build on the work from previous videos, and unravel the FEELING of the demo!
