Search the Community

Hello! I'm upgrading my code, StandardMaterial to ShaderMeterial. my scene colors are scene.clearColor = new BABYLON.Color3(0,0,0); scene.ambientColor = new BABYLON.Color3(1,1,1); and before standardMaterial initializing is like mat = new BABYLON.StandardMaterial('material', scene); mat.ambientColor = new BABYLON.Color3(1,1,1); mat.diffuseTexture = texture.texture; mat.opacityTexture = texture.texture; and new shaderMeterial initializing is like var route = { vertex: "custom", fragment: "custom", }; var options = { needAlphaBlending : true, needAlphaTesting: true, attributes: ["position", "normal", "uv"], uniforms: ["world", "worldView", "worldViewProjection", "view", "projection"] }; mat = new BABYLON.ShaderMaterial('shader', scene, route, options); mat.backFaceCulling = false; mat.setTexture('map', texture.texture); shader code is below BABYLON.Effect.ShadersStore["customVertexShader"]= "precision highp float;\r\n"+ "// Attributes\r\n"+ "attribute vec3 position;\r\n"+ "attribute vec2 uv;\r\n"+ "attribute vec4 color;\r\n"+ "// Uniforms\r\n"+ "uniform mat4 worldViewProjection;\r\n"+ "// Varying\r\n"+ "varying vec2 vUv;\r\n"+ "varying vec4 vColor;\r\n"+ "void main() {\r\n"+ " vUv = uv;\r\n"+ " vColor = color;\r\n"+ " vec4 p = vec4( position, 1. );\r\n"+ " gl_Position = worldViewProjection * p;\r\n"+ "}\r\n"; BABYLON.Effect.ShadersStore["customFragmentShader"]= "precision highp float;\r\n"+ "varying vec2 vUv;\r\n"+ "varying vec4 vColor;\r\n"+ "uniform sampler2D map;\r\n"+ "void main(void) {\r\n"+ " gl_FragColor = texture2D(map, vUv)*vColor;\r\n"+ "}\r\n"; but results are different. before vs after how to make shaderMaterial color like standardMaterial color?

I notice that there's a setTextureArray method, but I don't see any corresponding methods for vec2s, vec3s, etc. As an example, if I want something like: (Typescript) const offsets: Vector2[] = [ new Vector2(1, 1), new Vector2(2, 1), new Vector2(3, 1), new Vector2(4, 1), ] And I want to be able to use this in my shader, like this: (GLSL) uniform offsets vec2[4]; for (int i = 0; i < 4; i++) { vec3 tex = texture2D(sampler, uv * offsets[i]); // do something awesome here } I don't see any easy way to do it. Any clues?

Hi, I am planning to update from 3.1 and was trying the latest preview. Some of my babylonjs files did not render because I checked that the shader material did not override isReadyForSubMesh and the base class's method always returned false. This made my app stuck here because the scene would never be ready: scene.executeWhenReady(function() { engine.runRenderLoop(function() { scene.render(); }); }); Please help.

Hi all, I found something weird while optimizing my code: I was using InstancedMesh as much as possible, and switched all my materials to ShaderMaterial. And then boom, everything disappeared. After a bit of research, it seems instanced meshes will simply not be drawn when their source has a ShaderMaterial assigned. Playground repro: http://www.babylonjs-playground.com/#TWDEA#6 Uncomment lines 40 to 44 to see for yourself. It's actually a bit more complex than that: when you assign a shader material to it, even the source mesh disappears if it has been instantiated (?), but only if its instances are in the field of view. I'm currently looking at BJS code and ANGLE_instanced_arrays doc (the extension used for drawing instanced meshes), but I thought I'd come here to fish for ideas... FYI these are two errors I noticed in the log when this problem showed (errors not always there): drawElementsInstancedANGLE: at least one enabled attribute must have a divisor of 0glDrawElementsInstancedANGLE: attempt to draw with all attributes having non-zero divisorsThanks

Is there a way to pass a video texture to a shader using a similar way as the one used to pass an image texture? shaderMaterial.setTexture("textureSampler", new BABYLON.Texture(imgTexture, scene)); i'm wondering if there are more ways to use video textures in babylon, i have seen that i can set a BABYLON.VideoTexture as a diffuseTexture of a material, but that seems limiting. What if i want to manipulate an object which has a material with a video texture, in the vertex + fragment shaders?

I am new to Babylon and I have some knowledge about unity shaders but I am not sure how can I create shaders for Babylon, can any one suggest me any tool or any link which can help me to design or create some beautiful Shaders for Babylon. as BabylonJs Object's material, as we have shader forge available for unity, can any one suggest me a tool for WebGL shader create tool? that will be your good help for me, I am getting frustrated and need extream help from Babylonjs Community.

Hello! i begin use ShaderMaterial, i copy Vertex and Fragment from http://shaderfrog.com/app/view/9?view but sphere not visible. This is PG: http://www.babylonjs-playground.com/#15249P Where I am wrong? Thanks you!

So I'm trying to recreate this panoramic view generator from Three.js (https://github.com/spite/THREE.CubemapToEquirectangular/blob/master/src/CubemapToEquirectangular.js) that can generate a 360 view from the point. With everything I've read up on, I've so far managed to recreate most parts here: http://www.babylonjs-playground.com/#8HXI0G However applying the ShaderMaterial to my plane, it simply disappears (commenting `plane.material = myShaderMaterial` brings it back). There are *very* many reasons I can imagine to be the cause but I can't think of many ways to troubleshoot it. It uses the same vector and shader code as the Three.js one at least so I guess that shouldn't be the issue. Does anyone have a clue on where I could go from here to reach the next step on my ShaderMaterial?

After wrestling countless hours with a problem (as you do) I came to the conclusion that ShaderMaterial is broken in 3.0. More accurately, I can't get texture lookups to work in vertex shader. But they do work in Babylon 2.5 Add this line in any vertex shader and it wont compile: vec4 test = texture2D(textureSampler, uv);

Made a small demo on how to use the Webcam in 2.6. https://www.babylonjs-playground.com/#EETLE#0 More info about Video here: http://doc.babylonjs.com/tutorials/advanced_texturing. From what I gather you don't need to use a shadermaterial if you just want to display the webcam stream. However applying it to a shadermaterial allows for custom pixelshaders on the stream. [EDIT] Had some time so I made a sample using standard material for the video. https://www.babylonjs-playground.com/#LIVJ8#0 In this one I needed to set the emissiveColor because the scene has no lights. Also use of the webcam requires a HTTPS connection (in Chrome) which might require use of a local webserver if anyone is developing at home.

I am not very familiar with GLSL. I am trying to integrate an Ambient Occlusion Shader with Babylon using ShaderMaterial. The shader source can be found at: https://github.com/mikolalysenko/ao-shader Vertex Shader: https://github.com/mikolalysenko/ao-shader/blob/master/lib/ao.vsh Fragment shader: https://github.com/mikolalysenko/ao-shader/blob/master/lib/ao.fsh I've setup the shader in CYOS at: http://www.babylonjs.com/cyos/#1F1POU CYOS is throwing some errors: [.Offscreen-For-WebGL-0x7f9aaa872c00]PERFORMANCE WARNING: Attribute 0 is disabled. This has significant performance penalty /cyos/#1F1POU:1 [.Offscreen-For-WebGL-0x7f9aaa872c00]RENDER WARNING: there is no texture bound to the unit 0 When using the shader with `shaderMaterial` like: var aoShader = new BABYLON.ShaderMaterial("AO", scene, { vertexElement: "vertexShaderCode", fragmentElement: "fragmentShaderCode" }, { attributes: ["attrib0", "attrib1"], uniforms: ["projection", "view", "model", "tileCount", "tileSize", "tileMap"] }); aoShader.setFloat('tileSize', 0.16); This produces an error: `babylon.js:4 WebGL: INVALID_OPERATION: drawElements: no buffer is bound to enabled attribute` I believe the Shader is dependent on some external mesh data. I'm not sure how to pass it.

IF ITS NOT ALREADY IN BABYLON.JS (and i just don't see it) Can we embed vertex and fragment programs in the .babylon file on the 'materal' object of the material customType="BABYLON.ShaderMaterial" Example: { "customType" : "BABYLON.ShaderMaterial", "name" : "Items", "id" : "dadbe3ae-445f-4fe4-b83f-000b27b2b8d4", "backFaceCulling" : true, "wireframe" : false, "alpha" : 1, "shaderPath" : "Items", "options" : { "attributes" : [ "position", "uv" ], "uniforms" : [ "worldViewProjection" ], "needAlphaBlending" : false, "needAlphaTesting" : false, "samplers" : [], "defines" : [] }, "textures" : {}, "floats" : {}, "floatArrays" : {}, "colors3" : {}, "colors4" : {}, "vectors2" : {}, "vectors3" : {}, "vectors4" : {}, "matrices" : {}, "matrices2x2" : {}, "matrices3x3" : {} }, Can we add somewhere in a 'base64' encoded string for the shader programs... Something like: "vertexBase64" : "*** BASE64 ENCODED VERTEX PROGRAM ***", "fragmentBase64" : "*** BASE64 ENCODED FRAGMENT PROGRAM ***", Then in the client side Material parser... If we got base64 parsdedMaterial data with our programs already there... no need to make TWO separate server trips to get our shader programs... plus the shader programs are then cached when storing .babylon files in indexedDB. Also it can easily work with sandbox and just drag that single .babylon file to sandbox (ONCE sandbox get the PR fix to use BABYLON.ShaderMaterial vertexBase64 and fragmentBase64) then folks custom shaders will work on the sandbox... Right now if you have BABYLON.ShaderMaterial defined in your .babylon file (and don't use a qualified path) the server will never find or use them (unless you know where those files end up after posting to server and are available ... still would hard code sandbox path to shader program in your .babylon file.).. For some reason if don't use path and just name... it looks in '/src/Sharder/myShader.vertex.fx' Anyways I'm going to play with the github Material.Parse stuff to use material.vertexBase64 and fragmentBase63 IF PRESENT... After i had them to the ShaderMaterial class... Hope you guys like this idea ... That last one to get metadata added seems like a tough sell... I hope you consider this...

Hello everyone. I've found some issue. I have a mesh with skeleton animation. Also, I have a specific shader used in ShaderMaterial. When I assign the ShaderMaterial to the mesh. The animation disappear, but the effect of shader is working. How do I have the animation with my shader?

Hi! I found small bug in serializer. It crash, if i try serialize scene with ShaderMaterial's. Uncaught TypeError: Cannot read property 'asArray' of undefined serializeMaterial @ babylon.max.js:24503 SceneSerializer.Serialize @ babylon.max.js:25000 ambientColor and etc property's is not present in ShaderMaterial's. I think we need one 'if' there, who exclude all shaderMaterials from srialize process.

Hey folks, I am trying to understand a bit more about shaders/customMaterials/shaderMaterials... I didn't get into alot yet, I just wanted to play around a bit so I did follow this tutorial: http://blogs.msdn.com/b/eternalcoding/archive/2013/08/06/babylon-js-creating-a-convincing-world-for-your-game-with-custom-shaders-height-maps-and-skyboxes.aspx and tried to fill the gaps with this: http://blogs.msdn.com/b/eternalcoding/archive/2014/04/17/learning-shaders-create-your-own-shaders-with-babylon-js.aspx Based on that I modified a previous scene I had to get this output: http://p215008.mittwaldserver.info/moveWithCollisions/ The problem now is, that if you jump into the water (click to move) the part of the player model that is under the water is not visible (same for the ramps and the cube). I thought I could set some kind of transparency on the mesh or the material but it somehow didn't work the usual way. What would I have to do to get this kind of transparency for the water?

OpenGL ES declares the following types as valid within the GLSL language: voidboolintfloatvec2,vec3,vec4bvec2,bvec3,bvec4ivec2,ivec3,ivec4mat2,mat3,mat4sampler2DsamplerCubewhy does the BABYLON.ShaderMaterial class only have set-functions for TextureFloat, FloatsColor3,Color4Vector2,Vector3and MatrixI need a boolean uniform in my shader, is there any way I can still set a value for it or could you please add the missing set-functions?

Hi guys, I have read some tutorials about ShaderMaterial, but I don't see in any of then if it is possible to add custom attributes apart from position, uv and normal. What I would like is create a list of floats (one for each position) and keep it in the mesh (so far so good). When creating the ShaderMaterial, I want to add this list as another attribute so I can take the right value for each position when rendering the material and work with it. Any ideas? Cheers.