Search the Community

Showing results for tags 'procedural'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


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

Found 18 results

  1. I'm using a compressed PNG for refraction postprocess, but it's just black and white noise, so I'd like to generate the texture instead. Is it possible though? I tried procedural textures from the library, but it only resulted in default checkerboard texture appearing. What am I doing wrong? And if procedural textures can't be used this way can I use my texture as a tile, so it wouldn't stretch across the screen changing the scale of the noise? var roadmaterialpt = new BABYLON.RoadProceduralTexture("customtext", 512, scene); var postProcess2 = new BABYLON.RefractionPostProcess("Refraction", roadmaterialpt, new BABYLON.Color3(1.0, 1.0, 1.0), 0.3, 2.0, 1.0, camera);
  2. Hey, I've never used any procedural textures. Where do I place the procedural texture and .fx files to reference? Thanks - I'm sure it's obvious. DB
  3. Hello All, I posted about this a while back and it's now finished and released! CryPixels Procedural Pixel Art Generator Has a demo version available on Windows and Mac. The software is 100% written in HTML5/JavaScript and packaged using nw.js. Full details of the software can be found here: Feel free to request additional features, product is in active development. Regards, TomC.
  4. Procedural Game Art Generator

    Hi Guys, I'm pretty new here so quick bio, i'm a full-time developer from the UK and currently working on some game software projects in my spare time. Im currently building a software package for procedurally generating pixel sprites. Just wanted to see what people think and how many would be interested in the end product. Might look into the idea of crowdfunding so I could work on it one/two days a week and get it finished and packaged on mac/windows and linux. I have attached some outputted sprites so you can see the results. There's tons of configuration options so I have just gone with what I think looks good as an example. TomC
  5. Hi, I’m new in Babylon.js, and trying to use it to create geometry that has animated vertices and an animated procedural texture. I’m animating the vertices in the vertex shader. For the procedural texture, I tried to follow the instructions: as well as checked the playground example. the problem with the example is that i can’t really find a complete implementation with the shader/config.json files. And i have a couple of basic questions as well. When creating a custom procedural texture with an external folder with the config.json and custom.fragment.fx files, is that the only fragment shader that can be used in the scene? Or can a BABYLON.ShaderMaterial be used additionally? I'm having a hard time grasping the concept of a ’fragment shader’ procedural texture VS a fragment shader as the last step of the webgl pipeline. Thanks.
  6. Has anyone done this yet in babylon JS I see a couple of examples but none of the projects I can reference have worked out the camera height in the process or the blending between LOD layers. I am going to start trying to make a working example from the paper but would like to see how others have handled it. I have looked at and but both of these are limited to 2d measurements and because I am going to be doing this on a planetary level with Spherical displacement I need to go a step farther. Also I am wondering how I should handle the frustum calculations because in theory nothing on the backside of the planet will need to be rendered but how do I establish the "zone" is hidden on the other side of the planet?
  7. This is more of a discussion than a demo. I thought it would be cool to know how people would approach a thing like PGC. I made a little demo based on the following article on how NMS achieved their semi-PGC: And with materials: The main model is split into pieces such as head, body, tail, legs and arms, and then variations of these are added to arrays and randomly picked. A random scale is picked too, as well as randomly generated materials using 2 textures and ShaderBuilder. This isn't something I need at this moment, but I think it's pretty cool and interesting to read about. ShaderBuilder and TexGen could be used to make some awesome procedural materials using a variety of colors and noise. One could also manipulate the vertices and normals I suppose, to get some more variation. You could then use few variables to generate a big variety of different creatures, foliage, rocks etc. In theory, this could save a lot of space on models and textures. One issue that comes to mind when I think about a web-game is the size of the models. All models will take up space, so manipulating the vertices might be the best approach, as every time you add a "head", "leg" etc. model, the size increases by +1. Another thing is the skeleton. This skeleton will have to be applied to every mesh inside the 3D software. Or can you apply skeletons to other models based on vertices? As I mentioned, this a nothing more than a discussion, so fire away if you have any ideas.
  8. Generate Dungeon CSV

    Hi everyone, I'm generating a random dungeon that I convert to CSV ( with Array.join ) but I can't find how to make it works with the Game.load.tilemap because the file doesn't need to be download as it's just a string in the program. How can I do to make my CSV string work with the pahser loader ? Thanks !
  9. Hello, I was reading this post from @Wingnut and I'm surprised how easy it is to generate a mesh. I've enabled the colors in this playground: This colors are per vertex and there is a color gradient across the face. Is it possible to set the face colors instead the per-vertex colors? Or is there a work around to achieve the same goal? Thank you very much for your time, Simon
  10. So yea, my internet was out yesterday and today... soooo I decided to go ahead and create my first written tutorial. Um I hope you like it? Comments, Concerns, Criticism?
  11. having trouble figuring this one out. see the following playground reference you should see a cube that should have a red overlay. If you don't see the red overlay, then comment out the "var grassTex = " line and run it again. can't figure out why the texture constructor is interfering with the overlay in all of my test scenarios. the causal factor seems to be the procedural texture constructor, because when i comment that out, the overlay returns. is this a bug or is something else going on here?
  12. Hi Everyone, This is my fist post on the Babylon.js subforum, and I must say that I am really loving the framework! Recently, I have been following this article by Andy Gainey: His original code is in Three.js, however I do not need all of his code, I just adopted the portion of the code that generates a subdivided Icosahedron. I am running into some difficulties generating and rendering the compound polyhedron of this icosahedron (such that each new vertices of the mesh are the centroid of each face of the Icosahedron). I have it so that I render the compound polyhedron, however it has the following issues: The triangles that compromise each face are blatantly obvious I need to render the face both ways (duplicate the indices in reverse), because some faces don't render if I don't do that I becomes slow compared to the icosahedron generation. There are excessively more vertices generated than required (however I want to be able to color each face individually) Here is the github repo with the code: Lines of interest are: 335-353 : They order the face centroids of the Icosahedron to generate the hexagons/pentagons 355: Inserting the face indices for rendering into the indices buffer I look forward to your opinions/suggestions, thanks everyone!
  13. Procedural geometry physics

    Hi, I need to generate a terrain mesh procedurally. I am currently doing it with lots of sprites stuck together in a line to generate the contour of the terrain. It works fairly well, but has a few quirks and seems to affect performance badly. What I was thinking of doing is generating the points in the preload function, then from that, draw a line to rendering the terrain, and then use the same points to generate the collision polygon. The issue I found is that the game.load.physics() function works with a url to a json object. Is there a way to pass it a json object that I created in the game itself instead of a url? By the way, I am using P2 physics for this.
  14. Bump maps

    Well, I'm managed to generate textures and meshes using procedural techniques. Now I'm working on bump maps. For my first attempt, my assumption was the bitmap contained the actual normals, no worky. I guess this means the values in the bitmap are actually offsets from the interpolated normal in the vertex shader? What does the math look like? Is it this? normalize(vertex_shader_normal + bump_map_normal) I'm pretty sure I understand the encoding of the bitmap (ie -1.0 to 1.0 -> 0 to 255) for (xyz -> rgb)
  15. Ok, need some help/ guidance on what to do. What I have now is a sprite that is being generated randomly using simplex noise. I have successfully masked out the background so I'm left with just the terrain. I will be using this as my ground sprite for each level in my game. So my problem comes to collisions. If I am generating the level's terrain on the fly, how would I go about making player collide with it? I have found some fancy software that you can actually trace out the object and with a click it will generate a polygon shape .json file, but this only works if you have the image prior to using it - which I don't. Any guidance would be greatly appreciated.
  16. [js13k] R3V3RS3 IT

    I had a go at js13k this year with R3V3RS3 IT, a webgl game in 10Kb (not 13 because I ran out of time before running out of space). I wanted to have some fun while doing some research for our upcoming projects. Regardless of the outcome of the competition, it's been a success because: I had lots of fun I learned some new stuffIn R3V3RS3 IT you chase balls of light in a precedurally-generated 3D landscape, while reconstructing a cheerful chiptune in reverse order. Typing this I realize it does sound a bit weird Best in Chrome (with voice synthesis!), but it does work in Firefox too. It's possible you need a decent graphics card, I haven't tried it on low-end hardware. I thought I'd post some links to some of the algorithms and techniques I've used, in case people are interested: Perlin noiseToroidal unwrapping of 3D noiseProcedural drum sounds with WebAudioOffline Audio ContextsBlinn-Phong shadingDerivative MapsPrecomputed derivative mapsA lot of other stuff, I just came up with it. Code is on GitHub.
  17. Hi everyone, I'm developing a simple runner game, and I'm wondering what is the best way to implement endless landscape with curved track in Babylon.js. I've read a lot of articles about this, and figured out which techniques to use, but I still cannot figure out how to bring these things to work together. There are several main problems: 1. Generate the landscape 2. Generate the curved track 3. Hide the next landscape prefab so the player wont be aware of the generation process 4. Connect the generated prefab to the current landscape in way that will give a smooth transition. As I understand the best technique to use for the landscape generation is height map based on Perlin Noise generated texture. The question is how can I generate two ground meshes which can connect smoothly each to other. Is there any way to apply constraints on Perlin Noise algorithm? As for generating the track I thought about extrusion based on Bezier Curve points, but again, how can I generate it on the generated landscape? Finally I came to the conclusion that the best way to hide the generation of the next prefab is the turns along the track. I thought about track with hills next to both edges (in other words, the track should be a kind of canyon), and before the transition to the next prefab there should be a sharp turn which hides the prefab. Although a can think about "how it should be implemented" theoretically, a still cannot figure out how can I bring these things to work together. Any help would be appreciated!
  18. Man vs. Robots

    I made a little HTML5 game. It's a randomly generated turn-based puzzle game about surviving the attack of killer robots. There's a randomly gneerated board where you'll see a man and some robots. You can move the man to any of the squares near him. Clicking on the man will dangerously teleport him to a random location. Teleporting may cause instant dead, so be careful with that. You can't attack the robots directly, but you can make the robots crash into each other. You win by making all the robots die. You lose if a robot gets to the square the man is in. Once you clean a level you move to a next level, where you'll fight one more robot than before. Eventually you will die. Note: Sometimes the game doesn't fully load the first time. Reloading the page usually works.