Search the Community

Hello guys, I am a frontend developer that trynna make my own game on Pixi 8 so I know nothing about game developing and rendering with WebGL in general. Now I have a static game demo with no animations. My game just has a constructor that creates a character from vector sprites and uses some masks and geometries to color different parts of the a character. In this case coloring works fine with just static geometries and masks but I want to add some animations and as I figured out by researching info, I need to use custom filters with my own shaders to color animated sprite and apply textures with some patterns. BUT, as I said I know nothing about creating and using shaders. I've tried to make some with ChatGPT help, but just got infinite erros which I don't know how to fix and what even these errors mean. So can you guys help me out by sharing some info about using shaders in Pixi or how to write shaders in general. I've found this guide https://webglfundamentals.org/ about WebGL but it's too difficult to me to understand and figure out how to solve my problem just by myself. And if someone can create shaders, please share just a simple shaders that apply texture on an animated sprite. Appreciate for every help.

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/

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/

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

MATRIX-ENGINE STATUS - [Integrated PWA addToHomePage/cache/] ✔ - [Integrated raycast (hit trigger detect), bvh animation] ✔ - [Basic Physics implementation based on cannon.js] ✔ - [FirstPersonController/SceneController Drag and navigation scene] ✔ - [Basic's Shadows vs lights (GLSL)] ✔ Description ℹ This is small but inspiring project. The benefits of this project is offering an overview of the entire application logic, easy native implementations (hybrid app), object structural. Thanks to Mr.Keestu i use (gl-program-structure) new version of glmatrix (2.0). Push&Pop matrix just like in opengles 1.1. Also can be downgraded to openGLES 1.1. webGL Lightweight library based on glmatrix engine. For multiplayer used webRTC done with io socket. Physics done with last version of cannon.js. I use free software Blender 2.90.1 for 3d Object mesh works. MatrixEngine is Blender frendly orientend lib. Also mixamo.com is great service used for creating my assets. Limitation ⚠ Basic implementation for physics (Cube, Sphere) Raycast not work after walk behind the object in first person mode Only static object cast spot light in right way for now. Need general more improvement on GLSL part. Next Features 🔜 General improvements in Lights section. Shaders must be improved based on work Links -> https://webglfundamentals.org/webgl/lessons/ For npm users recommended Use starter project: https://github.com/zlatnaspirala/matrix-engine-starter with command: npm i npm run build.all Project template in matrix-engine-starter Slot Mashine https://maximumroulette.com/apps/matrix-engine-starter/projects/matrix-slot/index.html Live Demos https://maximumroulette.com/apps/matrix-engine/examples-build.html https://maximumroulette.com/apps/matrix-engine/app-build.html https://fps-matrix-engine.vercel.app How to use it from npm services [codepen examples] [1.7.9] Lights - Who to use matrix-engine on codepen: https://codepen.io/zlatnaspirala/full/OJZXMWR BHV Pseudo Skeletal animation: https://codepen.io/zlatnaspirala/full/OJQdGVM Physics (cannon.js) https://codepen.io/zlatnaspirala/pen/rNvLGxE?editors=0010 Install dependencies Matrix engine keep minimum dependency. uglify-js, minify browserify, watchify npm run install.dep npm i @Note: For windows users maybe you will need to add browserify to the env PATH if you got errors on commands npm run build.*. Help for localhost dev stage Build Application bundle script From [1.8.0] you can use build for develop with watch task: npm run examples npm run app @Note: If you use unsecured http protocol no build needed at all just navigate to the html file who loade script with type=module. No need for this any more but you can use it. For production/public server you will use npm run build.XXX commands. and then upload project to the usually /var/www/html/. app-build.html , examples-build.html loads compiled javascript type text/javascript. Build entry App.js npm run build.app Now navigate to the app-build.html page. Build entry App-Examples.js npm run build.examples Now navigate to the examples-build.html page. Build just library npm run build.lib Build with uglify build.app.ugly; Build ALL build.all; After all for production is recommended to use compressed script. Production Final (bash): ./compress Switch example with url params Usefull also for production for switching whole pages/apps. https://localhost/matrix-engine/query.html?u=adding_color_cube https://localhost/matrix-engine/query-build.html?u=adding_color_cube Code access: const QueryString = matrixEngine.utility.QueryString; Take a look at query-build.html List of examples: Adding color cube Adding color pyramyde Adding color square Adding tex square with raycast Adding color triangle Adding geometry Adding multi (compose) textures Adding square texture Blending Audion manipulation Camera texture (stream texture) Cube Cube Geometry Cube Light & texture Cube light dynamic Custom texture First Person controller Load obj files - UV maps Object animation -morh sequence Object animation mesh indices calculation JS1Kilo examples implementation Porting 2D canvas (Active textures) Sphere geometry Texture uv manipulation Videos textures Physics Cube with force on raycast trigger Physics Sphere BVH loader, animation play Load obj sequences FPShooter example (+Sounds) [WIP] specular_light_basic -> global light position test [WIP] Lens effect shaders for cube [WIP] Features description Camera config In ./program/manifest.js. Access is App.camera. Note: One of params FirstPersonController or SceneController must be false. FirstPersonController is classic first person view with movement WASD and mouse look. SceneController use direct input WASD. To make camera angle view change press shift to enable camera angle. Middle mouse button will enable drag scene to left/right/top/down. Mouse middle wheel change work only when shift is pressed. camera: { viewAngle: 45, nearViewpoint: 0.1, farViewpoint: 1000, edgeMarginValue: 100, FirstPersonController: false, SceneController: false, sceneControllerDragAmp: 0.1, sceneControllerDragAmp: 0.1, speedAmp: 0.5, sceneControllerEdgeCameraYawRate: 3, sceneControllerWASDKeysAmp: 0.1 }, Range of matrixEngine.Events.camera.pitch in ForstPersonController is (-33 to 33). To get access for camera use matrixEngine.Events.camera. Typically looks: { "roll": 0, "rollRate": 0, "rallAmp": 0.05, "pitch": 0.24500000000000632, "pitchRate": 0, "yaw": -6945.400000016527, "yawRate": 0, "xPos": 5.1753983300242155, "yPos": 2, "zPos": -21.90917813969003, "speed": 0, "yawAmp": 0.05, "pitchAmp": 0.007 } Light And Shadows [1.7.6] activateShadows works only for cube for now. world.Add("cubeLightTex", 1, "myCube4", textuteImageSamplers); App.scene.myCube4.activateShadows(); App.scene.myCube4.shadows.activeUpdate(); App.scene.myCube4.shadows.animatePositionY(); If you wanna color vertex but with direction and ambient light then: // Simple direction light world.Add("cubeLightTex", 1, "myCube7", textuteImageSamplersTest); App.scene.myCube7.position.setPosition(3,3,-11); App.scene.myCube7.geometry.colorData.SetGreenForAll(0.5) App.scene.myCube7.geometry.colorData.SetRedForAll(0.5) App.scene.myCube7.geometry.colorData.SetBlueForAll(0.5) App.scene.myCube7.deactivateTex(); Make square pattern // Custom generic textures. Micro Drawing. // Example for arg shema square for now only. var options = { squareShema: [4,4], pixels: new Uint8Array(4 * 4 * 4), style: { type: 'chessboard', color1: 0, color2: 255 } }; App.scene.myCube9.textures.push( App.scene.myCube9.createPixelsTex(options) ); Physics Physics based on cannon.js Support list : 😇 cube sphere Example with physics and raycast hit detect: App.camera.SceneController = true; canvas.addEventListener('mousedown', (ev) => { matrixEngine.raycaster.checkingProcedure(ev); }); window.addEventListener('ray.hit.event', (ev) => { console.log("You shoot the object! Nice!", ev) /** * Physics force apply */ if (ev.detail.hitObject.physics.enabled == true) { ev.detail.hitObject.physics.currentBody.force.set(0,0,1000) } }); var tex = { source: ["res/images/complex_texture_1/diffuse.png"], mix_operation: "multiply", }; // Load Physics world! let gravityVector = [0, 0, -9.82]; let physics = world.loadPhysics(gravityVector); // Add ground physics.addGround(App, world, tex); world.Add("cubeLightTex", 1, "CUBE", tex); var b = new CANNON.Body({ mass: 5, position: new CANNON.Vec3(0, -15, 2), shape: new CANNON.Box(new CANNON.Vec3(1, 1, 1)) }); physics.world.addBody(b); // Physics App.scene.CUBE.physics.currentBody = b; App.scene.CUBE.physics.enabled = true; const objGenerator = (n) => { for(var j = 0;j < n;j++) { setTimeout(() => { world.Add("cubeLightTex", 1, "CUBE" + j, tex); var b2 = new CANNON.Body({ mass: 1, linearDamping: 0.01, position: new CANNON.Vec3(1, -14.5, 15), shape: new CANNON.Box(new CANNON.Vec3(1, 1, 1)) }); physics.world.addBody(b2); App.scene['CUBE' + j].physics.currentBody = b2; App.scene['CUBE' + j].physics.enabled = true; }, 1000 * j) } } objGenerator(100) Networking [1.8.0] Networking based on webRTC. If you wanna use multiplayer mode you need to run intro folder networking/ next commands: npm i node matrix-server.js Networking Support Methods list: ✅😇 Any scene object: ➡ position SetX() SetY() SetZ() ➡ rotation.rotateX() rotateY() rotateZ() Cube, Sphere, Square ➡ geometry.setScale() ➡ geometry.setScaleByY() ➡ geometry.setScaleByZ() ➡ geometry.setScaleByZ() ➡ geometry.setTexCoordScaleFactor() Pyramid ➡ geometry.setScale() ➡ geometry.setSpitz() Networking minimal example export var runThis = world => { world.Add("pyramid", 1, "MyCubeTex"); world.Add("square", 1, "MyColoredSquare1"); // Must be activate matrixEngine.Engine.activateNet(); // Must be activate for scene objects also. // This is only to force avoid unnecessary networking emit! App.scene.MyCubeTex.net.enable = true; App.scene.MyCubeTex.net.activate(); App.scene.MyColoredSquare1.net.enable = true; App.scene.MyColoredSquare1.net.activate(); // Just call it normally App.scene.MyCubeTex.position.SetZ(-8); App.scene.MyColoredSquare1.position.SetZ(-8); }; It is perfect solution webGL vs webRTC. Origin code used broadcaster class from visual-ts game engine project. Custom textures We just override function for texture executing code. Next level is full custom opportunity, geometry, collision, networking etc. App.scene.MySquareTexure1.custom.gl_texture = function (object, t) { world.GL.gl.bindTexture(world.GL.gl.TEXTURE_2D, object.textures[t]); world.GL.gl.texParameteri(world.GL.gl.TEXTURE_2D, world.GL.gl.TEXTURE_MAG_FILTER, world.GL.gl.LINEAR); world.GL.gl.texParameteri(world.GL.gl.TEXTURE_2D, world.GL.gl.TEXTURE_MIN_FILTER, world.GL.gl.LINEAR); world.GL.gl.texParameteri(world.GL.gl.TEXTURE_2D, world.GL.gl.TEXTURE_WRAP_S, world.GL.gl.CLAMP_TO_EDGE); world.GL.gl.texParameteri(world.GL.gl.TEXTURE_2D, world.GL.gl.TEXTURE_WRAP_T, world.GL.gl.CLAMP_TO_EDGE); world.GL.gl.texImage2D( world.GL.gl.TEXTURE_2D, 0, // Level of details world.GL.gl.RGBA, // Format world.GL.gl.RGBA, world.GL.gl.UNSIGNED_BYTE, // Size of each channel object.textures[t].image ); world.GL.gl.generateMipmap(world.GL.gl.TEXTURE_2D); }; Opengles native cubeMap [1.8.5] If you wanna custom canvasd2d draws for aech cube side New tag cubeMap takes texture.source empty array. Canvas2d Example: /** * @description * What ever you want! * It is 2dCanvas context draw func. */ function myFace(args) { const {width, height} = this.cubeMap2dCtx.canvas; this.cubeMap2dCtx.fillStyle = args[0]; this.cubeMap2dCtx.fillRect(0, 0, width, height); this.cubeMap2dCtx.font = `${width * args[2]}px sans-serif`; this.cubeMap2dCtx.textAlign = 'center'; this.cubeMap2dCtx.textBaseline = 'middle'; this.cubeMap2dCtx.fillStyle = args[1]; this.cubeMap2dCtx.fillText(args[3], width / 2, height / 2); } var tex = { source: [], mix_operation: "multiply", cubeMap: { type: '2dcanvas', drawFunc: myFace, sides: [ // This is custom access you can edit but only must have // nice relation with your draw function ! // This is example for render 2d text in middle-center manir. // Nice for 3d button object! {faceColor: '#F00', textColor: '#28F', txtSizeCoeficient: 0.8, text: 'm'}, {faceColor: '#FF0', textColor: '#82F', txtSizeCoeficient: 0.5, text: 'a'}, {faceColor: '#0F0', textColor: '#82F', txtSizeCoeficient: 0.5, text: 't'}, {faceColor: '#0FF', textColor: '#802', txtSizeCoeficient: 0.5, text: 'r'}, {faceColor: '#00F', textColor: '#8F2', txtSizeCoeficient: 0.5, text: 'i'}, {faceColor: '#F0F', textColor: '#2F8', txtSizeCoeficient: 0.5, text: 'x'} ] } }; Classic images: If you wanna load images, see example: world.cubeMapTextures([ 'res/images/cube/1.png', 'res/images/cube/2.png', 'res/images/cube/3.png', 'res/images/cube/4.png', 'res/images/cube/5.png', 'res/images/cube/6.png', ], (imgs) => { var tex = { source: [...imgs], mix_operation: "multiply", cubeMap: { type: 'images', } }; world.Add("cubeMap", 1, "myCubeMapObj", tex); }); BVH Matrix Skeletal [1.5.0] New deps pack bvh-loader. It is bvh parser created for matrix-engine but can be used for any other graphics language. const options = { world: world, autoPlay: true, myFrameRate: 10, showOnLoad: false, // if autoPLay is true then showOnLoad is inactive. type: 'ANIMATION', // "TPOSE' | 'ANIMATION' loop: 'playInverse', // true | 'stopOnEnd' | 'playInverse' | 'stopAndReset' globalOffset: [-30, -180, -155], skeletalBoneScale: 6, boneNameBasePrefix: 'backWalk', skeletalBlend: { paramDest: 7, paramSrc: 6 }, // remove arg for no blend boneTex: { source: [ "res/icons/512.png" ], mix_operation: "multiply", }, // pyramid | triangle | cube | square | squareTex | cubeLightTex | sphereLightTex' drawTypeBone: 'squareTex' }; const filePath = 'https://raw.githubusercontent.com/zlatnaspirala/bvh-loader/main/javascript-bvh/example.bvh'; var myFirstBvhAnimation = new matrixEngine.MEBvhAnimation(filePath, options); Live demo https://codepen.io/zlatnaspirala/pen/OJQdGVM Raycast cube , square, triangle, obj (ObjLoader) [1.8.4] From 1.8.4 raycast hit trigger works for obj's. Raycast works fine also in firstPersonCamera operation. Raycast work perfect after local single rotation x, y, or z. Combination rotx and roty works , roty and rotz only with rotx = 180 for now. Bug if walk behind object then turn arround and try raycast but no work for now. Usage: canvas.addEventListener('mousedown', (ev) => { matrixEngine.raycaster.checkingProcedure(ev); }); canvas.addEventListener('ray.hit.event', (ev) => { alert("You shoot the object! Nice") }); First person controller: If you activate this flag you get fly/free camera controller by default. // In one line activate also deactivate. App.camera.FirstPersonController = true; Animated female droid (morph targets): // Obj Loader function onLoadObj(meshes) { // No need from [1.8.2] // App.meshes = meshes; for (const key in App.meshes) { matrixEngine.objLoader.initMeshBuffers(world.GL.gl, App.meshes[key]); } textuteImageSamplers2 = { source: ['res/images/RustPaint.jpg'], mix_operation: 'multiply' }; setTimeout(function () { var animation_construct = { id: 'female', meshList: meshes, // from [1.8.2] sumOfAniFrames: 18, currentAni: 0, speed: 3 }; world.Add('obj', 1, 'female', textuteImageSamplers2, App.meshes.female, animation_construct); App.scene.female.position.y = -3; App.scene.female.rotation.rotationSpeed.z = 20; App.scene.female.position.z = -13; // App.scene.armor.mesh.setScale(5) }, 100); } // Custom list 1, 3, 5, 9 matrixEngine.objLoader.downloadMeshes( { female: 'res/3d-objects/female/female_000001.obj', female1: 'res/3d-objects/female/female_000003.obj', female2: 'res/3d-objects/female/female_000005.obj', female3: 'res/3d-objects/female/female_000009.obj', ... }, onLoadObj ); // From [1.8.2] you can use `makeObjSeqArg` matrixEngine.objLoader.downloadMeshes( matrixEngine.objLoader.makeObjSeqArg( { id: objName, path: "res/bvh-skeletal-base/swat-guy/seq-walk/low/swat", from : 1, to: 34 }), onLoadObj ); Blending: // Use it App.scene.female.glBlend.blendEnabled = true; App.scene.female.glBlend.blendParamSrc = ENUMERATORS.glBlend.param[4]; App.scene.female.glBlend.blendParamDest = ENUMERATORS.glBlend.param[4]; Load Obj with UV map (Blender export tested): For more details dee this example script: load_obj_file.js Video texture: New way: There is no prefix for path any more. Fixed autoplay on AFTRE FIRST CLICK. Multi textures loading. Video texture corespond with direction & ambient light. Important it is direct pass from video to webgl textures. No canvad2d context. NOT WORKING with shadows for now. App.scene.outsideBox.streamTextures = new VT( "res/video-texture/lava1.mkv" ); TODO: Add arg { mixWithCanvas2d } Old way [still present]: world.Add('cubeLightTex', 1, 'TV', textuteImageSamplers, App.meshes.TV); App.scene.TV.streamTextures = new VIDEO_TEXTURE('Galactic Expansion Fractal Morph [Official Video]'); Camera texture: App.scene.TV.streamTextures = new ACCESS_CAMERA('webcam_beta'); MatrixBVHCharacter (MEBvhAnimation) MatrixBVHCharacter feature use class matrixEngine.MEBvhAnimation. Its load primitives for bvh skeletal. MatrixBVHCharacter is proccess where we load pre defined skelatal obj parts(head, neck, legs...) . @Note Human character failed for now but func works. Nice for primitive obj mesh bur rig must have nice description of position/rotation. In maximo skeletal bones simple not fit. If you pripare bones you can get nice bvh obj adaptation for animations. mocap set of assets looks better for this operation. Example Code: const options = { world: world, // [Required] autoPlay: true, // [Optimal] showOnLoad: false, // [Optimal] if autoPLay is true then showOnLoad is inactive. type: 'ANIMATION', // [Optimal] 'ANIMATION' | "TPOSE' loop: 'playInverse', // [Optimal] true | 'stopOnEnd' | 'playInverse' | 'stopAndReset' globalOffset: [-30, -180, -155], // [Optimal] for 1.5 diff from obj seq anim skeletalBoneScale: 2, // [Optimal] /*skeletalBlend: { // [Optimal] remove arg for no blend paramDest: 4, paramSrc: 4 },*/ boneTex: { source: [ "res/images/default/default-pink.png", ], mix_operation: "multiply", }, drawTypeBone: "matrixSkeletal", matrixSkeletal: "res/bvh-skeletal-base/y-bot/matrix-skeletal/", objList: ['spine', 'hips', 'head'] , matrixSkeletalObjScale: 80, // [Optimal] // Can be predefined `MatrixSkeletal` prepared skeletal obj parts/bones. // Can be primitives: // pyramid | triangle | cube | square | squareTex | cubeLightTex | sphereLightTex // New optimal arg // Sometime we need more optimisation ignoreList: ['spine1'], ifNotExistDrawType: 'triangle' }; const filePath = "res/bvh/Female1_B04_StandToWalkBack.bvh"; var myFirstBvhAnimation = new matrixEngine.MEBvhAnimation(filePath, options); This is folder for obj parts (head arm legs ...) Filenames are simplefield like head.obj , arm.obj without any prefix from constructor... matrixSkeletal: "res/bvh-skeletal-base/y-bot/matrix-skeletal/", Take a look example: matrix_skeletal.js. Character (ObjLoader/morph targets) This good in runtime bad for loading procedure. How to update character animation? Maximo -> download dea or fbx -> import intro blender Import multi or one animation. -> blender export -> obj (animation) This is new feature from [1.8.2]. Take a look at : load_obj_sequence.js For now engine use objLoader to load all morphs. matrixEngine.objLoader.downloadMeshes( matrixEngine.objLoader.makeObjSeqArg( { id: objName, path: "res/bvh-skeletal-base/swat-guy/anims/swat-multi", from: 1, to: 61 }), onLoadObj ); In onLoadObj callback function: var animArg = { id: objName, meshList: meshes, // sumOfAniFrames: 61, No need if `animations` exist! currentAni: 0, // speed: 3, No need if `animations` exist! // upgrade - optimal animations: { active: 'walk', walk: { from: 0, to: 35, speed: 3 }, walkPistol: { from: 36, to: 60, speed: 3 } } }; FirstPersonShooter examples [WIP] Just like in eu4 shooter we dont need whole character mesh for FPSHooter view. I cut off no hands vertices in blender to make optimised flow. Feature [1.8.12] App.events Access. Take a look at the apps\fps_player_controller.js example. App.events.CALCULATE_TOUCH_DOWN_OR_MOUSE_DOWN = (ev, mouse) => { // From [1.8.12] // checkingProcedure gets secound optimal argument // for custom ray origin target. // mouse console.log(mouse.BUTTON) if(mouse.BUTTON_PRESSED == 'RIGHT') { // Zoom } else { // This call represent `SHOOT` Action. // And it is center of screen matrixEngine.raycaster.checkingProcedure(ev, { clientX: ev.target.width / 2, clientY: ev.target.height / 2 }); } }; WIP calculating for fixing FPS camera view. [1.8.11] New 3dObject property isHUD. If you setup this to the true value object will escape world rotation/translation. Only local translation is active. This is good for HUD Menu in 3d space. Texture editor (runtime): Using Vjs3 with Editor use: App.scene.outsideBox.streamTextures = new Vjs3( "./2DTextureEditor/actual.html", "actualTexture" ); Running Editor Tool npm run run.tex.editor // or npm run te After creating 2d texture direct on page at the end run: npm run build.tex.editor to make build final pack. Imports note we can use any canvas 2d app [anyCanvas] . In examples: porting2d.js [Old VJS] Example of anyCanvas porting_text.js [Vjs3] porting2d_particle.js [Vjs3] It is very powerfull tool! Research Vjs3 source examples at: https://github.com/zlatnaspirala/visualjs On NPM Service npm i visual-js , matrix engine already have visual-js , visual-js-server editor backend part. To show/hide iframe use: App.scene.outsideBox - is any object who have streamTextures LOADED with 2DCANVAS. App.scene.outsideBox.streamTextures.showTextureEditor(); E('HOLDER_STREAMS').style.display = 'none'; Access to the [any] canvas2d program: anyCanvas(path-of-html,name-of-canvas) App.scene.outsideBox.streamTextures = new anyCanvas( "./apps/funny-slot/", "HELLO_WORLD") Live editor [actual.js predefined] Old VJS loading with anyCanvas() Old Live demo: Video and webcam works at: https://maximumroulette.com/webgl2/examples.html Changes: From [1.8.14] Html's Every static file / resource moved to the new folder ./public Improved FPShooter example , added collision box for player. From [1.8.13] MatrixSounds Access object App.sounds. Usage: // Play source audio [single instance]. App.sounds.createAudio('music', 'res/music/background-music.mp3'); // Play simultanius same source audio. App.sounds.createAudio('shoot', 'res/music/single-gunshot.mp3', 5); From [1.8.12] Draw scene list swap items options must be done! From [1.8.0] Added watchify. We have support for real time connections based on webRTC. You must work on https protocol even in localhost. Change in program/manifest net = false if you dont wanna use networking. Node.js Multiplayer Server based on webRTC. Take a look at the folder ./netwotking. Run it: cd networking node matrix.server.js If you wanna in terminal popup then run (bash/work on win also if you have bash) dedicated.sh./ or dedicated.bat. From [1.7.11] No need for: // matrixEngine.Engine.load_shaders('shaders/shaders.html'); Initial Shaders now loads from code (inside engine). No need any action. PWA Fully runned Integrated Add to Home page and regular html5 page options. In same time fixed all autoplay audio and video context construction. It is good to consult pwa test on page. Best way is to keep it on 100% pass. Secured 🛡 No Dependabot alerts opened. Credits && Licence: Video material used from :From youtube.com : Electric sheep - a facinating animated flame fractal TheMrNgaard Creative Commons Attribution licence (reuse allowed) Project Base Structure inspired by Copyright (C) 2014 Tappali Ekanathan Keestu ([email protected]) GNU General Public License Textures download from http://textures.com Dinamic texture bitcoin used from: Author:Ioannis Cherouvim GitHub:cherouvim Reddit:/r/cherouvim Website:cherouvim.com Compo:canvas Demo link:https://js1k.com/2017-magic/demo/2853 Shortlink:https://js1k.com/2853 Female 3d Object http://www.blendswap.com/blends/view/26225 Creative Commons Attribution 3.0 http://www.blendswap.com/users/view/AndresCuccaro https://freestocktextures.com/texture/bark-wood-plant,122.html https://github.com/Necolo/raycaster Great https://www.mixamo.com/ OBJECT LOADER http://math.hws.edu/graphicsbook/source/webgl/cube-camera.html Player character https://www.mixamo.com/#/?page=1&query=walk&type=Motion%2CMotionPack BVH collections from: Special thanks to the CMU Graphics Lab Motion Capture Database which provided the data http://mocap.cs.cmu.edu/` Used in examples: BLACK FLY by Audionautix | http://audionautix.com Music promoted by https://www.free-stock-music.com Creative Commons Attribution-ShareAlike 3.0 Unported https://creativecommons.org/licenses/by-sa/3.0/deed.en_US Networking based on https://github.com/muaz-khan/RTCMultiConnection https://unsplash.com/photos/8UDJ4sflous https://webgl-shaders.com/shaders/frag-lens.glsl https://www.fesliyanstudios.com/royalty-free-sound-effects-download/gun-shooting-300

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

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.

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

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

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!

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

Hi, does anybody know a professional/real mobile game made with Three.js/Babylon.js/Playcanvas? It seems like no one is betting for these technologies and goes for Unity or similar.

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();

Hello dear players! We wanna introduce Mad World -Age of Darkness - We are working on. Genre: Story-based Action 2D MMORPG Story: Dark Fantasy Player Count: Over 10000 on Single Server Platform: Browser, PC, Mobile We will start Alpha Test 5.0 at Feb 23rd 1:30 ~ Feb 28th 9:00 (GMT) More information here: https://www.madworldmmo.com/bbs/board.php?bo_table=notice&wr_id=51 More information here: https://www.madworldmmo.com Youtube Channel: https://www.youtube.com/c/MADWORLDMMO Our discord where you can contact us or share your suggestion: https://discord.gg/CQm3syGeUu

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); =======================

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! ?

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!

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

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

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

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

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.

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).

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

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