Search the Community

Showing results for tags 'shaders'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • HTML5 Game Coding
    • News
    • Game Showcase
    • Coding and Game Design
  • Frameworks
    • Phaser
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 40 results

  1. 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?
  2. Tutorial: Texture masks using a shader

    Hi! I started a blog with tutorials about PlayCanvas and WebGL development. This is one of the first tutorials, on how to use shaders to mask and animate textures in real time. Let me know if you find this useful! http://pirron.one/playingincanvas/texture-masks-using-shader You can follow this tutorials on twitter as well: https://twitter.com/playingincanvas
  3. 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.
  4. Work offer

    Hi guys, After some previous attempts to solve some problems in our project, we saw that we were not getting anywhere so we decided that we needed a professional help. This is the offer we published on the Upwork platform, so if anyone is seriously interested in completing the job, please contact us. This is the text of the offer: _______________________________________________________________________________________________________________________________ Representation of a snow-covered mountain scene in Babylon.js Engine The task consists of representing a snow-covered mountain landscape with forest and water bodies in Babylon.js. The focus has to be made on the visual attractiveness while still offering high performance. An example of a scene like that would be this one (Scene1), made in Three.js. We are providing a basic scene (Scene2) made in Babylon.js, and the following improvements have to be made to this scene: 1) Implementing a GLSL Shader / Babylon.js Custom Material which accepts the following criteria: Terrain Texture: - Rocks: should be a procedural texture with a nice natural transition between the snow and the rock texture like in the Scene1. - Water: should be the WaterMaterial provided by Babylon.js Material library. - Snow: it is already acceptable in the Scene2, but any visual improvement is welcome. If needed, the mask image for the texture mapping can be also provided as three separated alpha mask images, one for each type of texture. Furthermore, it has to support a Dynamic Texture on top of the Terrain Texture, so that it should be possible to draw directly on the ground. An example of this would be this scene (Scene3), implemented with ShaderBuilder : The problem with this scene is that it lacks bump maps, fog and shadow effects. There should be visual consistency across the most popular browsers: Chrome, Firefox, Edge and Safari. _______________________________________________________________________________________________________________________________ If you have any questions, we're ready to answer them. Thanks!
  5. So, I'm trying to convert a shader from shadertoy, I'm close but still can't get it working. Also in my actual scene it doesn't seem to be working at all, but it's hard to tell if it's related to the issue I am having w conversion, since I need to rotate the sphere to get it to show up to begin with. Shader is here: (it appears blank at first, but if you rotate it youll start to see the fire. The actual effect I am going for you will see only if you rotate it just right so that you see the fire starting with the white in the middle, and it filling up the sphere). http://cyos.babylonjs.com/#M11GKA The source shader is here: https://www.shadertoy.com/view/lsf3RH So the one place I was not sure how to proceed, was mapping over the iResolution variable (which shadertoy states is the viewport resolution). I played around with a bunch of different things and ended up trying the camera input, which works, but requires rotating the mesh to see it at all. Anyone know what input would map over to viewport resolution (or how to get it), and or what I am doing wrong/missing here?
  6. 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.
  7. Convert Unity Shader into Babylonjs

    i have one shader which is working fine with Unity Engine, now i want the same into BabylonJs Engine's Application so can any one suggested me the Tool which will help me to resolve this. i am new to shader and its implementation. i can not write shaders as frequently available in Unity so i highly require a tool which can convert that shader into javascript WebGL code.
  8. Bad Filter/Shader performance ?

    I recently started experimenting with Filters (shaders) and while it runs well when using a single filter on the world, applying a filter to my sprites seems to be killing performance. Even a simple filter that does nothing but output the color set on just 50 sprites is dropping my framerate from 50 to 18, even when sprites are offscreen. Is that to be expected? It makes filters virtually unusable unless very sparingly.
  9. Hi everybody ! While I was writing my latest shader, I juste came up with annoying errors like this one : Guess what ? No, my typo is NOT at line 85. And I wondered why we couldn't have the real source code. The one after conversion, addition of defines and insertion of includes. Therefore the one where the typo actually IS at line 85. I know that getVertexShaderSource() function exists but it doesn't work without a successfully compiled program (and on success, no need of debugging). Guess what ? It's easy to get ! http://www.babylonjs-playground.com/#YX38N7#3 (Open your console) I would like to know, @Deltakosh , would you be interested in a PR for that or is it already implemented somewhere/useless ? Because in my PR I had to compute again the migratedVertexCode and migratedFragmentCode values, but these ones are available when entering the Effect.noError callback in the _prepareEffect() function... If you're interested, I see two options : - Just returning the two values in the onError callback and let the user make something with that. - Or printing the source code with numbered lines by default exactly as you print the defines Just let me know what you think is better. PeapBoy
  10. Shadows in Custom Shader

    Dear Babylon JS community, we as a company have decided, that we want to use Babylon JS for a larger project. For this we have specific requirements for what the shaders have to be able to do. I will first state the problem I am trying to solve and then give the context, for possible alternative solutions. PROBLEMS: For our more complex shader computations we want to integrate shadows from at least one shadow-generator in a custom shader. For reasons of confidentiality I can not submit our current project code, that is why I created this test playground: http://www.babylonjs-playground.com/#VZKI0U We want to get the influence of all shadows on a fragment as a float value in the shader for further computations. For this we encountered the following problems: - Mapping to shadow-map coordinates seems to be wrong - using functions like computeShadow() from #include<shadowsFragmentFunctions> yields not-declared-error - computeShadow() yields always 1.0 as a result COURSE OF EVENTS: We started playing around with the standart material and shadow generators and quickly got them to work. we wrote a small utility function for setting up the shadow generators, which you can find at the top of the linked playground code. After this we played around with uploading textures into our custom shaders and were able to create the desired effects. We looked into uploading the shadow-map and the shadow-generator parameters into the shader, which was sucessful. You can find the uploads at line 113-115 of the linked playground code. Since we do not want to write the mapping to shadow map coordinates ourselves, we looked if there is already existing code, which we found in the shadowsVertex.fx, shadowsFragment.fx and shadowsFragmentFunctions.fx files. While trying to get the mapping right, we encountered the aformentioned problems. We were not able to get correct results regarding the shadow-uv-coordinates, shaderincludes like the above mentioned #include<shadowsFragmentFunctions> yields a "computeShadow() has not been declared" error when used in the code after the statement and what code we currently copied from these files seems to always yield 1.0 as a result for the sha- dow intensity. We are turning to you now, because we are at a point where we cannot find the errors in our approach/code anymore. We are required to use Babylon JS version 2.5 in our project. Although it didn't seem to make a difference for the shader code we looked through I wanted to mention it. CONTEXT: Our scene is basically shadeless, with multiple materials per object, distributed via a mask. Therefor we combine a precomputed light texture (for individual objects) with a diffuse texture and multiple material textures blended via a mask texture. Since we require no lighting computation we just want the shadow values to get some visual depth in the scene. Therefor the standart material seems to be not sufficient for our purposes, hence the reliance on a custom shader. I saw code that created a custom material with the standart shaders and then re- placed parts of the vertex and fragment code via a function. We would be ready to do this kind of code insertion, if it yields correct shadow information. Sadly I cannot find the example project for this anymore, so if you could provide a link to a simmiliar source it would be much appreciated. Thank you sincerely for your time and help With best regards from the green heart of Germany The Mainequin Team
  11. When I try using shaders with textures I end up with WARNING: there is no texture bound to the unit 0 Sometimes I get so many it just stops 'cos there are too many webGL errors. http://www.babylonjs-playground.com/#TRNYD#16 I think the texture is not fully loaded when its being accessed.
  12. We use material.effect.setFloat and setTexture so on an so forth... Is there a way to GET a rule from a shader... Unless i am just stupid and don't see it, again How do or can we event getFloat on a value that we can calculate in the shader... or even some present GLSL output property we can read ???
  13. Hi, I noticed that Babylon's implementation of VR camera rig is such that it calculates distortion correction inside of fragment shader. Since the calculations are done per pixel, it results in a steep performance drop, especially on high-density screens, which renders the rig unusable for any mobile phone. On a simplest of scenes, I get only 30fps on Google Pixel. I wonder why this particular method has been chosen over, say, displaying the rendered texture on a dense plane (20x20) and then performing all calculations by vertex of that plane. With this method we would be performing calculations some 400 times per eye (on a 20x20 mesh), versus over 900 000 times (for each pixel on a QHD screen, for example). What I am referring to is the 2nd approach described here: http://smus.com/vr-lens-distortion/ Both WebVR polyfill and Google VR View use this method and I notice no performance drop AT ALL when running their examples. The reason I ask is because I am thinking of developing this method for Babylon, simply because current pixel-based implementation is unfortunately completely unusable. But before I start I'd, like to know if there is some underlying problem, inherent to Babylon, to implement this method? Thanks
  14. Shader Talk

    So I figured with a few people making some cool shaders now and the purposed improvements to the CYOS. I figured we should have a thread for shader development to showcase what people are making and talk about different methods and concepts. To kick things off I figured id post a procedural skymap... this is a cleaned up version of the first on I posted last night and is based off a standard box element. I have not tested it in scene yet but the CYOS output is promising. Ill be looking to add volumetric weather here soon and will be making the suns position dependent on a light on the scene. Anyways feel free to comment it is pretty much a direct port of a Atmospheric GLSL process I found on github. http://www.babylonjs.com/cyos/#14WKFU#1 Does anyone have any good resources for volumetric cloud rendering with a light source? Im reading up on this first http://www-evasion.imag.fr/Publications/2008/BNMBC08/clouds.pdf
  15. Hi everyone ! Being a newbie to a lot of things dev-wise, I only have the 'creative' approach, then learn what I can about how to do it, but some things are obviously out of my reach so far ... But I keep learning little bits by little bits, and hopefully someday I'll be able to contribute more deeply ! I have understood that Shaders can be powerful, and ran across that awesome site that some of you know : shadertoy.com. It has lots of amazing examples like those : Fog example : https://www.shadertoy.com/view/Msf3zX Clouds example : https://www.shadertoy.com/view/XslGRr So my question is quite simple, would Babylon.js be able to render something like those examples above ? They look amazing !
  16. What are all the babylon possible shader attributes and uniforms: // Attributes attribute vec3 position; attribute vec3 normal; attribute vec2 uv; // Uniforms uniform mat4 worldViewProjection; i assume they will all be equiv to some webgl attribute (if you had to do in strait webgl). So i assume: position = gl_Vertex -> To vec3 normal = gl_Normal -> To vec3 uv = gl_MultiTexCoord0 - To vec2 and worldViewProjection = gl_ProjectionMatrix * gl_ModelViewMatrix and so on... What are all the other possible attributes and uniforms, and most importantly what do they equal in regular GLSL. A... I just would to really understand where each attribute and uniform comes from. B... I am trying to make a 'Universal Unity Babylon GLSL Shader Template' for use directly in the Unity for creating Babylon shaders. Minimal Example Shader For Unity: Shader "BabylonJS/Sample basic shader" { // defines the name of the shader SubShader { // Unity chooses the subshader that fits the GPU best Pass { // some shaders require multiple passes GLSLPROGRAM // here begins the part in Unity's GLSL #ifdef VERTEX // here begins the vertex shader void main() // all vertex shaders define a main() function { gl_Position = gl_ModelViewProjectionMatrix * gl_Vertex; // this line transforms the predefined attribute // gl_Vertex of type vec4 with the predefined // uniform gl_ModelViewProjectionMatrix of type mat4 // and stores the result in the predefined output // variable gl_Position of type vec4. } #endif // here ends the definition of the vertex shader #ifdef FRAGMENT // here begins the fragment shader void main() // all fragment shaders define a main() function { gl_FragColor = vec4(0.0, 1.0, 0.0, 1.0); // this fragment shader just sets the output color // to opaque red (red = 1.0, green = 0.0, blue = 0.0, // alpha = 1.0) } #endif // here ends the definition of the fragment shader ENDGLSL // here ends the part in GLSL } } } My intent was to parse the shader text blocks for the vertex and fragment sections during export. Then do some kind 'key text replace' in the vertex part that reads all the attributes and uniforms replace with babylon.js equivalent at export. I would also love to base64 encode this vertex and fragment program right in the ShaderMaterial section of the .babylon son file. I posted a topic on this, hopefully others can see the benefits as well. Anyways... Any info on all the BUILT-IN attributes and uniforms that babylon.js exposes (and how they are calculated so i can duplicate that calculation when running in unity editor) THANK YOU VERY MUCH
  17. Shader Conversion

    Would anyone like to convert this http://shaderfrog.com/app/view/904 to a BabylonJS useable format, I know nothing about shaders at this time and would like to use this one since it is freely available to use. It exports to Three.js format which appears to be allot similar to BabylonJS, if it is simple could someone explain what is needed, if it is not so simple would you care to help out. If there is a fee, please let me know! Also, it would be AWESOME to see someone make an exporter for BabylonJS for ShaderFrog, just an idea! In the meantime I think it's time to learn a bit about shaders.. looks very mathy..
  18. Shaders Forum

    Do you know any active shaders forum with shaders experts where I can learn shaders properly, ask for examples, etc? It's not that the shaders experts in this forum are not good, but there are very few and they have no time to answer my countless questions. Hopefully you don't mind me asking here about other forums, if it's a problem, you can delete this topic.
  19. Hi! I'm trying to apply one filter to a large number (~256) of small (32x32 px) sprites. Within the filter, I'm using vTextureCoord to get the current sprite's coordinates, to draw borders on it. vTextureCoord breaks, apparently referring to the containing canvas's coordinates instead of the individual sprites' coordinates. BUT if I apply that same filter twice (two elements in .filters[] array), in one of the copies vTextureCoord actually does point to the sprite coordinates, and borders are drawn correctly. The other copy still points to the canvas coordinates, and the whole thing becomes laggy for some reason, and filters don't get removed when they should, too. Live version (hover over the individual sprites to apply filter second time): http://uoowuo.github.io/cellulata/ All the sprites are white-tinted because of the first filter invocation, with incorrect vTextureCoord coordinates. Code: Shader https://github.com/uoowuo/cellulata/blob/master/src/classes/shaders.js#L48 First filter application https://github.com/uoowuo/cellulata/blob/master/src/classes/cell.js#L42 Second filter application https://github.com/uoowuo/cellulata/blob/master/src/classes/cell.js#L83 Hover is just for the sake of illustration, if I apply filter twice statically to all sprites, the behavior is still the same. Thanks for your time!
  20. Problem with shader

    Hello. I try apply shader to simple object but have webgl warning and black model. On http://www.babylonjs.com/cyos/#1UJ9WV shader is work. Please tell me where error? I try place shaders in head of page like <script type="application/vertexShader" id="vertexShaderCode"> precision highp float; // Attributes attribute vec3 position; attribute vec2 uv; // Uniforms uniform mat4 worldViewProjection; // Normal varying vec2 vUV; void main(void) { gl_Position = worldViewProjection * vec4(position, 1.0); vUV = uv; } </script> <script type="application/fragmentShader" id="fragmentShaderCode"> precision highp float; varying vec2 vUV; uniform sampler2D textureSampler; void main(void) { gl_FragColor = texture2D(textureSampler, vUV); } </script> and call it like var amigaMaterial = new BABYLON.ShaderMaterial("amiga", $rootScope.scene, { vertexElement: "vertexShaderCode", fragmentElement: "fragmentShaderCode" }, { attributes: ["position", "normal", "uv"], uniforms: ["world", "worldView", "worldViewProjection", "view", "projection"] }); sphere1.material = amigaMaterial; Strange but on http://www.babylonjs-playground.com/#25OIA it not work totaly... Sory for my english...
  21. http://www.babylonjs-playground.com/#XSUTC#0 http://www.babylonjs.com/cyos/#CNPYR#5
  22. Learning shaders in BabylonJS

    I'd like to learn shaders in BabylonJS. I covered the basics in the link below and I understand the syntax and concept, however I still can't say I fully understand to the point where I'm able to write my own shaders. https://www.eternalcoding.com/?p=113 Would you be able to help me grasp everything I need to know?
  23. I've been working recently on a lighting system for my game, and I've noticed something awkward when passing render textures to fragment shaders. TL;DR: Why does uSampler act normally when any other RenderTexture passed into a shader needs vTextureCoord.y *= -1.0 to prevent it from being inverted on the Y axis? I'll try to explain with the code as concisely as I can, but I don't have a demo I can show for this issue. I'm drawing a game world to a render texture a little like this: // When booting the renderer: var diffuse = new Phaser.Sprite(game, 0, 0, new Phaser.RenderTexture( game, game.width, game.height, null, Phaser.scaleModes.NEAREST )); var cameraMatrix = new Phaser.Matrix(1, 0, 0, 1, -game.camera.x, -game.camera.y ); // Outside the renderer, after booting it: var filter = new Phaser.Filter(game, { diffuse: { type: 'sampler2D', value: diffuse.texture } }, game.cache.getShader('diffuse')); game.world.filters = [filter]; // Later on in the rendering pass: // Retain existing filters filters = game.world.filters; // Render the world to the texture without filters game.world.filters = null; diffuse.texture.render(game.world, cameraMatrix, true); // Set back the filters game.world.filters = filters; It's part of a sprite because that makes it easy to output on the stage for debugging (to view it, really). If I do this, it renders fine. Now, my lighting system acts on this diffuse texture to apply some shaders. I've finally got my system working, but unfortunately with a lot of uv.y *= -1.0; hacks to get around this Y inversion issue I've been finding when running a render texture through a shader sampler. I would rather remove these hacks and have the shaders read more cleanly. When I use a Filter to draw the resulting lit texture over the game world, it is inverted on the Y axis. This can be demonstrated with the following fragment shader and Phaser Filter: precision highp float; varying vec2 vTextureCoord; uniform sampler2D uSampler; uniform sampler2D diffuse; void main() { gl_FragColor = texture2D(diffuse, vTextureCoord); } filter = new Phaser.Filter(game, { diffuse: { type: 'sampler2D', value: diffuse.texture } }, game.cache.getShader('diffuse')); world.filters = [filter]; Why is it flipped here and uSampler isn't? For example, if I change the fragment shader to use uSampler: void main() { gl_FragColor = texture2D(uSampler, vTextureCoord); } It doesn't render upside down. I've tried looking for the reasoning behind this but can't find much. A pixi bug perhaps? Or should I just pass all textures to my shaders with flipY set to true? new Phaser.Filter(game, { diffuse: { type: 'sampler2D', value: diffuse.texture, textureData: { flipY: true } } }, game.cache.getShader('diffuse')); Is uSampler flipped automatically? That might explain. Cheers!
  24. Yo! I've started developing a game and I've been learning a hell of a lot about WebGL for lighting and shadows, and I'm hoping to implement some sort of lighting pipeline, following a technique like this: http://ahamnett.blogspot.co.uk/2013/05/2d-shadows-shader.html This means I'll need to process textures in a fragment shader, and then process scene using the resulting bitmap in another shader. Just to test, I tried rendering a part of a game world to a render texture. This worked fine without any shaders (Phaser/PIXI filters) applied. The render texture is displayed using a Sprite on the right hand side, just so I could see the result. Cool. However, if I add filters to what I'm rendering, the perspective gets all messed up. For example, my lighting fragment shader: So instead of scratching my head over this, having done quite a bit of Googling the past couple of days, I thought I'd ask for help here. Is there a way to render to a render texture with shaders applied correctly? Is there a typical approach to setting up a pipeline like this? Essentially I'm looking to perform transformations as described in the above article so I can start casting some sweet shadows, but I can't quite see how yet. The perspective is fine if I apply shaders to the stage instead, but of course then I have no shader processing for the resulting render texture: