Search the Community

Showing results for tags '3D'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


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

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Website URL





Found 151 results

  1. My portfolio. Portfolio speaks for itself. I'm looking for work, preferably a long-term paid project. I can do more or less any style of art from 2D, 3D, illustrations, UI/UX, highpoly or lowpoly. Extensive amounts of animations is my only real weak point. I'm not interested in any kind of rev-share at this current time. Feel free to contact me through a comment or PM. Email is prefered:
  2. Hi Everyone, I am developing a multi player 3D motion sensor game' Air Table Tennis', in which mobile is acting as a racket, I am using Quaternion for rotation of mesh, problem is that how to calibrate mobile motion with the mesh in the BJS, though it's moving but its not calibrated. How to set some origin or something that when game start racket on my game screen will be in same position as i am holding my mobile. Sorry for my bad English! Thanks in advance
  3. I'm new here. I got samples from babylonjs for drawing lines in 3D. It looks fine. I want to know how we can extend lines with new points at runtime? Could anyone please help me out? Source:
  4. I'm looking for work building interactive graphical HTML sites. My strength is in the 3D framework babylon.js. I also have an 82 DSLR multi-cam scanner which I use to scan in avatars. You can see my work here: I have a YouTube page here: I'm based in Melbourne, Australia but happy to work for other locations remotely.
  5. Hi everyone! Just wanted to share a small proof-of-concept game I've been working on for a while. It's called The monster's vault. The main goal is to find a way out of a dark creepy dungeon, pull a lever that opens the exit door, while not being caught by a wandering monster that dwells in the darkness, and bla-bla-bla... the whole point here is not about gameplay anyway. This game is inspired by Keith Clark's demo of an HL2 location made entirely by CSS 3d transforms. I tried to repeat his approach by making a browser 3d game with first-person view based on CSS transforms without any use of canvas graphics. My other goal was to try out a number of modern web technologies and APIs available in the browser, so here's what I came out with. ReactJS as a rendering framework and Redux as a game state manager. Kind of a questionable choice for a game, one may think, but hey, as I said, it's a proof-of-concept WIP demo pet home project =) Pointer lock events to control the cursor so that it cannot flow out of the screen. Gamepad api to support my Xbox One gamepad. I haven't been more happy when it actually worked (not sure about other controllers though). Web audio api to control the sounds and the music. It provides a way to place a sound in a 3d space and even make it spread in a certain direction, and that's really awesome. Using your headphones while playing is highly recommended. Service worker makes the game work offline as it caches all the resources after the first load. It can get annoying though, when you start facing the problems with invalidating the cache. I also tried out the svg lighting filters to simulate some shaders on the textures (set on highest graphics quality value in the Settings section). It looks neat but drops the fps dramatically. Some conclusions: declarative 3d graphics with CSS 3d transforms and animations are cool and relatively easy to use, but not performant enough (which is totally fine) modern browsers have some really great APIs helpful for creating various web games making horror games is a huge, huge fun PLEASE NOTE: The monster's vault is only a desktop game and is viewed best in latest Google Chrome. It is inconceivably untested and may not work as expected on most machines and browsers. Some of the technologies used here are still not standardized and may break in the future. Also, the code is not optimised in any way, it weights some MBs. The low rendering FPS is compensated by the high cooler's RPS =) Anyway, I warned you. The game's github repo with some gifs, controls and credits — You can play the game here: Thanks!
  6. According to more than 90% of all devices now support WebGL! Does that mean that it's (finally) time to make 3D games? Has someone had an experience in selling/distributing webgl based games? And what do you guys think about 3d web games in general?
  7. The Grim Panda Design team is currently accepting new art and design projects. We have a team of experienced and seasoned 2D & 3D artists and animators who have provided assets for many of the best-selling mobile game companies on the market today. We work with any budget, large or small, and can quote prices on a project level, per-diem, or hourly. With the ability to work in vector, concept, and realistic styles, our team is dedicated to making your project come to life. The quality of your assets will be precise, clean, and look brilliant in your mobile IP. We pride ourselves on bringing your player into the world you have envisioned. Due to legal obligations with many of our clients, we cannot publicly post our complete portfolio. Please contact me at for samples. Thank you, and we look forward to bringing your creative design to the next level.
  8. Hi everyone, This is my first post here, so bear with me if I sound like I don't know what I'm doing. Anyway, I'm also fairly new to developing games with JS so I'm really learning a lot with every step. My game is made using Three.js (witch I've only recently found Babylon.js and I already love it) and the score keeping is some PHP scripts posting to a simple database. I knew nothing about any of those things going into this project, so it's rather sloppy. I got this project done in maybe two months for an independent study class at my university. At the moment tapping is not supported, as I was having issues with accessing the coordinates of the tap events. Here's the link to my game All the sounds, music, and graphics I made using the following: Adobe Photoshop (face texture) Adobe Illustrator (logo) Cinema 4D (3D models) Audacity and my mouth (SFX) (SFX) Korg Electribe 2 (music)
  9. Is it possible to develop a 3D html5 virtual world that is mobile compatible and is like Imvu, SecondLife etc. If so what software is available and free that can be used to develop this. Kind Regards I am a virtual world developer and I am keen on developing a virtual world for everyone...
  10. PlayCanvas added support for texture compression to the Editor today. This gives you: One-click texture compression for DXT, PVR and ETC1 At least 6 times compression of all texture data in your games Most optimal image format dynamically selected for the device running your game Check out all the info here (including a sweet demo, pictured below).
  11. My friend and I have been developing a 3D multi-player eat-em-up game called It's a WebGL game written in three.js. We would love any feedback you could give us. Game Info: Game: Multi-player eat-em-up, eat food to get bigger and eat other spheres to become the biggest Sphere Currently in Alpha Development Looking for feedback on: Abilities, we have a lot of ideas about what kind of abilities to add but knowing what are the right abilities to add is hard Multi-player performance specifically with dealing with lag with websockets How to improve jitter we are using lerp to smooth out the sphere positions but sometimes other clients lag and jump around, trying to figure out why. Any other feedback. Thank you so much for taking a look!
  12. Miniclip have published Virtual Voodoo, just in time for Halloween! It's made with PlayCanvas and uses ragdoll physics plus lots of particle based effects: You can read more about it here. PLAY THE GAME ON MINICLIP
  13. TOP SHOOTOUT: THE SALOON Become the best shooter in Wild West ever! Evil bandits kidnapped hostages and are keeping them in The Saloon. Only you can save them! Reload your gun and shoot up all bandits with their bosses! LINK: Caution: It’s a WebGL-based game, please ensure that you have latest browser version. Game features: Amazing Wild West atmosphereCrazy charactersCasual gameplay and controlsColorful 3D graphics and quality soundPlease contact me at to license the game or any other offer.
  14. Hello all I have a weird scenario where i am stuck. I currently have 2 images that are used as textrue and i load both onto 2 planes where they show on the same side. Now i need to kind of show 2 different planes or a double sided plane where each side has its own image or texture. Please look at the code that i have. For some reason the plane and plane2 show fine but plan3 and plane4 do not show up var scene = new BABYLON.Scene(engine); //Create an Arc Rotate Camera - aimed negative z this time var camera = new BABYLON.ArcRotateCamera("Camera", -2.5, 1.2, 350, BABYLON.Vector3.Zero(), scene, true); camera.attachControl(canvas, true); //Create a light var light = new BABYLON.HemisphericLight("hemi", new BABYLON.Vector3(0, 1, 0), scene); var spot = new BABYLON.SpotLight("spot", new BABYLON.Vector3(0, 0, 0), new BABYLON.Vector3(0, 0, 1), 0.8, 2, scene); spot.diffuse = new BABYLON.Color3(1, 1, 1); spot.specular = new BABYLON.Color3(1, 1, 1); spot.intensity = 1; spot.position = new BABYLON.Vector3(0, 0, -500); // spot.setDirectionToTarget(new BABYLON.Vector3(0, 0, 0)); spotcone = BABYLON.Mesh.CreateCylinder("cone", 16, 12, 0, 8, 0, scene); var conemat = new BABYLON.StandardMaterial("cone", scene); conemat.diffuseColor = new BABYLON.Color3(0, 0, 2); spotcone.rotation.x = Math.PI/2; spotcone.bakeCurrentTransformIntoVertices(); spotcone.material = conemat; spotcone.parent = spot; var sURL = "images/scodix1.jpg"; var materialPlane = new BABYLON.StandardMaterial("solid", scene); materialPlane.diffuseTexture = new BABYLON.Texture(sURL, scene); // materialPlane.emissiveTexture = new BABYLON.Texture(sURL, scene); //materialPlane.emissiveTexture = new BABYLON.Texture('images/scodix1.png', scene); //materialPlane.useAlphaFromDiffuseTexture materialPlane.specularColor = new BABYLON.Color3(0, 0, 0); materialPlane.backFaceCulling = true;//Allways show the front and the back of an element // materialPlane.emissiveTexture.level = 1; // powerfulness var tURL = "images/scodix1.png"; var spotPlain = new BABYLON.StandardMaterial("transp", scene, true); spotPlain.diffuseTexture = new BABYLON.Texture(tURL, scene); spotPlain.anisotropicFilteringLevel = 0; spotPlain.diffuseTexture.hasAlpha = true; spotPlain.useAlphaFromDiffuseTexture; spotPlain.hasAlpha = true; spotPlain.specularColor = new BABYLON.Color3.FromHexString("#ffffff"); spotPlain.backFaceCulling = true; // Always show the front and the back of an element var sURL2 = "images/scodix2.jpg"; var materialPlane2 = new BABYLON.StandardMaterial("solid2", scene); materialPlane2.diffuseTexture = new BABYLON.Texture(sURL2, scene); // materialPlane.emissiveTexture = new BABYLON.Texture(sURL, scene); //materialPlane.emissiveTexture = new BABYLON.Texture('images/scodix1.png', scene); //materialPlane.useAlphaFromDiffuseTexture materialPlane2.specularColor = new BABYLON.Color3(0, 0, 0); materialPlane2.backFaceCulling = true;//Allways show the front and the back of an element // materialPlane.emissiveTexture.level = 1; // powerfulness var tURL2 = "images/scodix2.png"; var spotPlain2 = new BABYLON.StandardMaterial("transp2", scene, true); spotPlain2.diffuseTexture = new BABYLON.Texture(tURL2, scene); spotPlain2.anisotropicFilteringLevel = 0; spotPlain2.diffuseTexture.hasAlpha = true; spotPlain2.useAlphaFromDiffuseTexture; spotPlain2.hasAlpha = true; spotPlain2.specularColor = new BABYLON.Color3.FromHexString("#ffffff"); spotPlain2.backFaceCulling = true; // Always show the front and the back of an element var plane = BABYLON.MeshBuilder.CreatePlane("plane", {width: 261, height: 153, sideOrientation: 2}, scene, true, BABYLON.MeshBuilder.DoubleSide); plane.position = new BABYLON.Vector3(0, 0, 0.5); plane.material = materialPlane; var plane2 = BABYLON.MeshBuilder.CreatePlane("plane2", {width: 261, height: 153, sideOrientation: 2}, scene, true, BABYLON.MeshBuilder.DoubleSide); plane2.material = spotPlain; var plane3 = BABYLON.MeshBuilder.CreatePlane("plane3", {width: 261, height: 153, sideOrientation: 1}, scene, true, BABYLON.MeshBuilder.DoubleSide); plane3.position = new BABYLON.Vector3(0, 0, 0.5); plane3.material = materialPlane2; var plane4 = BABYLON.MeshBuilder.CreatePlane("plane4", {width: 261, height: 153, sideOrientation: 1}, scene, true, BABYLON.MeshBuilder.DoubleSide); plane4.material = spotPlain2; var alpha = Math.PI; scene.beforeRender = () => { } return scene;
  15. var p = BABYLON.Vector3.Project(vector, BABYLON.Matrix.Identity(), scene.getTransformMatrix(), camera.viewport.toGlobal(engine)); it's return P { x: NaN , y: NaN} camera.viewport.toGlobal(engine) is null e {x: NaN, y: NaN, width: NaN, height: NaN} i find google and the result page is return the NaN too. I use it this function last month, and it worked. but now didn't work. I don't konw why? help...
  16. Hi all! I just wanted to show you the last game I am working on these days. This is a one person project I am doing at home afterwork. The main goal, besides having fun, is to show some detail and a functional game keeping it under 10mb. I am using Three.js for graphic rendering together with Backbone.js and Require.js for wiring everything up. Graphics are made with Blender and Gimp. I have uploaded my progress to (Sorry if my server is too slow!). Use arrow keys to defend yourself. It still lacks sound and need to work on difficulty level and dragons appereance, but still I think the idea is pretty clear (is not a complicated game!). Graphics are not in their final stage either. Let me know what you think. Thanks in advance!
  17. Hi, I'm here to share my IUT project : Make 3D with Pixi.js So okay, it's stupid cause Pixi.js is a 2D framework. But maybe you need to have some simple 3D models. (For example, 3D cards animations in a 2D game, or 3D rotation of images, titles etc). I'm not sure if it's really usefull. And the code is very dirty and it should exist some ways to optimise it) The documentation that talk about the way we did it is in a .pdf but it's in french. (But there is a lot of images) Zip file : in attached files Demo : If you have any questions, i'll be glad to answer them. Thanks to NeantLibre for his help.
  18. Hello In some cases, its more efficient to compute models in real time, rather then download the provided geometry in a babylon file. I want to create markers in my room, terrain ...and replace this specific spots with something like a trees currently i have to create a separate mesh as marker, it would save some space, if i could simply define a marker as a different material Thank you all very much, whoever wants to contribute The playground
  19. Here is one simple Demo example made with babylon.js Under project section Roll Shadow (very awsome babylon.js) (if anybody is interesting in any this is welcome) even developers for new releases and physics testing...
  20. I'd like to load into BJS a 3D model (e.g. a chicken) created in a 3D software (e.g. Blender), and then display it in my scene. The OBJ extension's demo seems to be loading a bundle of meshes that are grouped together to make one big model (if I understood it correctly), e.g. face mesh, body mesh, etc. I'd like to be able to load one unified small file size mesh. What's the best way to do it? Would I have to use an extension for that? Would you recommend loading an .obj file or a .babylon file? Does it depend on the case? Are there any free downloadable model ready for experimentation in BJS?
  21. So I've been reading many or the related posts about 3D text in here, and I made a small implementation to show one idea and ask for opinions. Jerome showed some examples using a buffer to extrude a mesh. I took his idea and used the buffer to build ribbons. Different colors show different meshes, and there are several bugs yet I didn't solve. If you change the font's size more will show up. I apologize for the coding style, I'm not use to javascript and I was copy/pasting from my own Typescript implementation.
  22. Is there a way to mask a certain part of a box in a 3d environment? (not masking 2d sprites with a 2d mask) For instance, I create a box, I mask its lower part, in runtime the upper part is not rendered - only the lower part, and the upper face of the box is not cut - in other words, only the height of the box is cut, keeping the upper face, unlike 2d masking a 3d shape which would look very bad. I attached a sketch to help you picture what I mean. Does something like that exist? If not, do you perhaps have an idea how to approach that problem? Playing with the box's height won't do the trick for me, because I need the texture diffused in its material to not be resized - just cut.
  23. This job is available again... Hello, I've got an HTML5 project [PAID] that needs doing, basically something I can use as proof of concept for a larger project idea. *************************** HTML5 Game Test Details: Two animated 3D rigged human characters on screen. 3D rigged clothing for each character. Two buttons which will switch animations on characters (both chars at once). Four buttons (two for each character) which will switch clothing on characters. Four buttons (two for each character) which will change skin color of characters. I will provide low-poly characters and clothing. Clothing will be rigged to the same skeleton the characters use. I will also provide two animations. All files will be provided in FBX format. Must work in all browsers including (and especially) iPhone. Preferably using Babylon.js. Can not be made in Unity as it needs to be all browser (including mobile) compatible. *************************** This is a proof of concept so I can see how it all works and performs on various devices. It doesn't have to look pretty, it just has to work. Send me a PM if you're up for the job. I'll need to know your price and a time frame, and we'll take it from there. Please provide link(s) your HTML5 work with your PM, and please only contact me for the job if you know how to do this without having to learn new techniques. Thank you!
  24. I tried to export a .babylon model of lamborghini avantador which i imported from, this was how it looked in And this is how it looks like in my project: This is the code <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Babylon.js sample code</title> <!-- Babylon.js --> <script src=""></script> <script src=""></script> <script src=""></script> <script src=""></script> <style> html, body { overflow: hidden; width: 100%; height: 100%; margin: 0; padding: 0; } #renderCanvas { width: 100%; height: 100%; touch-action: none; } </style> </head> <body> <canvas id="renderCanvas"></canvas> <script> var canvas = document.getElementById("renderCanvas"); var engine = new BABYLON.Engine(canvas, true); var createScene = function () { var scene = new BABYLON.Scene(engine); //Adding a light var light = new BABYLON.PointLight("Omni", new BABYLON.Vector3(20, 20, 100), scene); //Adding an Arc Rotate Camera var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 5, -10), scene); camera.attachControl(canvas, false); camera.setTarget(BABYLON.Vector3.Zero()); /* // The first parameter can be used to specify which mesh to import. Here we import all meshes BABYLON.SceneLoader.ImportMesh("", "scenes/nissan-gt-r-nismo-babylon/", "nissan-gt-r-nismo.babylon", scene, function (newMeshes) { // Set the target of the camera to the first imported mesh = newMeshes[0].position; }); */ /*----------------------------------------------------------------------------------------------------------*/ BABYLON.SceneLoader.Load("scenes/av/", "lamborghini-aventador-pbribl.babylon", engine, function (newScene) { // Wait for textures and shaders to be ready newScene.executeWhenReady(function () { // Attach camera to canvas inputs newScene.activeCamera.attachControl(canvas); // Once the scene is loaded, just register a render loop to render it engine.runRenderLoop(function() { newScene.render(); }); }); }, function (progress) { // To do: give progress feedback to user }); /*------------------------------------------------------------------------------------------------------------*/ // Move the light with the camera scene.registerBeforeRender(function () { light.position = camera.position; }); return scene; } var scene = createScene(); engine.runRenderLoop(function () { scene.render(); }); // Resize window.addEventListener("resize", function () { engine.resize(); }); </script> </body> </html> Also is there a difference between Load and import mesh method?
  25. I want to come up with a way to render my own car into the scene and it needs to look similar to the demo here in this link. I looked into the github repo of this project, I mean, where do I start? And whats a babylonmeshdata and babylonbinarymeshdata and how do we get that?