Leaderboard


Popular Content

Showing content with the highest reputation on 02/12/20 in all areas

  1. 1 point
    Hi, I want to create a mesh with shader, and through uniforms webGL textures to shader, I'm able use pixiapp.renderer.gl.createTexture, it works. But other sprite in pixiapp(PIXI.application) stage also force to mesh's webGL Texture is webGL texture binding index confusion? (gl.TEXTURE0) maybe need to use pixi webgl abstraction? does anyone have idea? best regrads.
  2. 1 point
    Sup guys: Just trying to make a server side 3D image for my website. I want it to look just as good as the 3D images on FaceBook. I know how to make depth maps properly, I just need the code to add it to my own site. You can see a bad example using Pixi code below. Just scroll down to where it says "demo" near the bottom of the page, and scroll over the picture for the effect. This is what I want, but it has to look good, like the 3D images you see on FaceBook: Demo I know Pixi code can help me, I'm just not that smart to know how to use it. Hope someone can help. Thx. -el
  3. 1 point
    Hello everyone, in late 2013 I started experimenting with what is possible using JavaScript/WebGL (coming from a computer engineering - C++/Java university background). Over time it grew into a game engine and then this game, as I worked on it in my free time next to full time jobs and more recently, contracting work. So it is entirely custom code (the only library used is RequireJS to load the JS files themselves), and I made all the assets as well (models, textures, music, sound effects (using some free CC licensed sound samples as a base) - you can find details in the "About" page in the game. As a result, the engine features and asset quality are rather modest. It is still heavily work in progress as the title suggests, but it has become quite playable recently, so I decided to share it here. About the game My goal is to create a fully fledged 3D space sim with procedurally generated missions that can be played on any computer with a modern browser. I am going for more of a softcore sim feel rather than an arcade one (there are many arcade options these days, but I prefer the more serious, elaborate controls of sims, without the time/hardware investment needed for something like Elite: Dangerous - which also doesn't run on my linux machine) Check out the facebook page, where I post updates and you can also find a recent gameplay teaser video. Game features (so far): full 3D, 6 degrees of freedom gameplay Newtonian physics (with flight assist) basic combat mechanics (primary weapons, shields, flight modes, targeting) 11 simple, authored missions (+3 training missions) against AI in-game database with info about the ships detailed, persistent graphics and control settings graphics settings automatically lowered if default settings are not supported by the hardware (high FPS is not ensured, only that it runs) joystick support an editor to mod the game (even more WIP/unstable than the game) Planned (missing :)) features: procedural missions, with ship upgrades in-between advanced combat mechanics (missiles, jamming, boosting, communication with wingmen) more content (ships, weapons, more detailed environments....) multiplayer Also a lot of polish, HUD changes, performance optimizations etc are planned. You can get a general idea by checking out the issues page of the game's github. Please note! The download size for the game can be significant (tens of MBs - depends on graphics settings and the mission being loaded), so I do not recommend trying it with a plan where you pay based on the amount of data! Play it here Let me know what you think! Technical info You can check out the code at https://github.com/nkrisztian89/interstellar-armada. Feel free to fork it - since it is 100% client side code, you can just throw it into the public HTML folder of your server (e.g. Apache) and it should work locally right away. Then you can use the built-in editor in the tools folder (localhost/the_folder_you_put_the_game/tools) to see how the game data files are organized, play with them (to apply the changes just hit export and then overwrite the original with the exported file in the data folder). Note that you cannot create or export missions or edit config/settings from the editor (as of now) Since this is a long project and I regularly revisit and update parts of the codebase that I might have not touched for a year or so, I try to keep it organized and nicely commented even if just for myself. However, this is not the number one priority, so there are parts of the codebase (which at this point grew above 60,000 lines) which are in terrible, terrible shape. I believe the best example of this currently is the code for the HUD.
  4. 1 point
    rolnxyz

    Pixi Filter and pixel size

    Hi, I'm trying to learn how to pass and use textures in PIXI.Filter. I have a game that uses a complex filter that takes multiple textures and behaves differently depending on the color of the pixel of each texture. It's too complicated to post here. The main problem I have is: I don't know how to measure the width / height of a pixel of the texture I'm passing inside my shader. Here I have a very simple filter that illustrates my issue: I want to create a filter that I pass the following "u" shape texture the filter uses that shape to generate a red drop shadow like this: The problem is the shader messes up and doesn't calculate properly the length of a pixel resulting on this: I was expecting to have a perfect stair going up, and I was expecting more steps on the stair (see algorithm below). Does anyone know what I'm doing wrong? Here's a link to a codepen illustrating the issue: https://codepen.io/alvaromartinlop/pen/abOvzxb?editors=0010 Here's the vertex shader: attribute vec2 aVertexPosition; attribute vec2 aTextureCoord; uniform mat3 projectionMatrix; varying vec2 vTextureCoord; uniform mat3 shadowMapMatrix; varying vec2 vShadowMapCoord; void main(void) { gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); vTextureCoord = aTextureCoord; vShadowMapCoord = (shadowMapMatrix * vec3(aTextureCoord, 1.0)).xy; } Here's the frag shader: precision highp float; varying vec2 vTextureCoord; uniform vec4 inputPixel; // Problem is here varying vec2 vShadowMapCoord; uniform sampler2D shadowMapTexture; void main() { vec4 shadowColor = vec4(1, 0, 0, 1); vec2 displacementCoord = vShadowMapCoord; vec4 shadowMapColor = texture2D(shadowMapTexture, vShadowMapCoord); vec4 finalColor; vec4 translateColor; vec2 translate = vec2(inputPixel.z,-inputPixel.w); for(int i= 0; i < 10; i++) { displacementCoord -= translate; translateColor = texture2D(shadowMapTexture, displacementCoord); if (translateColor.x > 0.0 && shadowMapColor.x == 0.0) { finalColor = shadowColor; break; } } gl_FragColor = finalColor; } Clearly the issue is with inputPixel, displacementCoord is not decrementing properly on each iteration in the for loop. Here's how I calculate the matrix for the texture public apply( filterManager: systems.FilterSystem, input: RenderTexture, output: RenderTexture, clearMode: boolean ): void { this.uniforms.shadowMapMatrix = filterManager.calculateSpriteMatrix( this._matrix, this._shadowMapSprite ); filterManager.applyFilter(this, input, output, clearMode); } So the question is. How do I properly calculate inputPixel so that I don't have the irregular staircase problem? Thanks.