Jump to content

Search the Community

Showing results for tags 'webGL'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 Game Coding
    • News
    • Game Showcase
    • Facebook Instant Games
    • Web Gaming Standards
    • Coding and Game Design
  • Frameworks
    • Pixi.js
    • Phaser 3
    • Phaser 2
    • Panda 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
    • GameMonetize
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered
    • Marketplace (Sell Apps, Websites, Games)

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Website URL





  1. I need to display a large number (for example 400) of high resolution textures at the same time, for this I used the ParticleContainer from the example - https://pixijs.io/examples/#/demos-basic/particle-container.js. But in the end, I get FPS = 10-15, the more sprites, the lower the FPS, even if you turn off the animation - there is no difference, the image in idle mode also heavily loads the browser, which is why the page scroll is very freezing. - https://codesandbox.io/s/admiring-lamarr-p8bvyf?file=/index.html I could not find a solution anywhere, so I will be grateful for your help.
  2. ohmed


    Hey ppl Before I was developing IconiX browser game, and I'm still am. But to switch a bit and not get bored I'm now also making a bit different game, but still IconiX as parent for code-base, heh. Also multiplayer, but as a TowerDefence where ppl need to defend there 'base' [a Ukrainian city from russian (orc) army]. Not available yet, but video attached: And discord channel for any discussions or questions https://discord.gg/eZyngWMv
  3. GWE (alias Game Web Engine) is a tree-dimensions game engine based on web technologies (javascript, html, css). This engine is designed to be light, simple to use and non-opinion based. Pretty fun to use ! Some features likes: - Graphics manager - Screen manager of the different "screens" of the game - Texture resource manager - Sound resource manager - Event manager - Input manager keyboard/mouse - UI manager (over 16 basic widgets) - Script manager - Support for multiple 2D and 3D camera views - Navigation mesh (JSON Walkmesh Model alias JWM) - Static image (JSON Static Sprite alias JSS) - Animated image (JSON Animated Sprite alias JAS) - Static textured meshes (JSON Static Mesh alias JSM) - Animated textured meshes (JSON Animated Mesh alias JAM) - Geometric shapes of debug - And some other things... Some template project likes : - Visual novel starter-kit - 2D Isometric navigation starter-kit - 3D Pre-rendered navigation starter-kit - 2D top-down starter-kit - CCG starter-kit - RPG starter-kit - etc... Website : https://gamewebengine.com/ Github: https://github.com/ra1jin
  4. Hi all and good day! 13 days ago started with new project and would like to share some stuff with you It's not completely from scratch, but took some base from my prev game DatTank [https://dattank.io]. How it looked 13 days ago How it looks today [melee attacking sys example] Would like to know if it would be interesting for somebody to read through some details in some articles or thms like this. Uh, and would be awesome to get some feedback Thx for your attention! ps: If you want to get quick updates from me follow on https://twitter.com/iOhmed
  5. Hello :). Warn: Question could be dumb. tl;dr: If I want to harvest the power of GPU for a low-level 2D rendering, should I use WebGL, three.js, or something similar? Or Pixi.js is the way? Other options? Version with redundant personal information: I've been making this rendering/animation engine for pixel-art, which I intend to integrate in different projects... It has simple vector animation ui and simple script lang, for converting from vec to pixelated graphics and applying pixel-wise transformations. And now I need to draw these big "pixels" fast. Also the task of creating pixel texture and filling a triangular region with it is at hand. Also custom shaders, programmable from my lang. And that's the end of my ambitions at the moment.. What should I use to GPU this? I learned a little Pixi.js, but it seems a little high level (?). As I understand it, WebGL is the ultimate low-level answer to GPU questions.. I just need to draw big squares and textures... Creating custom shaders would be awesome too. (Is the whole project stupid?) I have this problem (with ego?) of building everything from scratch, no engines etc. And as a result a heap of unfinished projects with years of dev behind them. HELP! One of the first forum questions for me.. have mercy. ?
  6. The best way to learn is to practice as much as possible. Share your examples here. What browsers WebGL is supported, you can see here: WebGL 1.0: https://caniuse.com/#feat=webgl WebGL 2.0: https://caniuse.com/#feat=webgl2 A brief description of what WebGL is, and references to the specifications: https://www.khronos.org/webgl/ Tutorials: WebGL 1.0 Fundamentals WebGL 2.0 Fundamentals This book is about WebGL 1.0: WebGL Programming Guide Source Code for the book: examples.zip Source Code for the book on JSFiddle: Chapter 02. Your First Step with WebGL ch02/HelloCanvas: https://jsfiddle.net/8Observer8/2gky294r/ ch02/HelloPoint1: https://jsfiddle.net/8Observer8/cc72u1u5/ ch02/HelloPoint2: https://jsfiddle.net/8Observer8/uxw657ud/ ch02/ClickedPoints: https://jsfiddle.net/8Observer8/xf4fnc0o/ ch02/ColoredPoints: https://jsfiddle.net/8Observer8/gkkmnpga/ Chapter 03. Drawing and Transforming Triangles ch03/MultiPoint: https://jsfiddle.net/8Observer8/cty1120m/ ch03/HelloTriangle: https://jsfiddle.net/8Observer8/wk4sksnw/ ch03/HelloQuad: https://jsfiddle.net/8Observer8/g4ctyk7w/ ch03/HelloQuad_FAN: https://jsfiddle.net/8Observer8/v119e8o6/ ch03/HelloTriangle_LINES: https://jsfiddle.net/8Observer8/wwrkaxcf/ ch03/HelloTriangle_LINE_STRIP: https://jsfiddle.net/8Observer8/3ggjz4rm/ ch03/HelloTriangle_LINE_LOOP: https://jsfiddle.net/8Observer8/7vcyquro/ ch03/TranslatedTriangle: https://jsfiddle.net/8Observer8/0dp4xvyt/ ch03/RotatedTriangle: https://jsfiddle.net/8Observer8/gh9s6szm/ ch03/RotatedTriangle_Matrix: https://jsfiddle.net/8Observer8/7ze7pgpu/ ch03/ScaledTriangle_Matrix: https://jsfiddle.net/8Observer8/6xzoe63s/ Chapter 04. More Transformations and Basic Animation ch04/RotatedTriangle_Matrix4: https://jsfiddle.net/8Observer8/t4y7783v/ ch04/RotatedTranslatedTriangle: https://jsfiddle.net/8Observer8/b5yfxojp/ ch04/TranslatedRotatedTriangle: https://jsfiddle.net/8Observer8/o8voebc9/ ch04/RotatingTriangle: https://jsfiddle.net/8Observer8/x9j5vdk7/ ch04/RotatingTranslatedTriangle: https://jsfiddle.net/8Observer8/rkrv0322/ ch04/RotatingTriangle_withButtons: https://jsfiddle.net/8Observer8/wzoLmdzd/ Chapter 05. Using Colors and Texture Images ch05/MultiAttributeSize: https://jsfiddle.net/8Observer8/dsfgezbj/ ch05/MultiAttributeSize_Interleaved: https://jsfiddle.net/8Observer8/bshwnden/ ch05/MultiAttributeColor: https://jsfiddle.net/8Observer8/bveykLdf/ ch05/ColoredTriangle: https://jsfiddle.net/8Observer8/mrkpms7d/ ch05/HelloTriangle_FragCoord: https://jsfiddle.net/8Observer8/ft33yo9s/ ch05/TexturedQuad: https://jsfiddle.net/8Observer8/o3vakb3h/ ch05/TexturedQuad_Repeat: https://jsfiddle.net/8Observer8/2s7q68cc/ ch05/TexturedQuad_Clamp_Mirror: https://jsfiddle.net/8Observer8/mqu0wwma/ ch05/MultiTexture: https://jsfiddle.net/8Observer8/ztew5u0p/ Chapter 07. Toward the 3D World ch07/LookAtTriangles: https://jsfiddle.net/8Observer8/6ab11xpg/ ch07/LookAtRotatedTriangles: https://jsfiddle.net/8Observer8/944dd57h/ ch07/LookAtRotatedTriangles_modelViewMatrix: https://jsfiddle.net/8Observer8/e5t6gj1w/ ch07/LookAtTrianglesWithKeys: https://jsfiddle.net/8Observer8/38ewegg2/ ch07/OrthoView: https://jsfiddle.net/8Observer8/zebt4u7t/ ch07/LookAtTrianglesWithKey_ViewVolume: https://jsfiddle.net/8Observer8/vLcejtm1/ ch07/OrthoView_halfSize: https://jsfiddle.net/8Observer8/uvcd9h4p/ ch07/OrthoView_halfWidth: https://jsfiddle.net/8Observer8/vepodfb8/ ch07/PerspectiveView: https://jsfiddle.net/8Observer8/640pv8qe/ ch07/PerspectiveView_mvp: https://jsfiddle.net/8Observer8/w8yh4Lmj/ ch07/PerspectiveView_mvpMatrix: https://jsfiddle.net/8Observer8/hhwnx145/ ch07/DepthBuffer: https://jsfiddle.net/8Observer8/hyumw026/ ch07/Zfighting: https://jsfiddle.net/8Observer8/foc0b45t/ ch07/HelloCube: https://jsfiddle.net/8Observer8/rkpn5tyw/ ch07/ColoredCube: https://jsfiddle.net/8Observer8/80x8cyom/ ch07/ColoredCube_singleColor: https://jsfiddle.net/8Observer8/pespackq/ Chapter 08. Lighting Objects ch08/LightedCube: https://jsfiddle.net/8Observer8/4jchxo84/ ch08/LightedCube_animation: https://jsfiddle.net/8Observer8/ekw3osj7/ ch08/LightedCube_ambient: https://jsfiddle.net/8Observer8/y6qwnfe1/ ch08/LightedTranslatedRotatedCube: https://jsfiddle.net/8Observer8/pa88ujjg/ ch08/PointLightedCube: https://jsfiddle.net/8Observer8/vuq118ue/ ch08/PointLightedCube_animation: https://jsfiddle.net/8Observer8/5bj39hb8/ ch08/PointLightedSphere: https://jsfiddle.net/8Observer8/edz9Lz8f/ ch08/PointLightedSphere_perFragment: https://jsfiddle.net/8Observer8/qzwyow4j/ ch08/PointLightedCube_perFragment: https://jsfiddle.net/8Observer8/8t1umamf/ ch08/LightedCube_perFragment: https://jsfiddle.net/8Observer8/471y2t84/ Chapter 09. Hierarchical Objects ch09/JointModel: https://jsfiddle.net/8Observer8/vqse5egz/ ch09/MultiJointModel: https://jsfiddle.net/8Observer8/sL53wkn3/ ch09/MultiJointModel_segment: https://jsfiddle.net/8Observer8/ygvk7odv/ Chapter 10. Advanced Techniques ch10/RotateObject: https://jsfiddle.net/8Observer8/1f5hLmff/ ch10/PickObject: https://jsfiddle.net/8Observer8/owue624n/ ch10/PickFace: https://jsfiddle.net/8Observer8/edvw6z90/ ch10/HUD: https://jsfiddle.net/8Observer8/fLxxxs35/ ch10/3DoverWeb: https://jsfiddle.net/8Observer8/tbowcc16/ ch10/Fog: https://jsfiddle.net/8Observer8/6yf9L399/ ch10/Fog_w: https://jsfiddle.net/8Observer8/8aLvthc3/ ch10/RoundedPoints: https://jsfiddle.net/8Observer8/sjs5kmn4/ ch10/LookAtBlendedTriangles: https://jsfiddle.net/8Observer8/apoz294n/ ch10/BlendedCube: https://jsfiddle.net/8Observer8/xsrL2fs5/ ch10/ProgramObject: https://jsfiddle.net/8Observer8/jnd0j6w0/ ch10/FramebufferObject: https://jsfiddle.net/8Observer8/vaLq6d66/ ch10/Shadow: https://jsfiddle.net/8Observer8/jsnfwcae/ ch10/Shadow_highp: https://jsfiddle.net/8Observer8/brjzr00n/ ch10/Shadow_highp_sphere: https://jsfiddle.net/8Observer8/4fmyLy5f/ ch10/OBJViewer: https://jsfiddle.net/8Observer8/pws1x7uv/ ch10/RotatingTriangle_contextLost: https://jsfiddle.net/8Observer8/vs01s8Lz/ Gifts gifts/Particle: https://jsfiddle.net/8Observer8/Ltzt31vk/ gifts/Printf: https://jsfiddle.net/8Observer8/qsw7jtec/ gifts/SpecularCube: https://jsfiddle.net/8Observer8/z4xj9rbv/ gifts/TextTexture: https://jsfiddle.net/8Observer8/qt7q2kuf/ gifts/ThreeDUI: https://jsfiddle.net/8Observer8/zdw1f2st/ gifts/Wave: https://jsfiddle.net/8Observer8/eL9odthz/ gifts/WorldCoordinateSystem: https://jsfiddle.net/8Observer8/6utj3hnk/ appendix/CoordinateSystem: https://jsfiddle.net/8Observer8/dzz056jt/ Appendix appendix/CoordinateSystem_viewVolume: https://jsfiddle.net/8Observer8/apxLww1q/ appendix/LoadShaderFromFiles: https://jsfiddle.net/8Observer8/wdn9ubhj/
  7. Play It Now: https://cutedressup.com/game/burger-mania/ Welcome to the Burger Mania. Are you ready to build an incredibly tasty burger? Can you make tasty meals for your customers? They’ll have high expectations in this restaurant game. Keep piling the toppings as high as they’ll go until it collapses under the weight of that mighty burger party!
  8. Hello everyone! It's my first post here and I'm very excited to be part of this community! For the past 3 weeks I was transferring John Lemon’s Haunted Jaunt mini game from Unity to WebGL using PlayCanvas Web based Game Engine. It was a really fun project to work on with many challenges along the way. Here is the official build for you to play: https://playcanv.as/p/atVPbI8K/ I also created a public project in PlayCanvas in case anyone wanted to take a look on how I put everything together: https://playcanvas.com/project/917469/overview/john-lemon-public-project And lastly here is the official post on Twitter: I hope you'll like it! Enjoy
  9. 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: http://www.goodboydigital.com/runpixierun/ http://www.theleisuresociety.co.uk/fightforeveryone/ http://flashvhtml.com/ experiments: http://gametest.mobi/pixi/morph/ http://gametest.mobi/pixi/balls/ http://www.goodboydigital.com/pixijs/bunnymark/
  10. Hi, I am currently trying to generate the polyline example of OGL (v0.0.90) (https://oframe.github.io/ogl/examples/?src=polylines.html) with PIXI.js (v6.3.0). I have created a new PIXI.Mesh and created the appropriate shaders and buffers. Only at some point I'm stuck and don't know why no object is visible. Is it because of the change of the buffer values or does PIXI use a different coordinate reference? For the mathematical operations I use the Vec3 class from OGL, but I could change that later. Here is the code I wrote. import * as PIXI from 'pixi.js'; import * as OGL from "ogl"; const canvas = document.createElement('canvas'); canvas.id = 'stage'; canvas.width = window.innerWidth; canvas.height = window.innerHeight; const rendererOptions = { width: canvas.width, height: canvas.height, view: canvas, }; const stage = new PIXI.Container(); const renderer = new PIXI.Renderer(rendererOptions); renderer.backgroundColor = 0xff0000; document.body.appendChild(canvas); const vertexLines = ` attribute vec3 position; attribute vec3 next; attribute vec3 prev; attribute vec2 uv; attribute float side; uniform vec2 uResolution; uniform float uDPR; uniform float uThickness; vec4 getPosition() { vec2 aspect = vec2(uResolution.x / uResolution.y, 1); vec2 nextScreen = next.xy * aspect; vec2 prevScreen = prev.xy * aspect; vec2 tangent = normalize(nextScreen - prevScreen); vec2 normal = vec2(-tangent.y, tangent.x); normal /= aspect; normal *= 1.0 - pow(abs(uv.y - 0.5) * 1.9, 2.0); float pixelWidth = 1.0 / (uResolution.y / uDPR); normal *= pixelWidth * uThickness; // When the points are on top of each other, shrink the line to avoid artifacts. float dist = length(nextScreen - prevScreen); normal *= smoothstep(0.0, 0.02, dist); vec4 current = vec4(position, 1); current.xy -= normal * side; return current; } void main() { gl_Position = getPosition(); } `; const fragmentLines = /* glsl */ ` precision highp float; uniform vec3 uColor; varying vec2 vUv; void main() { gl_FragColor.rgb = uColor; gl_FragColor.a = 1.0; } `; const countPoints = 20; const polylines = [{ spring: 0.05, friction: 0.7, mouseVelocity: new OGL.Vec3(), mouseOffset: new OGL.Vec3(0.01), position: new Float32Array(countPoints * 3 * 2), prev: new Float32Array(countPoints * 3 * 2), next: new Float32Array(countPoints * 3 * 2), side: new Float32Array(countPoints * 1 * 2), uv: new Float32Array(countPoints * 2 * 2), index: new Uint16Array((countPoints - 1) * 3 * 2), tmp: new OGL.Vec3(), points: [], }]; polylines.forEach((polyline) => { // set static buffer values for (let i = 0; i < countPoints; i++) { polyline.side.set([-1, 1], i * 2); const v = i / (countPoints - 1); polyline.uv.set([0, v, 1, v], i * 4); if (i === countPoints - 1) continue; const ind = i * 2; polyline.index.set([ind + 0, ind + 1, ind + 2], (ind + 0) * 3); polyline.index.set([ind + 2, ind + 1, ind + 3], (ind + 1) * 3); } // set empty points for (let i = 0; i < countPoints; i++) polyline.points.push(new OGL.Vec3()); let geometry = new PIXI.Geometry(); geometry.addAttribute('position', new PIXI.Buffer(polyline.position, false, false), 3, false); geometry.addAttribute('prev', new PIXI.Buffer(polyline.prev, false, false), 3, false); geometry.addAttribute('next', new PIXI.Buffer(polyline.next, false, false), 3, false); geometry.addAttribute('side', polyline.side, 1, false); geometry.addAttribute('uv', polyline.uv, 2, false); geometry.addIndex(polyline.index); let shader = PIXI.Shader.from(vertexLines, fragmentLines, { uColor: { value: new OGL.Color('#fff') }, uThickness: { value: 50 }, uResolution: { value: new OGL.Vec2() }, uDPR: { value: 1 }, uMiter: { value: 1 } }); let mesh = new PIXI.Mesh( geometry, shader ); polyline.mesh = mesh; stage.addChild(mesh); }); // Add handlers to get mouse position const mouse = new OGL.Vec3(); if ('ontouchstart' in window) { window.addEventListener('touchstart', updateMouse, false); window.addEventListener('touchmove', updateMouse, false); } else { window.addEventListener('mousemove', updateMouse, false); } function updateGeometry(polyline) { console.log(mouse); polyline.points.forEach((p, i) => { p.toArray(polyline.position, i * 3 * 2); p.toArray(polyline.position, i * 3 * 2 + 3); if (!i) { // If first point, calculate prev using the distance to 2nd point polyline.tmp.copy(p).sub(polyline.points[i + 1]).add(p); polyline.tmp.toArray(polyline.prev, i * 3 * 2); polyline.tmp.toArray(polyline.prev, i * 3 * 2 + 3); } else { p.toArray(polyline.next, (i - 1) * 3 * 2); p.toArray(polyline.next, (i - 1) * 3 * 2 + 3); } if (i === polyline.points.length - 1) { // If last point, calculate next using distance to 2nd last point polyline.tmp.copy(p).sub(polyline.points[i - 1]).add(p); polyline.tmp.toArray(polyline.next, i * 3 * 2); polyline.tmp.toArray(polyline.next, i * 3 * 2 + 3); } else { p.toArray(polyline.prev, (i + 1) * 3 * 2); p.toArray(polyline.prev, (i + 1) * 3 * 2 + 3); } }); polyline.mesh.geometry.getBuffer('position').update(polyline.position); polyline.mesh.geometry.getBuffer('prev').update(polyline.prev); polyline.mesh.geometry.getBuffer('next').update(polyline.next); } function updateMouse(e) { if (e.changedTouches && e.changedTouches.length) { e.x = e.changedTouches[0].pageX; e.y = e.changedTouches[0].pageY; } if (e.x === undefined) { e.x = e.pageX; e.y = e.pageY; } // Get mouse value in -1 to 1 range, with y flipped mouse.set((e.x / renderer.width) * 2 - 1, (e.y / renderer.height) * -2 + 1, 0); } function update() { updateId = requestAnimationFrame(update.bind(this)); polylines.forEach((polyline) => { for (let i = polyline.points.length - 1; i >= 0; i--) { if (!i) { // For the first point, spring ease it to the mouse position polyline.tmp.copy(mouse).add(polyline.mouseOffset).sub(polyline.points[i]).multiply(polyline.spring); polyline.mouseVelocity.add(polyline.tmp).multiply(polyline.friction); polyline.points[i].add(polyline.mouseVelocity); } else { // The rest of the points ease to the point in front of them, making a line polyline.points[i].lerp(polyline.points[i - 1], 0.9); } } updateGeometry(polyline); }); renderer.render(stage); }; function resize() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; renderer.resize(canvas.width, canvas.height); polylines.forEach((polyline) => { if (polyline.resolution) polyline.resolution.value.set(canvas.width, canvas.height); if (polyline.dpr) polyline.dpr.value = renderer.resolution; }); } resize(); window.addEventListener('resize', resize.bind(this)); let updateId = 0; update();
  11. Hi! Maybe someone could help with a freeze of an animation while we loading/preloading textures. There are background and several big animations. After scene have started to change and transition animation have started, main container is cleared and new background with different big animations are added. This freeze is connected with scene rendering. Does somebody know the way to deal with this problem? ======================= Version pixijs 6.2.2 ======================= Application virtual_h = 2276; virtual_w = 1280; render = PIXI.autoDetectRenderer(virtual_w, virtual_h, { resolution: window.devicePixelRatio, autoResize: true, antialias: false, }); gameContainer.height = virtual_h; gameContainer.width = virtual_w; document.getElementById("game").appendChild(render.view); ======================= Animation let animationRaw = PIXI.Loader.shared.resources["animationRaw"].spritesheet.animations["animationRaw"]; let animation = new PIXI.AnimatedSprite(animationRaw); animation.autoUpdate = true; animation.loop = false; animation.onComplete = function() { animation.stop(); }; gameContainer.addChild(animation); ======================= Preload render.plugins.prepare.upload(gameContainer); ======================= Ticker ticker.add(function() { render.render(gameContainer); }); ======================= Switch a scene gameContainer.removeChildren(0, gameContainer.children.length); let animationRawNew = PIXI.Loader.shared.resources["animationRawNew"].spritesheet.animations["animationRawNew"]; let animationNew = new PIXI.AnimatedSprite(animationRawNew); animationNew.autoUpdate = true; animationNew.loop = false; animationNew.onComplete = function() { animationNew.stop(); }; gameContainer.addChild(animationNew); =======================
  12. Friday Sundae is a creative digital studio, specialising in education, games and gamified content. We work in the interactive space for broadcasters, museums, agencies and educators. Here's us Friday Sundae Studio REMOTE / FREELANCE DEVELOPERS We create and manage a wide range of web / app games for Warner Media, including the Cartoon Network and Sky Kids. You'll be joining our talented team of HTML5 webgl developers creating the best online games played across the globe for TV and Web. Please only apply if you're an experienced developer (5+ years) with a portfolio of experience in kids web games or similar online games (non-monetized). Contact [email protected] with your portfolio, hour/day rate and availability. Thanks! ?
  13. We'd like to present you with another game that we created to showcase the codeless VR capabilities of Verge3D for Blender. Understandably, it is Xmas-themed, so you might put on your VR headset such as Oculus Quest right now (can works without VR too). Pick up a snowball gun and fend off those sneaky snowmen that pop up in the woods! Launch the game in your Oculus or desktop browser: Click here to launch Oculus controls: stick on either controller – walk/strafe, grip on either controller – pick up the snowball gun, trigger button on either controller – shoot. Desktop controls: WASD – walk/strafe, Shift – run, Space – jump, LMB – shoot. We wish you great holidays and a Happy New Year! Enjoy!
  14. Hello ?! I am experimenting with making a split screen multiplayer game, using a game engine backed by PIXI, GDevelop. To do so, I'm moving the "camera" (the root Container's position) to center each player and render the root container into a sprite, each sprite being a player's screen. To do the rendering, I've used code that looks like this (simplified for readability and to contain only the PIXI code, not the engine specific one) that runs every frame of the game: const source = the root PIXI Container; const width, height = the viewport width & height; const renderTarget = a PIXI sprite; global.rt = (global.rt || RenderTexture.create({ width, height })); global.sprite = (global.sprite || Sprite.from(global.rt)); if(!renderTaget.texture instanceof RenderTexture) renderTarget.texture = RenderTexture.create({ width, height }); renderer.render(source, { renderTexture: global.rt }); renderer.render(global.sprite, { renderTexture: renderTarget.texture });  The texture of the render target seems to be replaced, but it seems to be transparent (or the background color), no messages in the console, but after a few dozens of seconds the webgl context is lost. The more renders the quicker, so i am guessing it has something to do with the amount of times i do the rendering. Does anyone have some pointers about what i may have done wrong? Thanks
  15. Hi all! I hope you are fine! We are experiencing a strange graphics issue using the Samsung s21 with Android 12 (even chrome, firefox, etc.). We have several games developed using the awesome Pixi.JS v4.8.8 and, at some particular state of the renderer, the screen displays some gliches/flickers each frame. I'm part of the Babylon.JS core team so, for sure, I have firstly tried to reproduce using Babylon.JS Unfortunately I failed to reproduce so I decided to dig into the Pixi.JS source code. After some intuition and tries, I found that the problem is solved when all vertex buffers stored using the "STREAM_DRAW" hint become stored using the "STATIC_DRAW" hint. Both "STREAM_DRAW" and "DYNAMIC_DRAW" generate the problem, only "STATIC_DRAW" fixes the problem. Of course, I don't think the problem comes from Pixi.JS but more from the driver or the browser itself. It would be awesome if we can be sure of that together. As I'm not a Pixi.JS source code professional, I would really appreciate if you can confirm it can't come from the Pixi.JS WebGL renderer ❤️ I have shared 2 videos where you can see the flickering effect. You can also see that according to what is rendered, the problem looks different. In the stage there are only sprites and only 1 mesh (NineSlicePlane), no filter and not render target. WebGL context is created using default values (stencil: true, alpha: false, etc.). Also, I failed to reproduce in the Pixi.JS playground because I think the problem appears only in specific states, specific buffer sizes etc. Maybe that's why I failed to reproduce with Babylon.JS as well When I say "specific", I mean that we have a lot of other games using Pixi.JS 4.8.8 and they are working perfectly with Samsung S21 & Android 12. Only few have this problem I mentioned above. If needed, I can share some Spector.JS records so you can see the delta in WebGL commands between 2 frames (one that works and one that fails) Here all the informations I have: - the problem does not appear in Samsung S21 with Android 11 - the problem appears with Samsung S21 with Android 12 - the problem does not appear in Google Pixel 5 with Android 12 Cheers and thanks again for your awesome work! flickering_2.m4v flickering.m4v
  16. Hi, I Recently discovered Pixi JS and have to say, I am a big fan. For a first project with the framework I thought I would create something fairly simple and go for a breakout type clone. The whole thing works super smooth in Safari and Firefox on my iMac, but for some reason I get intermittent choppy frames when using Chrome. I thought Chrome was supposed to be the boss of web browsers, so it was a surprise to see this! I have started to look at the profiler ( attached recording ), but according to this my frame rate is good! Unless I am mis-reading something? From what I understand, this kind of effect could also be caused by GC, but I am not really sure how to get the info from this data. If anyone can throw me a line here it would be greatly appreciated. I suppose I could try deploying the project somewhere or sharing my git repo if need be? Many Thanks. Profile-20210515T160855.json.zip
  17. I get this error [.WebGL-0x55e80100]GL ERROR :GL_OUT_OF_MEMORY : glTexImage2D: <- error from previous GL command on my phone, everything is fine on my computer. What could be the reason?. The meaning of the project is that I draw a bizier curve by points, then it moves
  18. Hi, We're fairly new to pixi.js and so far everything worked great, but we've now run into our first problem we couldn't figure out browsing the forum and the web. We are currently creating a diagram consisting of lots of elements (about 12.000 elements, could get even more later on). That's going fine so far, but we now added an option for the user to filter the elements on display. So, every time the user changes the filter options, we remove all elements and add the new amount of filtered elements. That still works fine for a couple of times, but after about 9 changes Chrome loses the WebGL context, which leads to nothing being displayed. A short summary of what we're doing: 1. Initializing the stage a) Create a new Viewport using pixi-viewport b) Create all the objects c) Add our function doing visibility checks to shared ticker 2. When the data changes: a) Remove function from ticker b) Remove all children (iterating backwards, so we don't miss any) c) Destroy every child after removing it d) Start over at 1. b) keeping the current stage/viewport From my understanding, there should only be one WebGL context the way we are handling this. Can it be that pixi-viewport does something under the hood we are not aware of? Currently the objects are all sprites, except one container, that we empty as well before removing it from the stage. Before that, some of the objects were Pixi-Graphics, so I thought that maybe these are using up contexts as well, but changing them to sprites did not help. And the problem only occurs in Chrome & Edge (in Edge even sooner), Firefox seems to do fine. At least I did not get to the point, where the problem occurs. We did not test other browsers since Windows is out target platform, but here the three major browsers should work. Thanks for any hints what to check.
  19. Hello, friends. There was such a task. Start up one! a wave over a sphere, which, as it were, looks like a map of the planet, which (map) in turn is generated from planeBufferGeometry and then these geometries are combined using THREE.BufferGeometryUtils.mergeBufferGeometries(geometries, false); Code of vertex shader: vertexShader:` varying vec2 vUv; uniform float time; void main(){ vUv=uv; vec3 newposition = position + position*sin(position.z*12.)*0.03; gl_Position = projectionMatrix * modelViewMatrix * vec4( newposition, 1. ); } `, The question is how to make only this one "wave", i.e. so that sin does not go over the entire sphere, but only in the middle, for example. And further. How can I change the direction of this "wave", now it comes from the Z coordinate of this sphere, I need it to go from the position I have defined (for example, approximate coordinates of London).
  20. Hi. I glad to introduce you a new game that was created by our team - it's called Arcade Race and it's a simple racing game where you need to go from checkpoint to checkpoint trying to do it in short time. It's a 3d game but made in old pixel game style like Interstate76 or first Carmagedon . Please don't judge it seriously it's just a fan art inspired by old games. It works directly in browser and mobile devices with friendly controlls. Enjoy. It was made using Verge3D engine in Blender with help of Inkscape and Gimp. Here's a link to the game And some screenshots
  21. Congrats on v5 you awesome people! So a long time ago I was working on top down 2D game that had line of sight, but I ran into performance problems problems that sound like they can be more easily solved in v5. For some reason the forum is not letting me upload images so here are some links. Screenshots: https://timetocode.tumblr.com/post/164071887541/much-progress-screenshots-show-in-game-terrain Video of line of sight https://timetocode.tumblr.com/post/163227386513/11-second-video-tree-blocking-line-of-sight It's just one of those pseudo-roguelike line of sight effects where you can't see around corners (real-time though!). It involved lots of triangles, and the algos were based on Amit Patel's https://www.redblobgames.com/articles/visibility/ To achieve this effect I created a canvas separate from pixi with the shadow color filling the screen, and then I would mask/subtract the triangles generated by the visibility algo. I would then take that resulting image with a littl ebit of blur and put it in a container that was rendered underneath the wall sprites. That was the fast version, I also made another version based on pixi graphics that had other issue. Even the fast version had all sorts of garbage collection problems, probably because it was creating a texture the size of the whole screen every frame and then discarding it. It sounds like v5 can probably handle this feature without generating a texture every frame. Could someone suggest a way to accomplish this in v5? I don't have to put the shadows under the wall sprites if that is particularly hard.. they could be ontop of everything instead -- just whatever stands a chance of hitting 60 fps on a chromebook. TY TY
  22. Hi, I have a 200 * 200 painting. I want to enlarge this picture (eg 1200 * 700). of course by preserving the image quality. I learned that the way to do this is interpolation. I use the OpenCV.js library to interpolate. However, both my mathematical operations and openCV processes take a long time. Average 70 ms. I have to reduce this to 30-40 ms. I will try to do my mathematical operations on the GPU using GPU.js. But I don't have much experience dealing with pictures. Does anyone have any idea how to speed up interpolation for this, of course, how to get a better view? PS: I don't mean give me the code. I'm looking for a library or a sample project that can be used for these tasks, or a hint to guide. I had asked a similar question before, but now my program has changed and I want to ask again because I have different problems.
  23. Hey! I'm trying to make calculations in a shader, and use all 4 channels, but unfortunately the alpha channel does not work as expected. I was thinking that if I will set gl.blendFunc(gl.ONE, gl.ZERO) then the output should be only just the source, without any blending, but it's not. So I have tried to combine it also with premultipling alpha (and keep gl.blendFunc(gl.ONE, gl.ZERO)), I get sort of closer results to the expected, but still behaviour is strange. In the demo below I'm just filling mesh with one color, and console.log values of the first pixel, was expecting [25, 178, 229, 25] but I got [255, 255, 255, 25] (without premultipled alpha) and [31, 184, 235, 25] (with premultipled alpha) https://www.pixiplayground.com/#/edit/785nGjqG5wSZoa9r2Xn7I Thank you in advance for a response!
  24. This is strictly for educational purposes only Since Flash is pretty much being deprecated in most browsers so is Habbo. Since there's retro versions, most of Habbo's assets are available on the internet. I've been using Pixi for now to create a 2D loading screen, which I did successfully. Then it occurred to me that Pixi is mostly just a renderer, and doesn't support 3D the same way as Three or Babylon does. Problem is that, I found coding of 2D UI elements in both Three and Babylon really difficult compared to Pixi. In Habbo it's really minimal what is going to be 2.5D / 3D as only the rooms, avatars and furni are, the rest is basically 2D GUI. So this is how I've done it for now https://gist.github.com/marcus-sa/7993baa14e6301c762747142e55cb5cf Some questions: Is Habbo; 2D with projecting, 2.5D or 3D, and would it be enough to use Pixi only? If no: Would it be possible to extend Pixi with Three or Babylon when there's going to be rendered 2.5D /3D objects? If it's truly 2D with projecting, should I just use Phaser instead? What would be best to do?
  25. Whenever I try to apply RGB split shift effect on the below Image, the rgb effect doesn't work. I dont know why the rgb color effect is not working on Image which has small color variation. For reference, I have added link to codepen demo and Image. The effect is working fine if the Image has color variations so, is there any way i can apply rgb effect on the below Image. Thanks in advance. https://codepen.io/piyushwalia/pen/pobVgWe
  • Create New...