Search the Community

Showing results for tags 'webgl'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


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

Found 332 results

  1. Anyone seeing a strange white rectangle drawn in the Phaser game canvas in Google Chrome (Version 56.0.2924.87 (64-bit)) WebGL mode on OSX Sierra (10.12.3)? I thought that it was just me having the problem. I am not using WebGL / auto as a temporary work around. Other Phaser examples I have seen are working fine.
  2. cloth

    Hi, i trying to emulate a cloth animation follow this: I am trying to apply cloth to a garment (obj. file / shorts), and then do a collision with a manikin, but when i apply it, it's look like this, i dont know why:
  3. Hi everyone, I have a strange issue with the webgl and tilesprite behavior which seems for me to not follow the Phaser documentation. My background is contained inside a sprite atlas described by a json file. All the sprites have dimension equal to a power of 2 (height and width) and the png file too. I have followed the tutorial It works great with this example and the octopus dimensions used are "w":62,"h":94 But, when I change one of this parameters to a power of 2, for example: "w":64,"h":94, the tilesprite has a strange behavior: the entire image is displayed from x:0 y:0 No problem with canvas. I suppose it is a newbee issue... any help? Thanks!
  4. Hey I am currently polishing off my Breakout or Brick-Breaker game (whichever you prefer to call it). I am trying to add music to the game when the start button is pressed and then sound effects every time a brick is destroyed. Unfortunately Phaser keeps saying Key "Sample" is not found in cache. I have tried using Phasers examples and basing the music off that but to no avail. I am new to programming with Phaser and would really appreciate the help. When the game is finished i will post a link. Thanks in Advance Pheaset here is my code var game = new Phaser.Game(480, 320, Phaser.AUTO, null, { preload: preload, create: create, update: update }); var firework;; var music = Phaser.Sound; var lives = 1; var livesText; var lifeLostText; var ball; var paddle; var bricks; var newBrick; var brickInfo; var scoreText; var score = 0; var playing = false; var startButton; function preload() { game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; game.scale.pageAlignHorizontally = true; game.scale.pageAlignVertically = true; game.stage.backgroundColor = '#eee'; game.load.image('ball', 'ball.png'); game.load.image('paddle','paddle.png'); game.load.image('brick', 'img/brick.png') game.load.spritesheet('ball', 'img/wobble.png', 20, 20); game.load.spritesheet('button','button.png', 120, 40);'Good-Riddance', 'Good-Riddance.mp3'); } function create() { game.physics.startSystem(Phaser.Physics.ARCADE); startButton = game.add.button(*0.5,*0.5, 'button', startGame, this, 1, 0, 2); startButton.anchor.set(0.5); music ='Good-Riddance') ="Good-Riddance")["Good-Riddance"]); if(playing === true) { }else{ music.mute = false; }
  5. html5

    Hi everyone, Famobi has been around for more than two years already, but somehow we haven’t actively taken part in this wonderful forum during this period. Many of you know us already and have published their wonderful games in our network. So first of all we want to say THANK YOU! Thank you for the fantastic games you create, thanks for making the HTML5 games industry the next big thing and thanks for just being really great people. After all you and your games are our daily business. And we have lots of fun with them. But even more important, our clients love them. We have spread your games to many portals, companies and brands and gave them the attention they deserve. Since your games have been the foundation of our company and its ongoing success, it’s only fair that we share with you our current state and upcoming projects. Of course we continue and steadily improve our daily work as a distributor of your games. We place them on all the biggest and most known portals around the globe. And new portals, big and small, are registering for an account at Famobi every day. Another focus right now is Facebook Instant Games. Shortly we will begin placing games in the Facebook messenger. So if you have amazing high score games with a quick and easy gameplay, let us know anytime. One can never have enough of those And in general, please continue to send us your games. There are no restrictions to genre or age. However we have a few requirements based on the needs of our clients and partners, that have proven to be crucial for maximum success. The games must be: Full responsive. Games must work in portrait and landscape mode. Without text. No texts means anyone will understand your game regardless of language. Small. Preferrably the file size should not exceed 3 MB. Smooth performance. Even on lower-end devices. We test our games from iPhone 4S and Samsung Galaxy S4 mini upwards. These are a few examples of games that fulfill these requirements and that we really love: Solitaire Classic Street Race Fury 4 in a Row Classic Bottle Flip Challenge Mandala Coloring Book Backgammon Classic Kids Color Book 2 But before our post reaches the dimensions of a novel, let’s come to an end for now. For all those who didn’t know or contact us yet, you can reach us anytime under these addresses: Game submission: Please use our submit form right here: General questions: Purchase of games: Thanks so much and let’s continue to shape the industry! Cheers from the whole team!
  6. Made anything cool with pixi.js? Post it up here and share it with the world! Whether it's a cool game demo, a fully fledged website or some tripped-out crazy experiment, we would all LOVE to see it! To get the ball rolling, here are some pixi.js projects that exist out on the internets: games: experiments:
  7. Hello BJS devs, What are BabylonJS's plans for WebGL 2 support? Namely, how do you guys envision supporting webgl 2 and backwards compatibility? I'm not super experienced with game development but I've been playing around with a toy project and I need to use binary 3D textures. I've made some changes to BJS to support 3D textures but I'm not familiar enough with the codebase to think this is the correct way of doing this. Any feedback is much appreciated and I would be happy to make changes / open a PR if this seems like the correct approach. Also, if there is already a branch that supports this correctly, that would be even better Thanks!
  8. Just new model (now no coding only updated new model)
  9. Hello friends! I'm seeking for 2D artist to draw multiply sprites for top-view space game. What about the game? I have a concept of survival 2.5D space game, where every one can manage his own space sector, build space stations, harvest resources, make products and secure from extraneous aliens. You will take a role as a business owner of your faction with minimal amount at your account. Your goal to make successful business, to grow and set relations with other factions, survive in unknown galaxy where you are not alone. Main feature of the game Play from mobile / tablet / desktop, there are no restrictions to popular platforms. Fly on your own spacecraft by using of WASD + mouse or touch control. Think how to make your business work, trade with other players, explore your sector and find a way to other sectors, fight with your enemies to reach your goals. All spacecrafts & space stations consists from parts, each one has their own appointment & feature. Invite friends to your faction. 2.5D game, where each 2D graphic looks like 3D by using power of OSE game engine (lightning + shadows). What is already done Own game engine as a fundament of a game. Inertia physics, spaceship control, lightning. Camera, object's transformations, multiply platforms support. I have very ambitious plans, but resources are limited. I have a very reduced plan of features that I would like to implement. For early stage of development I want to find an artist, that can spend some time to work with graphics of a game. I will pay for graphics if it will be really cool. Contact with me to get details. Skype: andytyurin Thanks!
  10. I'm using the latest bjs alpha, a few old errors disappeared (fixed I guess), and new ones appeared. These are internal bjs errors that are not related to my code as far as I can tell. 1) I don't know what this is related to. 2) This error is logged for each .babylon file I'm loading. Why am I getting an XML parsing error on a .babylon file written in JSON format?
  11. I have a scene with two individual meshes. It looks like this: this.loadFiles("gras", (gras) => { var particleMaterial = new THREE.MeshPhongMaterial(); = THREE.ImageUtils.loadTexture("models/planets/gras.jpg"); particleMaterial.side = THREE.DoubleSide; this.mesh = new THREE.Mesh(gras,particleMaterial); this.loadFiles("rocks", (rocks) => { var particleMaterial = new THREE.MeshPhongMaterial(); = THREE.ImageUtils.loadTexture("models/planets/rocks.jpg"); particleMaterial.side = THREE.DoubleSide; = new THREE.Mesh(rocks,particleMaterial); callback(this); }); }); Now I want to merge the meshes together. But how can i combine the textures? this.loadFiles("gras", (gras) => { this.loadFiles("rocks", (rocks) => { var geometry = new THREE.Geometry; THREE.GeometryUtils.merge(geometry,gras); THREE.GeometryUtils.merge(geometry,rocks); var particleMaterial = new THREE.MeshPhongMaterial(); = THREE.ImageUtils.loadTexture("models/planets/gras.jpg"); particleMaterial.side = THREE.DoubleSide; this.mesh = new THREE.Mesh(geometry,particleMaterial); callback(this); }); });
  12. Hi there folks! It's been a while since I posted something in here, glad to be back! I have a fair amount of experience in game development using JS Canvas, but recently I decided I had move on - so I went with Pixi. I figured out the basics of how to add sprites, do filters and such, but I just can't seem to figure out how to do simple lines and then manipulate them afterwards. What I mean is something like this: I noticed that PIXI.Graphics has an object attached to it called "graphicsData" in which I can find the points that make up the line - great - but when changing the value of these variables, nothing happens to the appearance of my line. I'd appreciate any help, as I'm quite new to Pixi Thank you!
  13. Hello! I have an issue that I didn't understand too much. I'm trying to build a tiled-isometric-map loader for Phaser, where I have many issues about perfomance. So I will investigate different techniques to make them more lightweight for CPU/GPU trying to use some techniques like render the map layers in cropped RenderTextures (just draw the visible area of the map at once), using sprite-populated SpriteBatches/Groups as source (I tested with both). In simple words, the logical behind this is the following: Populate the SpriteBatch/Group with tile-based sprites from a cache-array (to prevent creating/destroying each time). Render that SpriteBatch/Group into the RenderTexture, clearing it before that. Cleaning the SpriteBatch/Group, putting the tile-based sprites back to the array and removing from the SpriteBatch/Group (without destroying them, off course). Create a Phaser.Image that show the RenderTexture in the screen. (Or create once, the texture are updated anyways). I tested that with one RenderTexture and works fine. The issue comes if I write more many of them (Assuming that 1 RenderTexture is equivalent at 1 Layer of the scenario), the screen starts showing y-inverted versions of the RenderTexture at random times. A important fact that this just occurs in WebGL mode (in Canvas the behaivour is the correct). I'm using Phaser CE 2.7.3. I coded a short example of the issue (each column is a different RenderTexture with correspondent Sprites), you're free to see and debug them : Canvas: WebGL: Some idea of what's going on there? Thanks in advance
  14. According to more than 90% of all devices now support WebGL! Does that mean that it's (finally) time to make 3D games? Has someone had an experience in selling/distributing webgl based games? And what do you guys think about 3d web games in general?
  15. Job posting: Studio FOW Position: Senior Game Software Developer We are looking for a game senior game software developer who can deliver web based, HTML5 game applications. The role includes overseeing the full development life cycle including identifying the correct technology, architecting the application, security, testing and deploying. This is not a project management role, you will be solely responsible for implementation. The candidate must have a proven track record in developing web based game applications using WebGL and JavaScript. We expect the developer to be able to deliver a modular, scalable and testable application. You will also be working to integrate existing pre-rendered video content into the game which forms an integral part of the player experience. Experience in enterprise grade applications would be necessary so the design could address high availability requirements (i.e. load balancing and clustering). Experience in WebSockets and relational databases such as MySQL, PostgreSQL or MS SQL are required. Experience in ECMAScript, NodeJS and node-webkit would be a plus. Knowledge of other programming languages (Python, C++) is also a plus. Please note that this game will be of the adult (18+) variety and therefore anyone uncomfortable with such content need not apply. A portfolio and references will be required during the interview process.
  16. Hi guys how can I connect all spheres using a tube from all to all, dynamically depending on the number of spheres and always from all to all like the example below, someone could send me a example or an tutorial ?plz
  17. Hi guys, We developed a game last year with phaser 2.3.0 and webgl, it worked fine on computer browsers and mobile devices. But since the last update of chrome for android (v53.0.2785.97), the screen is flickering until it becomes totally black, without any error or warning. The issue is present on mobile only, it worked on chrome for android v52, but not v53. We tried to upgrade to phaser 2.6.2, same issue on chrome for android v53. If we use Phaser.CANVAS instead of webgl, it works fine, but we prefer using webgl for performances. Does anyone encounter the same problem? Thanks for your help. Joe K.
  18. Hello there! I have created a game with this amazing engine and Tiled app. I've added a scrolling background image layer to the map in Tiled, but when i modify the renderer to or in the function in the js file, the background imagelayer doesn't show up to me. If I use the canvas renderer than it's working fine. I've tested this three different application with the latest melonjs and boilerplate. Is it a known issue? It would be great if someone could give answer for me. Thanks!
  19. First release of full game Perplexus Shadow Open Where everybody could buil its own perplexus and upload and than everybody could play it (on all web browsers with webgl) Also on phones android and iphones Added Physics "Physics step" where 10 or 15 works as fast as 50 on desktop with nvidia 960 ... you can continue playing on check points on which you go through ... or update I will release soon vidows how to build your own perplexus like lego ...and videos how to play each level from start to end.
  20. Hi All, Half a year ago I started doing game development during my lunch breaks! It's a side-scrolling shooter using Crafty.js It's still work in progress, and the code (and demo) can be found here: I also did a presentation about it at work, which can be found here: (at the 10 minute mark the demo begins, which shows the development proces in-game!) At the moment I'm still in the process of creating graphics, and deciding which resolution it will become, and pick between Canvas or WebGL.
  21. Hey there, I've recently started to dig my way more into three.js in order to build my own image-viewer-app as my first three.js project. I'm using three.js r83 and both the EffectComposer aswell as the Shader/RenderPass from the three.js examples. (View on github) Since I'm familiar with other programming languages I was able to figure out a lot of stuff on my own, but currently I'm struggling with this specific problem: My App should be able to add post-processing effects to the currently viewed image. The post-processing part already works like a charm, but I would like to add more effects as I want to test/experiment around with some new sorts of possibilities for an image-viewer. Since I'm obsessed with performance, I came up with some ideas on how to scale the post-processing into different EffectComposers in order to keep weight (Number of Shaders to render) on each Composer low and therefore it's performance high. What I did: After debugging both the EffectComposer and Shader/RenderPass from the three.js examples, I came up with the idea to render a texture, that I'm able to re-use as a uniform in another Composer later on. This would enable me to encapsulate and pre compute whole post-processing chains and re-use them in another Composer. While I was debugging through the ShaderPass, I found what I think is the key element to get this to work. I won't post the Code here as it's accessible via github, but if you have a look into the ShaderPass.js on Line 61 you can see the classes' render function. The parameter writeBuffer is a WebGLRenderTarget and, afaik, it is used to store what the composer/renderer would usually put out to the screen. I've created 2 identical Composers using the following code: var txt = testTexture; var scndRenderer = new THREE.WebGLRenderer({ canvas: document.getElementById("CanvasTwo"), preserveDrawingBuffer: true }); scndRenderer.setPixelRatio(window.devicePixelRatio); var containerTwo = $("#ContainerTwo")[0]; scndRenderer.setSize(containerTwo.offsetWidth, containerTwo.offsetHeight); console.log("Creating Second Composer."); console.log("Texture used:"); console.log(txt); var aspect = txt.image.width / txt.image.height; var fov = 60; var dist = 450; // Convert camera fov degrees to radians fov = 2 * Math.atan(( txt.image.width / aspect ) / ( 2 * dist )) * ( 180 / Math.PI ); var scndCam = new THREE.PerspectiveCamera(fov, aspect, 1, 10000); scndCam.position.z = dist; var scndScene = new THREE.Scene(); var scndObj = new THREE.Object3D(); scndScene.add(scndObj); var scndGeo = new THREE.PlaneGeometry(txt.image.width, txt.image.height); var scndMat = new THREE.MeshBasicMaterial({ color: 0xFFFFFF, map: txt }); var scndMesh = new THREE.Mesh(scndGeo, scndMat); scndMesh.position.set(0, 0, 0); scndObj.add(scndMesh); scndScene.add(new THREE.AmbientLight(0xFFFFFF)); //PostProcessing scndComposer = new THREE.EffectComposer(scndRenderer); scndComposer.addPass(new THREE.RenderPass(scndScene, scndCam)); var effect = new THREE.ShaderPass(MyShader); effect.renderToScreen = false; //Set to false in order to use the writeBuffer; scndComposer.addPass(effect); scndComposer.render(); I then modified three's ShaderPass to access the writeBuffer directly. I added a needsExport property to the ShaderPass and some logic to actually export the writeBuffers texture: renderer.render(this.scene,, writeBuffer, this.clear); //New Code if (this.needsExport) { return writeBuffer.texture; } I then simply set the needsExport for the last pass to true. After rendering this pass, the texture stored in the writeBuffer is returned to the EffectComposer. I then created another function inside of the EffectComposer to just return the writeBuffer.texture, nothing too fancy. The Issue: I'm trying to use the writeBuffers texture (which should hold the image that would get rendered to screen if I would have put renderToScreen to true) as a uniform in another EffectComposer. As you can see in code block 1, the texture itself isn't resized or anything. The used texture got the right dimensions to fit into a uniform for my second composer, however I'm constantly receiving a black image from the second composer no matter what I do. This is the code I'm using: function Transition(composerOne, composerTwo) { if (typeof composerOne && composerTwo != "undefined") { var tmp = composerOne.export(); //Clone the shaders' uniforms; shader = THREE.ColorLookupShader; shader.uniforms = THREE.UniformsUtils.clone(shader.uniforms); var effect = new THREE.ShaderPass(shader); //Add the shader-specific uniforms; effect.uniforms['tColorCube1'].value = tmp; //Set the readBuffer.texture as a uniform; composerTwo.passes[composerTwo.passes.length - 1] = effect; //Overwrite the last pass; var displayEffect = new THREE.ShaderPass(THREE.CopyShader); displayEffect.renderToScreen = true; //Add the copyShader as the last effect in Order to be able to display the image with all shaders active; composerTwo.insertPass(displayEffect, composerTwo.passes.length); composerTwo.render(); } } Conclusion: To be completely honest, I don't have a clue about what I'm doing wrong. From what I've read, learned while debugging and from what I've figured out so far, I would argue that this is a bug. I would be really glad if someone could prove me wrong or submit a new idea on how to achieve something like what I'm already trying to do. If there are any more informations needed to solve this question, please let me know! Regards, Michael
  22. I am trying to create a fragment shader via a PIXI.AbstractFilter to create a wave rippling effect to be applied to a background texture. I have already worked out the algorithm for the wave effect in JavaScript. What I am having difficulty doing is getting the data I need into the shader through PIXI. For my effect to work, I need to have a large Float32Array to keep track of wave heights and a texture containing the original, unaltered contents of the background image to read from in order to apply the effect of pixel displacement (light refraction). I've been doing a lot of searching and have come up with some partial solutions. I attempt to load my large Float32Array into the shader as a texture with type GL.FLOAT (with the OES_texture_float extension) and an internal format of GL.LUMINANCE and read from it. From what I can tell, my shader isn't receiving my data the way I need it to. Just as a test, I set gl_FragColor to read from my data texture, and instead of the solid black that should have appeared, it rendered a color from either the source texture or the texture of the sprite that the filter is applied to.If I weren't using PIXI, what I would try next is to use gl.getUniformLocation, but it takes the current program as its first parameter, and I don't know of a way to access that. The basic flow of my shader needs to go: Read From Array -> Calculate displacement based on value -> Render the current fragment as the color at x+displacement, y+displacement -> Get updated version of array This is my code in the constructor for my shader: ws.Shader = function(tex) { // GLSL Fragment Shader for Wave Rendering =; ws.flExt ="OES_texture_float"); var unis = { dataTex: { type: "sampler2D", value: }, canvasTex: { type: "sampler2D", value: }, mapSize: { type: "2f", value: [ws.width+2,ws.height+2] }, dispFactor: { type: "1f", value: 20.0 }, lumFactor: { type: "1f", value: 0.35 } }; var fragSrc = [ "precision mediump float;", "varying vec2 vTextureCoord;", "varying vec4 vColor;", "uniform sampler2D uSampler;", "uniform sampler2D dataTex;", "uniform sampler2D canvasTex;", "uniform vec2 mapSize;", "uniform float dispFactor;", "uniform float lumFactor;", "void main(void) {", "vec2 imgSize = vec2(mapSize.x-2.0,mapSize.y-2.0);", "vec2 mapCoord = vec2((vTextureCoord.x*imgSize.x)+1.5,(vTextureCoord.y*imgSize.y)+1.5);", "float wave = texture2D(dataTex, mapCoord).r;", "float displace = wave*dispFactor;", "if (displace < 0.0) {", "displace = displace+1.0;", "}", "vec2 srcCoord = vec2((vTextureCoord.x*imgSize.x)+displace,(vTextureCoord.y*imgSize.y)+displace);", "if (srcCoord.x < 0.0) {", "srcCoord.x = 0.0;", "}", "else if (srcCoord.x > mapSize.x-2.0) {", "srcCoord.x = mapSize.x-2.0;", "}", "if (srcCoord.y < 0.0) {", "srcCoord.y = 0.0;", "}", "else if (srcCoord.y > mapSize.y-2.0) {", "srcCoord.y = mapSize.y-2.0;", "}", /*"srcCoord.x = srcCoord.x/imgSize.x;", "srcCoord.y = srcCoord.y/imgSize.y;",*/ "float lum = wave*lumFactor;", "if (lum > 40.0) { lum = 40.0; }", "else if (lum < -40.0) { lum = -40.0; }", "gl_FragColor = texture2D(canvasTex, vec2(0.0,0.0));", "gl_FragColor.r = gl_FragColor.r + lum;", "gl_FragColor.g = gl_FragColor.g + lum;", "gl_FragColor.b = gl_FragColor.b + lum;", "}"]; ws.shader = new PIXI.AbstractFilter(fragSrc, unis); // Send empty wave map to WebGL ws.activeWaveMap = new Float32Array((ws.width+2)*(ws.height+2)); ws.dataPointerGL =;;, ws.dataPointerGL); // Non-Power-of-Two Texture Dimensions,,;,,;,,;, 0,, ws.width+2,ws.height+2,0,,, ws.activeWaveMap); // Send texture data from canvas to WebGL var canvasTex =;;, canvasTex); // Non-Power-of-Two Texture Dimensions,,;,,;,,;, 0,,,, tex.imageData); } I then attempt to update dataTex in the ws object's update loop: ws.activeWaveMap.set(ws.outgoingWaveMap); // WebGL Update;, ws.dataPointerGL); /* // Non-Power-of-Two Texture Dimensions,,;,,;,,;*/, 0,, ws.width+2,ws.height+2,0,,, ws.activeWaveMap); I'm sure that plenty of this isn't right, but I believe that I can sort things out once I can get to the point where I can actually access my data. Can anyone point me in the right direction? This is central enough to my project that I am willing to discard PIXI altogether if there isn't a way to implement what I am trying to do. Also, I am using PIXI via Phaser, if that makes a difference. Thanks!
  23. This article was originally published on Habrahabr, a popular Russian website for IT professionals. Its topical theme sparked the interest of thousands of readers who left dozens of comments. We are glad to present the translation of this highly intriguing research on the performance of Unity WebGL and Blend4Web, with reported issues taken into account as well as benchmarks updated for the latest builds of both engines. Article in English: Here's some of the test results: So, if you interested in full article just follow the link and read it.
  24. Hi all I notice that I can only apply mask up to 2 levels deep. If you apply a 3rd level depth mask it removes the one before it. I'm using 4.2.2. Any ideas? Thanks! var main = new PIXI.Container(); stage.addChild(main); //works var mask1 = new PIXI.Graphics(); stage.addChild(mask1); main.mask = mask1; var child1 = new PIXI.Container(); main.addChild(child1 ) //works var mask2 = new PIXI.Graphics(); main.addChild(mask1); child1.mask = mask2; var child2 = new PIXI.Container(); child1.addChild(child2); //does not work var mask3 = new PIXI.Graphics(); child1.addChild(mask3 ); child2.mask = mask3 ;