Sailarg Posted September 24, 2017 Share Posted September 24, 2017 Good evening, I was watching the tutorials and I was curious what can be done with the shaders, I managed to do some things, however now I have a lot of questions, 1. What is the difference between using BABYLON.Effect.ShadersStore, BABYLON.PostProcess, and BABYLON.ShaderMaterial ? 2. how can apply 2 effects to the same object.? for example I am trying to make a 360 degree view with the wave effect that is in http://cyos.babylonjs.com/ here is my test code Basic Html <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>360 + wave</title> <script src="https://www.babylonjs.com/hand.minified-1.2.js"></script> <script src="https://preview.babylonjs.com/cannon.js"></script> <script src="https://preview.babylonjs.com/oimo.js"></script> <script src="https://preview.babylonjs.com/babylon.js"></script> <script src="main.js"></script> <style> html, body { width: 100%; height: 100%; padding: 0; margin: 0; overflow: hidden; margin: 0px; overflow: hidden; } #renderCanvas { width: 100%; height: 100%; touch-action: none; -ms-touch-action: none; } </style> </head> <body> <canvas id="renderCanvas"></canvas> </body> </html> main JS "use strict"; function create360(sphere, scene) { var sphereMaterial = new BABYLON.StandardMaterial("world", scene); sphereMaterial.emissiveTexture = new BABYLON.Texture("world.jpg", scene); sphereMaterial.emissiveTexture.uScale = -1.0; sphereMaterial.emissiveTexture.vScale = -1.0; sphereMaterial.emissiveTexture.hasAlpha = false; sphereMaterial.backFaceCulling = false; sphere.material = sphereMaterial; sphere.scaling.x = 1000; sphere.scaling.y = 1000; sphere.scaling.z = 1000; } function startGame() { if (BABYLON.Engine.isSupported()) { var canvas = document.getElementById("renderCanvas"); var engine = new BABYLON.Engine(canvas, false); var scene = new BABYLON.Scene(engine); scene.collisionsEnabled = true; var camera = new BABYLON.ArcRotateCamera("camera1",Math.PI/2, Math.PI/2, 90, new BABYLON.Vector3(0, 0, 0), scene); camera.checkCollisions = true; camera.attachControl(canvas); var sphere = BABYLON.Mesh.CreateSphere("Sphere", 16, 10, scene); sphere.checkCollisions = true; create360(sphere, scene); BABYLON.Effect.ShadersStore["customVertexShader"]= "precision highp float;\r\n"+ "// Attributes\r\n"+ "attribute vec3 position;\r\n"+ "attribute vec3 normal;\r\n"+ "attribute vec2 uv;\r\n"+ "// Uniforms\r\n"+ "uniform mat4 worldViewProjection;\r\n"+ "uniform float time;\r\n"+ "// Varying\r\n"+ "varying vec3 vPosition;\r\n"+ "varying vec3 vNormal;\r\n"+ "varying vec2 vUV;\r\n"+ "void main(void) {\r\n"+ " vec3 v = position;\r\n"+ " v.x += sin(2.0 * position.y + (time)) * 0.5;\r\n"+ " \r\n"+ " gl_Position = worldViewProjection * vec4(v, 1.0);\r\n"+ " \r\n"+ " vPosition = position;\r\n"+ " vNormal = normal;\r\n"+ " vUV = uv;\r\n"+ "}\r\n"; BABYLON.Effect.ShadersStore["customFragmentShader"]= "precision highp float;\r\n"+ "// Varying\r\n"+ "varying vec3 vPosition;\r\n"+ "varying vec3 vNormal;\r\n"+ "varying vec2 vUV;\r\n"+ "// Uniforms\r\n"+ "uniform mat4 world;\r\n"+ "// Refs\r\n"+ "uniform vec3 cameraPosition;\r\n"+ "uniform sampler2D textureSampler;\r\n"+ "void main(void) {\r\n"+ " vec3 vLightPosition = vec3(0,20,10);\r\n"+ " \r\n"+ " // World values\r\n"+ " vec3 vPositionW = vec3(world * vec4(vPosition, 1.0));\r\n"+ " vec3 vNormalW = normalize(vec3(world * vec4(vNormal, 0.0)));\r\n"+ " vec3 viewDirectionW = normalize(cameraPosition - vPositionW);\r\n"+ " \r\n"+ " // Light\r\n"+ " vec3 lightVectorW = normalize(vLightPosition - vPositionW);\r\n"+ " vec3 color = texture2D(textureSampler, vUV).rgb;\r\n"+ " \r\n"+ " // diffuse\r\n"+ " float ndl = max(0., dot(vNormalW, lightVectorW));\r\n"+ " \r\n"+ " // Specular\r\n"+ " vec3 angleW = normalize(viewDirectionW + lightVectorW);\r\n"+ " float specComp = max(0., dot(vNormalW, angleW));\r\n"+ " specComp = pow(specComp, max(1., 64.)) * 2.;\r\n"+ " \r\n"+ " gl_FragColor = vec4(color * ndl + vec3(specComp), 1.);\r\n"+ "}\r\n"; // Compile var shaderMaterial = new BABYLON.ShaderMaterial("shader", scene, { vertex: "custom", fragment: "custom", }, { attributes: ["position", "normal", "uv"], uniforms: ["world", "worldView", "worldViewProjection", "view", "projection"] }); var refTexture = new BABYLON.Texture("world.jpg", scene); refTexture.wrapU = BABYLON.Texture.CLAMP_ADDRESSMODE; refTexture.wrapV = BABYLON.Texture.CLAMP_ADDRESSMODE; var mainTexture = new BABYLON.Texture("world.jpg", scene); shaderMaterial.setTexture("textureSampler", mainTexture); shaderMaterial.setTexture("refSampler", refTexture); shaderMaterial.setFloat("time", 0); shaderMaterial.setVector3("cameraPosition", BABYLON.Vector3.Zero()); shaderMaterial.backFaceCulling = false; sphere.material = shaderMaterial; var time = 0; engine.runRenderLoop(function () { var shaderMaterial = scene.getMaterialByName("shader"); shaderMaterial.setFloat("time", time); time += 0.02; shaderMaterial.setVector3("cameraPosition", scene.activeCamera.position); scene.render(); }); } }; document.addEventListener("DOMContentLoaded", startGame, false); I know that in doing this sphere.material = shaderMaterial; I'm over writing the field 360 so try to make the sphere first, render and then apply wave effect, but nothing, some suggestion or example of how to do this? what I really want to do for practice is skydome with the fisheye effect in the camera, that is, everywhere I look goes with that effect in 360 degrees Finally I'm new to this so I'm sorry if the question seems silly. Quote Link to comment Share on other sites More sharing options...
jerome Posted September 24, 2017 Share Posted September 24, 2017 for 1 : http://babylonjsguide.github.io/advanced/Putting.html Quote Link to comment Share on other sites More sharing options...
Aerion Posted September 24, 2017 Share Posted September 24, 2017 I'm looking for a full screen camera animated underwater effect too. The above does not help if there is not a playground example. Ty! Quote Link to comment Share on other sites More sharing options...
NasimiAsl Posted September 24, 2017 Share Posted September 24, 2017 1. ShaderStore All material for any mesh need a shader, babylonJs keep shaders in ShaderStore ( standard material , shader Material and all others shaders ) so when you make shader form shaderMaterial that collect in ShaderStore automaticly but postprocess is shader not for mesh that can change rendered result ( post process = process after rendered ) you haven't access mesh data in post process you can just access screen pixels 2. for change mesh progress you shoud change vertex shader ( for mesh not in PostProcess ) you can change any effect in one vertex shader and for add effect for last rendered result you can add it in post process example : ( startup ) http://www.babylonjs-playground.com/#DMEACA#2 change color by fragmentShader http://www.babylonjs-playground.com/#DMEACA#3 wave jerome and Wingnut 2 Quote Link to comment Share on other sites More sharing options...
Aerion Posted September 24, 2017 Share Posted September 24, 2017 @NasimiAsl Can you make this wave effect work with the camera & control the speed of the waving? this is near perfect! <3 Thank You! Mythros Quote Link to comment Share on other sites More sharing options...
NasimiAsl Posted September 24, 2017 Share Posted September 24, 2017 show me any video or animation i don't understand Quote Link to comment Share on other sites More sharing options...
Aerion Posted September 24, 2017 Share Posted September 24, 2017 @NasimiAsl i'm trying to achieve a fisheye effect but for the entire screen. Not just on an object. Quote Link to comment Share on other sites More sharing options...
Sailarg Posted September 24, 2017 Author Share Posted September 24, 2017 56 minutes ago, Mythros said: @NasimiAsl i'm trying to achieve a fisheye effect but for the entire screen. Not just on an object. I want to do the same, only I thought it was easy to apply the 2 effects to the same object xD Quote Link to comment Share on other sites More sharing options...
Aerion Posted September 25, 2017 Share Posted September 25, 2017 @NasimiAsl i'm trying to achieve a fisheye effect but for the entire screen. Not just on an object. Quote Link to comment Share on other sites More sharing options...
NasimiAsl Posted September 25, 2017 Share Posted September 25, 2017 i am on it Quote Link to comment Share on other sites More sharing options...
Aerion Posted September 25, 2017 Share Posted September 25, 2017 Any luck @NasimiAsl ? Quote Link to comment Share on other sites More sharing options...
NasimiAsl Posted September 25, 2017 Share Posted September 25, 2017 http://www.babylonjs-playground.com/#ILD6VF#3 in progress Quote Link to comment Share on other sites More sharing options...
Aerion Posted September 25, 2017 Share Posted September 25, 2017 Beautiful, @NasimiAsl ! Now if we can make it "animate" by a chosen user speed ( like we're underwater ), that would be PERFECT! <3 Thank you! <3 ~Mythros Quote Link to comment Share on other sites More sharing options...
Sailarg Posted September 26, 2017 Author Share Posted September 26, 2017 15 hours ago, NasimiAsl said: http://www.babylonjs-playground.com/#ILD6VF#3 in progress hey looks great, and seeing as you did gave me other ideas on how to work, on the other hand have more documentation on the shaderBuilder? is that I saw that you used several things that are not in the documentation (or at least I did not get them) Quote 1. ShaderStore All material for any mesh need a shader, babylonJs keep shaders in ShaderStore ( standard material , shader Material and all others shaders ) so when you make shader form shaderMaterial that collect in ShaderStore automaticly but postprocess is shader not for mesh that can change rendered result ( post process = process after rendered ) you haven't access mesh data in post process you can just access screen pixels 2. for change mesh progress you shoud change vertex shader ( for mesh not in PostProcess ) you can change any effect in one vertex shader and for add effect for last rendered result you can add it in post process example : ( startup ) http://www.babylonjs-playground.com/#DMEACA#2 change color by fragmentShader http://www.babylonjs-playground.com/#DMEACA#3 wave And this also helps me to better understand the shaders in babylonjs Thank you very much for taking the time to answer my doubts and to make that example!!!! Quote Link to comment Share on other sites More sharing options...
Aerion Posted September 26, 2017 Share Posted September 26, 2017 @NasimiAsl Can't WAIT to see the new example! <3 Quote Link to comment Share on other sites More sharing options...
NasimiAsl Posted September 26, 2017 Share Posted September 26, 2017 @Sailarg thanks look this : http://cdn.rawgit.com/RNasimiAsl/Extensions/master/ShaderBuilder/Documentation/ShaderBuilderReferences.html and you you most search too but i working on shaderBuilder Tools to make material from wizard i am alone so maybe that take more time but i work on it so hard Quote Link to comment Share on other sites More sharing options...
Aerion Posted September 26, 2017 Share Posted September 26, 2017 @NasimiAsl I can't WAIT to see the demo! It's gonna be SO AWESOME! <3 Quote Link to comment Share on other sites More sharing options...
NasimiAsl Posted September 26, 2017 Share Posted September 26, 2017 Just now, Mythros said: @NasimiAsl I can't WAIT to see the demo! It's gonna be SO AWESOME! <3 i work on it Aerion 1 Quote Link to comment Share on other sites More sharing options...
Sailarg Posted September 26, 2017 Author Share Posted September 26, 2017 8 hours ago, NasimiAsl said: @Sailarg thanks look this : http://cdn.rawgit.com/RNasimiAsl/Extensions/master/ShaderBuilder/Documentation/ShaderBuilderReferences.html and you you most search too but i working on shaderBuilder Tools to make material from wizard i am alone so maybe that take more time but i work on it so hard Good day, you know that I look exactly in that repository and every page link that opened I returned a 404: Not Found and also saw other post like this: and others more. Quote Link to comment Share on other sites More sharing options...
Aerion Posted September 27, 2017 Share Posted September 27, 2017 how's it going, @NasimiAsl ? <3 Quote Link to comment Share on other sites More sharing options...
NasimiAsl Posted September 27, 2017 Share Posted September 27, 2017 http://www.babylonjs-playground.com/#ILD6VF#9 http://www.babylonjs-playground.com/#1V70NA#18 Quote Link to comment Share on other sites More sharing options...
Aerion Posted September 27, 2017 Share Posted September 27, 2017 Friggin' awesome! Quote Link to comment Share on other sites More sharing options...
Aerion Posted September 28, 2017 Share Posted September 28, 2017 @NasimiAsl Can't wait to see it automatic with a speed set by the user! <3 Quote Link to comment Share on other sites More sharing options...
Aerion Posted October 1, 2017 Share Posted October 1, 2017 Ty! <3 Quote Link to comment Share on other sites More sharing options...
Aerion Posted October 2, 2017 Share Posted October 2, 2017 @NasimiAsl Any luck with automatic underwater effect? <3 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.