lagauche Posted November 24, 2017 Share Posted November 24, 2017 Hey All, Can I use any GLSL fragment or vertex shader (including 3d raymarching stuff) as a texture in Babylonjs including animated ones? I've done some google searches and I know you can use some, but what are the limitations? For example could I put any animated texture from GLSL Sandbox http://glslsandbox.com/ onto a Babylon.js plane mesh? Do I need to put the uniform variables in the render loop for animation to work? Super hoping the answer is yes, but any and all info will be helpful? Quote Link to comment Share on other sites More sharing options...
lagauche Posted November 24, 2017 Author Share Posted November 24, 2017 Any idea why the official shader material guide playground isn't working? http://www.babylonjs-playground.com/#NCY1Q#1 Quote Link to comment Share on other sites More sharing options...
Hersir Posted November 24, 2017 Share Posted November 24, 2017 I got error on your playground [Warning] [blocked] The page at https://www.babylonjs-playground.com/#NCY1Q#1 was not allowed to run insecure content from http://cdn.rawgit.com/RNasimiAsl/Extensions/master/ShaderBuilder/Babylonx.ShaderBuilder.js. Quote Link to comment Share on other sites More sharing options...
MarianG Posted November 24, 2017 Share Posted November 24, 2017 Hi, I think ShaderBuilder is deprecated, but you can use https://doc.babylonjs.com/how_to/shader_material instead And yes, you can use variables from shader in the renderer loop, like here :https://www.babylonjs-playground.com/#0CUISJ#0 Quote Link to comment Share on other sites More sharing options...
lagauche Posted November 24, 2017 Author Share Posted November 24, 2017 Thanks for the links! Quote Link to comment Share on other sites More sharing options...
lagauche Posted November 24, 2017 Author Share Posted November 24, 2017 I'm having a few issues right now using shaders with images. I have a javascript variable for my uniforms like this: var tuniform = { iGlobalTime: { type: 'f', value: 0.1 }, iChannel0: { type: 't', value: new BABYLON.Texture("/textures/cloudsPo2.jpg", scene) }, iChannel1: { type: 't', value: new BABYLON.Texture("/textures/internalFlesh1024Po2.jpg", scene) }, } Am I doing this wrong? I converted it from Three.js where this, for example, works iChannel0: { type: 't', value: new THREE.TextureLoader().load( 'textures/cloudsPo2.jpg') }, it would be very hard for me to convert this to a playground. Hopefully it's possible to see what I'm doing wrong without. I'm just wondering how to get that image loaded. Quote Link to comment Share on other sites More sharing options...
MarianG Posted November 24, 2017 Share Posted November 24, 2017 var amigaMaterial = new BABYLON.ShaderMaterial("amiga", scene, { vertexElement: "vertexShaderCode", fragmentElement: "fragmentShaderCode", }, { attributes: ["position", "uv"], uniforms: ["worldViewProjection"] }); and now you can set amigaMaterial.setFloat("iGlobalTime", 0.1); amigaMaterial.setTexture("iChannel0", new BABYLON.Texture("/textures/cloudsPo2.jpg", scene)); amigaMaterial.setTexture("iChannel1", new BABYLON.Texture("/textures/internalFlesh1024Po2.jpg", scene)); Quote Link to comment Share on other sites More sharing options...
Sebavan Posted November 24, 2017 Share Posted November 24, 2017 This is also an interesting read if you intent to create your own materials: https://www.eternalcoding.com/?p=263 Else you have 2 approaches: ShaderMaterial or ShaderBuilder . Main diff is ShaderMaterial will help with your own shader whereas ShaderBuilder will better help customizing the default behavior of BJS and is maintained by @NasimiAsl as an extension. Following on @bulisor sample, you might also need to precise the uniform in the uniform list of the new ShaderMaterial line. Quote Link to comment Share on other sites More sharing options...
MarianG Posted November 25, 2017 Share Posted November 25, 2017 I understood @Sebavan , but can you please explain me when it's require to precise the uniform in the uniform list and when it's optional, because I saw a lot of playgrounds without it. Thank you. On 24.11.2017 at 4:48 AM, lagauche said: Any idea why the official shader material guide playground isn't working? http://www.babylonjs-playground.com/#NCY1Q#1 As @lagauche said, ShaderBuilder seems to not work. Quote Link to comment Share on other sites More sharing options...
lagauche Posted November 25, 2017 Author Share Posted November 25, 2017 @bulisor thank you for that code! I am going to try it this afternoon! Quote Link to comment Share on other sites More sharing options...
NasimiAsl Posted November 25, 2017 Share Posted November 25, 2017 shader Builder is work fine in any sample but you need add BABYLONX.shaderbuilder.js too also and it is complicated and optimized Quote Link to comment Share on other sites More sharing options...
NasimiAsl Posted November 25, 2017 Share Posted November 25, 2017 http://www.babylonjs-playground.com/#NCY1Q#3 uniform sample http://www.babylonjs-playground.com/#NCY1Q#4 you can use default uniform for set general uniform like ( camera - time - ... )by this http://www.babylonjs-playground.com/#NCY1Q#5 and you can manage you multi material by one shader too http://www.babylonjs-playground.com/#NCY1Q#6 http://www.babylonjs-playground.com/#NCY1Q#8 vertex control you can set 20 diffrent material in one and manage it by flagUp and flagDown docs : http://cdn.rawgit.com/RNasimiAsl/Extensions/master/ShaderBuilder/Documentation/ShaderBuilderReferences.html * note sample damaged in github brianzinn, jerome and MarianG 3 Quote Link to comment Share on other sites More sharing options...
Sebavan Posted November 25, 2017 Share Posted November 25, 2017 @bulisor The uniform list needs to be filled before the Effect is prepared (time when the shader is built and the associated uniform location are cached). This happens the first time we are using the material. (draw call requiring to use the shaderProgram) Calling setFloat/setTexture/... on the material will push the uniform into the names list (the same one as the constructor). So as long as the set method are called before drawing the next frame where the material is in use it is ok. MarianG 1 Quote Link to comment Share on other sites More sharing options...
MarianG Posted November 25, 2017 Share Posted November 25, 2017 Thank you guys, really helpful as usual. Quote Link to comment Share on other sites More sharing options...
lagauche Posted November 25, 2017 Author Share Posted November 25, 2017 11 hours ago, NasimiAsl said: @NasimiAsl Do you have any examples where you use a longer or more complex fragment shader? The examples you linked are very cool but they're simple image textures. I'm wondering if you can use crazy stuff like this or any others from glslsandbox or shadertoy: http://glslsandbox.com/e#43700.0 http://glslsandbox.com/e#43801.0 http://glslsandbox.com/e#43701.0 Quote http://www.babylonjs-playground.com/#NCY1Q#3 uniform sample http://www.babylonjs-playground.com/#NCY1Q#4 you can use default uniform for set general uniform like ( camera - time - ... )by this http://www.babylonjs-playground.com/#NCY1Q#5 and you can manage you multi material by one shader too http://www.babylonjs-playground.com/#NCY1Q#6 http://www.babylonjs-playground.com/#NCY1Q#8 vertex control you can set 20 diffrent material in one and manage it by flagUp and flagDown docs : http://cdn.rawgit.com/RNasimiAsl/Extensions/master/ShaderBuilder/Documentation/ShaderBuilderReferences.html * note sample damaged in github Quote Link to comment Share on other sites More sharing options...
lagauche Posted November 25, 2017 Author Share Posted November 25, 2017 @bulisor I'm trying out your code but I'm still getting an error in console that says Source map error: TypeError: NetworkError when attempting to fetch resource: Source Map URL: babylon.textureTools.js.map What am I missing? Is this an extension I need to add that is not including with babylon max? Quote Link to comment Share on other sites More sharing options...
lagauche Posted November 26, 2017 Author Share Posted November 26, 2017 Here is a playground with my code. I think I am getting close. I'm new to the playground so unfortunately this code is broken on it, but at least you can see what I'm doing : ) http://www.babylonjs-playground.com/#NCY1Q#14 edit: It's now working: https://drive.google.com/open?id=1SwhYyYoxZcwDhwh_qiuoBlEMBXdeQWy0 I was unable to load the images in firefox using just drag and drop of my index.html (no local server). I needed a local server to load images! This is a bug or by design in babylon.js because it works fine with THREE.js Quote Link to comment Share on other sites More sharing options...
NasimiAsl Posted November 26, 2017 Share Posted November 26, 2017 7 hours ago, lagauche said: Do you have any examples where you use a longer or more complex fragment shader? The examples you linked are very cool but they're simple image textures. I'm wondering if you can use crazy stuff like this or any others from glslsandbox or shadertoy: hi thanks to reply i try more to make useful tools and samples (just personal opinion) so in shaderBuilder (if you know math) you can make all shader Easier than glsl http://www.babylonjs-playground.com/#NCY1Q#16 - night sky 6 line but if you like see some complicated new technic you can try this samples http://www.babylonjs-playground.com/#2LAQZC#25 - morph control fully in gpu side http://www.babylonjs-playground.com/#2LAQZC#20 Quote Link to comment Share on other sites More sharing options...
MarianG Posted November 26, 2017 Share Posted November 26, 2017 @NasimiAsl you're definitely the master of the shaders, and I bet you're an alien or something like that I'm happy to hear that @lagauche. NasimiAsl 1 Quote Link to comment Share on other sites More sharing options...
NasimiAsl Posted November 26, 2017 Share Posted November 26, 2017 alien Duplicate it too fast but i am alone (in my country) i prefer "reddik" i think i am so bad in documentation need fix myself 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.