Search the Community

Showing results for tags 'webgl'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

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

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Website URL


Twitter


Skype


Location


Interests

Found 434 results

  1. Hi there. Thanks a lot for stopping by. We are working on the online football management game and looking for a game developer who could help us to develop the live match simulation with babylonjs or threejs or any other similar 3d game engine with WebGL support. You will be working closely with the back-end developer on live match simulation based on the generated data you will get from the database (player skills, team skills, weather and other factors). We offer you a revenue share. If you are interested in the project, you can read the overview here: http://totalmanager.ziyafenn.com Get in touch with me if you are interested or have any questions. Thanks in advance!
  2. Hello! My game does not render in chrome when I use the AUTO mode. I have the same problem with the Phaser examples that are in AUTO mode. Everything goes well when I test my game on Safari or on mobile browsers. Here is my configuration : macOS Sierra 10.12 chrome 56.0.2924.87 (64-bit) Does anyone has had the same issue? Any solution (other than configuring the game in CANVAS mode)? Thank you. Regis.
  3. This is scene is arranged into separate blocks, each block is a SolidParticleSystem. (Like this, and like this.) Each particle is touching right on the edge (see attached image), or click here. There are some black pixels that flicker in and out on these edges. These are z-fighting artifacts on the edges (I think ). I tried just increasing the scale of the particles slightly so they overlap with each other but this doesn't fix it. What can I do to remove these artifacts? Is there a simple way without adding more geometry to every particle? I'm not afraid to modify shaders if I have to.
  4. jorditantadiaz

    Cloth animation

    Hi, i trying to emulate a cloth animation follow this: http://www.babylonjs-playground.com/#1J3WEP#6 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:
  5. 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 https://phaser.io/examples/v2/tile-sprites/tiling-sprite-atlas 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!
  6. babdev

    WebGL 2 Support

    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. https://github.com/BabylonJS/Babylon.js/compare/master...wongwill86:texture3d?expand=1 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!
  7. 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)? https://phaser.io/examples/v2/buttons/action-on-click 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.
  8. I have a scene with two individual meshes. It looks like this: this.loadFiles("gras", (gras) => { var particleMaterial = new THREE.MeshPhongMaterial(); particleMaterial.map = 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(); particleMaterial.map = THREE.ImageUtils.loadTexture("models/planets/rocks.jpg"); particleMaterial.side = THREE.DoubleSide; this.rocks = 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(); particleMaterial.map = THREE.ImageUtils.loadTexture("models/planets/gras.jpg"); particleMaterial.side = THREE.DoubleSide; this.mesh = new THREE.Mesh(geometry,particleMaterial); callback(this); }); });
  9. royibernthal

    WebGL and XML errors

    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?
  10. Gustavgb

    Simple lines with Pixi.js

    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: https://jsfiddle.net/gustavgb/anxcjfof/5/ 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!
  11. 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: http://elsemieni.net/inni/testCanvas/ WebGL: http://elsemieni.net/inni/testWebGL/ Some idea of what's going on there? Thanks in advance
  12. According to http://webglstats.com/ 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?
  13. 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.
  14. 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
  15. Just new model (now no coding only updated new model)
  16. knightburton

    ImageLayer and WEBGL problem

    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 me.video.WEBGL or me.video.AUTO in the me.video.init 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!
  17. 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.gl = game.renderer.gl; ws.flExt = ws.gl.getExtension("OES_texture_float"); var unis = { dataTex: { type: "sampler2D", value: ws.gl.TEXTURE1 }, canvasTex: { type: "sampler2D", value: ws.gl.TEXTURE2 }, 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.gl.createTexture(); ws.gl.activeTexture(ws.gl.TEXTURE1); ws.gl.bindTexture(ws.gl.TEXTURE_2D, ws.dataPointerGL); // Non-Power-of-Two Texture Dimensions ws.gl.texParameteri(ws.gl.TEXTURE_2D, ws.gl.TEXTURE_MIN_FILTER, ws.gl.NEAREST); ws.gl.texParameteri(ws.gl.TEXTURE_2D, ws.gl.TEXTURE_WRAP_S, ws.gl.CLAMP_TO_EDGE); ws.gl.texParameteri(ws.gl.TEXTURE_2D, ws.gl.TEXTURE_WRAP_T, ws.gl.CLAMP_TO_EDGE); ws.gl.texImage2D(ws.gl.TEXTURE_2D, 0, ws.gl.LUMINANCE, ws.width+2,ws.height+2,0, ws.gl.LUMINANCE, ws.gl.FLOAT, ws.activeWaveMap); // Send texture data from canvas to WebGL var canvasTex = ws.gl.createTexture(); ws.gl.activeTexture(ws.gl.TEXTURE2); ws.gl.bindTexture(ws.gl.TEXTURE_2D, canvasTex); // Non-Power-of-Two Texture Dimensions ws.gl.texParameteri(ws.gl.TEXTURE_2D, ws.gl.TEXTURE_MIN_FILTER, ws.gl.NEAREST); ws.gl.texParameteri(ws.gl.TEXTURE_2D, ws.gl.TEXTURE_WRAP_S, ws.gl.CLAMP_TO_EDGE); ws.gl.texParameteri(ws.gl.TEXTURE_2D, ws.gl.TEXTURE_WRAP_T, ws.gl.CLAMP_TO_EDGE); ws.gl.texImage2D(ws.gl.TEXTURE_2D, 0, ws.gl.RGBA, ws.gl.RGBA, ws.gl.UNSIGNED_BYTE, tex.imageData); } I then attempt to update dataTex in the ws object's update loop: ws.activeWaveMap.set(ws.outgoingWaveMap); // WebGL Update ws.gl.activeTexture(ws.gl.TEXTURE1); ws.gl.bindTexture(ws.gl.TEXTURE_2D, ws.dataPointerGL); /* // Non-Power-of-Two Texture Dimensions ws.gl.texParameteri(ws.gl.TEXTURE_2D, ws.gl.TEXTURE_MIN_FILTER, ws.gl.NEAREST); ws.gl.texParameteri(ws.gl.TEXTURE_2D, ws.gl.TEXTURE_WRAP_S, ws.gl.CLAMP_TO_EDGE); ws.gl.texParameteri(ws.gl.TEXTURE_2D, ws.gl.TEXTURE_WRAP_T, ws.gl.CLAMP_TO_EDGE);*/ ws.gl.texImage2D(ws.gl.TEXTURE_2D, 0, ws.gl.LUMINANCE, ws.width+2,ws.height+2,0, ws.gl.LUMINANCE, ws.gl.FLOAT, 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!
  18. 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: https://www.blend4web.com/en/community/article/280/ Here's some of the test results: So, if you interested in full article just follow the link and read it.
  19. 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, this.camera, 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
  20. 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 ;
  21. Hi. Im fairly new on Pixi and im trying to do something with multiple renderers. I know i could add multiple canvas instead, however i need a dedicated webgl renderer to manipulate the transform and try to do some trapezoid forms. I also need both renderers to works on the same canvas to avoid creating multiple layers on the document.body. My approach was: 1. Have a main renderer and a main stage. 2. Have a sideRenderer that will be affected by different transforms (using gl.uniformMatrix4fv to change the shape of the whole renderer and achieve different shapes) and a sideStage that will hold any content (in this example, a simple sprite). 3. make the sideRenderer render to a RenderTexture, which will be the source of a Sprite, which will be added on the main stage. So in theory, anything that the side renderer renders to the RenderTexture should appear on the sprite on the main stage. If somehow i modify side renderer, the transformed output should be shown on the RenderTexture, if that makes any sense. I tried this with this example, and it doesnt works. If i append the sideRenderer.view to the document.body, it renders as expected, but its not what i want, as i need it to be part of a more complex logic. At some point this makes me realize that i cannot mix renderers like this ( maybe the sideRender is still working on the back while the mainRender is trying to render an incomplete RenderTexture ? ), cannot make one renderer render something for another renderer (sideRenderer to mainRenderer or viceversa), so i would like to know if there is any workaround or any way to override this behavior? Thanks for the help var renderer = null; var sideRenderer = null; var stage = null; var sideStage = null; var WIDTH = 1000; var HEIGHT = 500; var rt = new PIXI.RenderTexture( 1000, 500 ); var spriteRt = new PIXI.Sprite( rt ); init(); function init() { var rendererOptions = { backgroundColor: 0xffffff, transparent: true } // Create the renderer renderer = PIXI.autoDetectRenderer( WIDTH, HEIGHT, rendererOptions ); sideRenderer = PIXI.autoDetectRenderer( WIDTH, HEIGHT, rendererOptions ); // Add the canvas to the HTML document document.body.appendChild( renderer.view ); // Create a container object called the `stage` stage = new PIXI.Container(); sideStage = new PIXI.Container(); stage.addChild( spriteRt ); var loader = PIXI.loader; loader.add( 'texture', './media/crate.png' ); loader.once( 'complete', onLoadedAsset ); loader.load(); } function onLoadedAsset() { var texture = PIXI.Texture.fromFrame( './media/crate.png' ); var sprite = new PIXI.Sprite( texture ); sideStage.addChild( sprite ); update(); } function update() { sideRenderer.render( sideStage, rt ); renderer.render( stage ); requestAnimationFrame( update ); }
  22. PEXMAR

    WebGL Cloth

    Hi, I'm very glad to greet all of you. I'm new. I'm not a programmer. I dedicate myself to the artistic part. I'm a 3d designer. But a few months ago, I'm in a project. In which we have a problem I hope you can give me some of your time and have answers that help to dispel my doubts. The direct question is possible to export an object either obj, threejs or some other format that is loaded in the code and to be able to apply the cloth function that is found in the physical motors either babylon.js cannon.js oimo.js etc I hope you can understand my question Thank you
  23. Famobi

    Greetings from Famobi

    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: https://famobi.com/#contact General questions: info@famobi.com Purchase of games: sales@famobi.com Thanks so much and let’s continue to shape the industry! Cheers from the whole team!
  24. function QuantizeFilter() { var vertexShader = null; //Doesn't actually quantize, just testing. var fragmentShader = [ 'precision mediump float;', '', 'varying vec2 vTextureCoord;', '', 'uniform vec4 dimensions;', //This is the variable. 'uniform vec3 palette[3];', 'uniform sampler2D uSampler;', '', 'void main(void)', '{', ' gl_FragColor = vec4(0.5, 0.5, 0.5, 1.0);', '}' ].join('\n'); var uniforms = { dimensions: { type: '4fv', value: new Float32Array([0, 0, 0, 0]) }, palette: { type: '3fv', value: [ [255.0, 255.0, 255.0], [200.0, 200.0, 200.0], [0.0, 0.0, 0.0] ] } }; PIXI.AbstractFilter.call(this, vertexShader, fragmentShader, uniforms ); } QuantizeFilter.prototype = Object.create(PIXI.AbstractFilter.prototype); QuantizeFilter.prototype.constructor = QuantizeFilter; Object.defineProperties(QuantizeFilter.prototype, { palette: { get: function() { return this.uniforms.palette.value; }, set: function(value) { this.uniforms.palette.value = value; } } }); Custom (test) filter for Pixi.js V4 I'd like to make the 'uniform vec3 palette[3];' array size, size to the 'palette' uniform input. So I could set palette to 256 or so arrays of colors and the uniform will size appropriately: 'uniform vec3 palette[256];' Hypothetically, I've thought of just making the string in javascript, and prepending it to the fragment shader text, but I don't know of a way to do that. Any help is appreciated, ty.