Search the Community
Showing results for tags 'Three.js'.
-
I want to make a 3D RPG. I already have the storyline planned out. I also already have a 3rd person camera set up in playcanvas, but since i'm not amazing at programming yet we can use whatever game engine the programmer wants. The RPG will have 4 characters, including the main character. It will have a lot of action elements and I want it to be very atmospheric. I also want the graphics to be low poly. With the programming I can try to help a little, but ill probably wont be of any use. Thank you and i hope you want to join our team!
- 2 replies
-
- 3d
- playcanvas
-
(and 2 more)
Tagged with:
-
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.
- 2 replies
-
- webgl
- playcanvas
-
(and 3 more)
Tagged with:
-
I have followed almost all courses for three.js and babylon.js game programming on Udemy and have created several small games in Unity3D aswell. Most of the courses are targeted at beginners and/or are very brief. Regardless of the high price tag, are there any indepth advanced HTML5 3D game programming courses for three.js or babylon.js?
- 2 replies
-
- 3d
- babylon.js
-
(and 2 more)
Tagged with:
-
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).
-
In HTML we are importing several javascript frameworks. Some of them needs any one server for running this like local or web server. Is there any possibilities or tricks to run that kind of html file without server. I am using three.js within a html file. Basically three.js requires server to run the file. I need to run that without any server.
-
Anybody here who knows any Community chatroom for pixijs/threejs/game development that are active? My laptop (from my work) blocks some site including html5gamedev because it has some tags for "gaming" but surprisingly not discord/gitter/reddit so I am trying to find alternatives while I am on my laptop.
-
I have tried to implement a simple nipplejs joystick on playcanvas(engine only version) as well as threejs but the joystick isn't showing up even in static mode. I'm sure I'm instantiating it properly as I have tried it on anothe div on the same page and it works, but it doesn't work on the canvas. <canvas id="application"></canvas> <script> //Game code var options = { zone:document.getElementById("application"), color: "white", size: 100, threshold: 0.1, fadeTime: 0, multitouch: false, maxNumberOfNipples: 1, dataOnly: false, position: {bottom: "100px", left: "100px"}, mode: "static", restJoystick: true, restOpacity: 0.5, lockX: false, lockY: false, catchDistance: 200, dynamicPage: true, }; var manager = nipplejs.create(options);
-
- playcanvas
- nipplejs
-
(and 2 more)
Tagged with:
-
I have water shader script which was developed using Three.js and I want to convert shader as Babylon.js Who can help me, Please let me know water-material.js
-
- javascript
- babylonjs
-
(and 3 more)
Tagged with:
-
Our game has mostly interior environments, we need reasonably correct reflection for the floor. We’ve already using box projected cubemaps (i.e. parallax envMap) but as each mesh can only has 1 envMap, we have to split the floor to multiple parts according to the local cubemap position, which is unreasonable for our use case. We need someone to implement the POI based cubemap blending method as described very detailed here: https://seblagarde.wordpress.com/2012/09/29/image-based-lighting-approaches-and-parallax-corrected-cubemap/ References: https://seblagarde.files.wordpress.com/2012/08/parallax_corrected_cubemap-siggraph2012.pdf https://docs.godotengine.org/en/3.1/tutorials/3d/reflection_probes.html#blending https://docs.unity3d.com/Manual/UsingReflectionProbes.html We’re really looking forward for a long-term collaboration. The budget is to be negotiated. Please send your quote to: [email protected]
-
Triple Builder is a three-match puzzle game inspired by Triple Town. The goal of the game is to build a building for five minutes and get high marks. When build a building, if you have a same levels on two buildings on the right, left, up and down, you get points by creating a high-level building. play on itch.io: https://ozymandiaz.itch.io/triplebuilder development environment: visual studio code, html5, three.js, typescript, webpack. resources: - Sound: DayAndNight (https://opengameart.org/content/day-night-in-summerset) - Sound: The Essential Retro Video Game Sound Effects Collection (https://opengameart.org/content/512-sound-effects-8-bit-style) - Model: Voxel-Buildings (https://mehrasaur.itch.io/voxel-buildings)
-
Hello, I can teach you using Skype. If you share your screen I can tell you what you need to install and press. I can show you how to: set breakpoints in VSCode in the project with a few files. We will use AMD and RequireJS bundle your source files to use them in Browser. We will use Browserify and UglifyJS compile Node.js server TypeScript scripts connect your server with client that is written in pure WebGL, Phaser, Pixi.js, Three.js or Babylon.js write Jasmine Specs (Unit Tests) for client and server set breakpoints in Jasmine Specs deploy you TypeScript server and client on Heroku connect your project with GitHub to automation deploying after push More about unit tests. I use TypeScript. I will give you my boilerplate for Jasmine and I will show you how to set up it. I will instruct you: How to set breakpoints in TS code in VSCode How to write Mock objects for dependencies that was injected How to build your unit tests in production (in bundle.min.js) I use AMD-build and RequireJS to debug mode (to set breakpoint in VSCode) and I use CommonJS-build and Browserify/UglifyJS to build unit tests to production My time rate is $10 per hour.
-
Hi, I'm new to this forum, but I hope you all can help me. I want to make a 3D video game. I want to do it in webGL so it will be easy to share with people. When I message my friends and say "Look at this thing I made!" It's easier to get them to click on a link than to download an executable. That's why I've been reluctant to learn Unity or some other desktop game system, even though I understand they can get better performance. What I'm trying to figure out is: Will webGL work for my idea? I'm having doubts because I put together a little graphics experiment with three.js and I'm not getting good performance at all. The scene I'm rendering is much smaller than I was imagining for my game and the framerate is already tanking. It seems like I'm just drawing too many polygons. I've got about 50K triangles in the scene to get it to look the way I want with all the curved corners and everything. When I query the renderer object, it tells me that about 20K are being rendered at a time. It seems like the automatic frustum culling is already buying me a lot. I want to make big old space ships with long corridors and many rooms to explore. I'm feeling that if half a dozen rooms is taxing the browser like this then I might not be able to do what I want. I could redo this experiment in a few different frameworks and compare the performance and development experience, but I'd like if I could benefit from the expertise of all of you. ? So, what do you think? Is this going to be do-able? Am I going to have an easier time with a different framework like babylon.js? Do you think I am wasting my time with html5 and if I want to run around in a giant 3D space ship then I need a conventional game engine? I don't know the rules for links on this forum, so I hope this is OK. Here's the demo I made that I'm talking about: http://safiina.com/dev/
-
Hi, I'm a designer and I'd like to reach out to others for input or even collaboration. Lots of my javascript work is on github in the spirit of sharing and learning together. Like an open source sketchbook. I like making small experiments that might be included in something bigger. I often play with mechanics, audio and visual elements to look for interesting things : http://type76.com As you can see, it's lots of generated, three.js and canvas stuff, with a game dev leaning. I'm keen to go in new directions too. It's hard to find interest among my social circles, so I'm reaching out here to see if people are into this kind of thing. It's not business. It's about hitting ideas off each other, collaboration, fun and learning together. Maybe we can make an itch.io page if there is the will. You're welcome to join the discord server : https://discord.gg/KUqcuWu I'd love to see your experiments. Here or on discord. Things that aren't full games, but are fun and interesting concepts. This seems the place to look for like minded folks. Have you got a sketchbook? Is there a good CMS for this? I might be doing it wrong. Are there any other communities for this apart from discord servers full of revshare projects?
-
Hello, I thought to place this on the demos and projects thread, however I decided to post this here as it is more a topic for which framework to use and why. I was hired by an elite software development group at Sony Electronics to help them navigate through WebGL to build a pipeline to deliver content for the South By Southwest convention and to create a foundation to quickly develop games and online media for future projects. In short, I was tasked to escape the limitations of 2D media and help Sony move forward into 3D content taking advantage of the WebGL rendering standards. This was no esay task, as I was hired Dec. 11th, and was given a hard deadline of March 5 to deliver 2 multiplayer games which were to be the focus of Sony's booth at SXSW in Austin Texas. But first I had to run a quick evaluation and convince a very proficient team of Engineers which framework was the best fit for Sony to invest considerable resources into for SXSW and which was the right coice to take them into future projects. Yhis wa a huge consideration as the WebGL framework which was to be chosen was to play a much greater role at Sony Electronics considering the group I was assigned to works well ahead of the rest of the industry... developing what most likely will be native intelligent applications on Sony devices (especially smartphones) in the near future. These are applications which benefit the consumer in making their day to day interactions simple and informative. Thus the WebGL framework to be chosen needed to be an element in displaying information as well as entertainment for a greater core technology which is developing daily in a unique tool set used by the software engineers to build applications which allows Sony to remain the leader not only in hardware technology, but in the applications which consumers want to use on Sony devices. But as I was working for Sony, I also had a greater task as there were existing expectations in developing a game on Sony devices which needed to be on par with what consumers already were experiencing with their Playstation consoles. As unrealistic as this might initially appear, that had to be the target as we couldn't take a step back from the quality and playability the consumer was already accustomed to. So back to the first task... selecting the WebGL framework for Sony Electronics to use moving forward. Rather than telling a story, I'll simply outline why there was little discussion as to which framework to choose. Initially Sony requested someone with Three.js experience as is more than often the case. So when they approached me for the position, I told them I would only consider the position if they were open to other frameworks as well. They were very forthcoming to open their minds to any framework as their goal was not political in any way - as they only cared about which framework was going to provide them with the best set of tools and features to meet their needs. And one might certainly assume that since Sony Playstation is in direct competition with Microsoft Xbox, and Microsoft is now providing the resources in house to develop babylon.js, that Sony Electronics might see a PR conflict in selecting babylon.js as their WebGL development framework. However, I'm proud to say that there was never a question from anyone at Sony. I was very impressed that their only goal was to select the very best tools for the development work, and to look beyond the perceived politics and to develop the very best applications for the consumer and to fulfill their obligations to their shareholders in building tools that consumers want on their smartphones and other electronic devices. So once again... Three.js vs. Babylon.js. This was a very short evaluation. What it came down to was that three.js had far more libraries and extensions - however, this was not the strength of three.js since there is no cohesive development cycles with three.js and although many libraries, tools, and extensions exist, more than often they are not maintained. So it was easy to demonstrate that practically any tool or extension we would require for the SXSW production would require myself or the team updating the extension or tool to be compatible with the other tools we might use on the project. This was due to the failings of the framework since each developer who writes an extension for three.js is writing for a specific compatibility for their own project needs... and not for the overall framework... as this is not within the scope of any developer or group of developers. Thus I find that it requires weeks if not months of of maintenance in three.js prior to building content, just to ensure compatibility between all of the tools and extensions needed to use for most projects. As for babylon.js, the wheel is not generally re-invented as it is with three.js, as most extensions are quickly absorbed into a cohesive framework quickly - provided they have universal appeal - and this integration ensures compatibility as there are fewer and fewer extensions to use, but instead an integrated set of tools which are thoroughly tested and used in production revealing any incompatibilities quickly. The bottom line is that there are no alpha, beta, and development cycles in three.js, thus no stable releases. Whereas the opposite exists with babylon.js. There is a cohesive development of the tools, and Sony is smart enough to see beyond the politics and to realize that having Microsoft support the development of babylon.js is a huge bonus for an open source framework. And if anyone had to choose a company to support the development of a WebGL or any framework, who better than Microsoft? With practically every other useful WebGL framework in existence spawned by MIT, most all are barely useful at best. And why would anyone pay to use a limited WebGL framework such as PlayCanvas when Babylon.js is far more functional, stable, and free? This baffles me and most anyone who chooses one project using babylon.js. The only argument against babylon.js is that the development of the framework is now supported in house by Microsoft. But for myself and others, this is a positive, not a negative. I've been assured by the creators and lead developers of babylon.js that they have secured an agreement with Microsoft ensuring the framework remain open source and free. This ensures that anyone is able to contribute and review all code in the framework, and that it remains in the public domain. Sony gets this and we quickly moved forward adopting babylon.js as the WebGL framework within at least one division of Sony Electronics. At the end of this post I'll provide a link on youtube to a news report of not only the games we built for SXSW, but the exciting new technology on built on Sony phones which uses the phones camera to capture a hight resolution (yet optimized) 3D scan of a person's head. This is only a prototype today, but will be a native app on Sony phones in the future. So our task was not only to develop multiplayer games of 15+ players simultaneous in real-time, but to have a continuous game which adds a new player as people come through the booth and using a Sony phone, has their head scanned. This was an additional challenge, and I must say that I was very fortunate to work with a group of extremely talented software engineers. The team at Sony is the best of the best, I must say. All in all, it was an easy choice in choosing babylon.js for the WebGL framework at Sony Electronics in San Diego. Below is a news report from SXSW which shows the new scanning technoogy in use, as well as a brief example of one of the games on the large booth screen. And using Electron (a stand-alone version of Chromium), I was able to render 15 high resolution scanned heads, vehicles for each head, animation on each vehicle, particles on each vehicle, and many more animations, collisions, and effects without any limitations on the game - all running at approx. 40 fps. The highlight of the show was when the officers from Sony Japan came through the booth... which are the real people we work for... gave their thumbs up, as they were very happy with hat we achieved in such a short time. And these were the people who wanted to see graphics and playability comparable to what the Playstation delivered. And they approved. Link: Thanks to babylon.js. DB
- 23 replies
-
- sony
- babylon.js
-
(and 2 more)
Tagged with:
-
Panopuzzle is a tile rotation puzzle game you can play from inside a 360 panorama and it is live here: panopuzzle If you own an Oculus Go or another VR headset - there is also a immersive VR version which runs via WebVR in the standard Go browser under https://panopuzzle.created-by.me/VR.html It runs in pretty much any browser on a mobile phone, a tablet or desktop computer. You can move your device or drag the image with the mouse/finger to look around. Tap/click a tile will rotate it - your preferred rotation direction can be set in the settings (rotating gear in the left bottom) At the left top is the "Zoom out" option which changes the panorama to an outside view like that No matter if you are zoomed in or out you can (within limits) zoom in/out the normal way (mouse wheel, mouse middle click and move or two finger pinch) The tile counter at the top can be switched on or off depending on how difficult you want to make it for yourself. You can also switch on a hint system which will highlight one wrong tile at a time - sometimes quite useful to find those last two ones Click "Zoom in" at the left top to "go into" the panorama again. All settings are kept so to switch off the hints again in the next level you need to do that via the settings. Once all the tiles are correct you can progress to the next level by pressing "Next" on the right top - or replay the level on a different setting (easy, normal, hard) There are 22 levels of real world and fractal panoramas with tile numbers ranging from 44 tiles to 132 tiles Have fun and let me know what you think. Also if there are any problems, ideas, improvements.... send me an email to panopuzzle at gmail.com
- 1 reply
-
- webgl
- panopuzzle
- (and 4 more)
-
Hello dear devs! My name is Paul. I'm not sure if this the right place to do this but I'm gonna give it a shot. So... here it goes! With my friend Edoardo we're creating a Game Engine using three.js for rendering and a node.js + webpack environment for development. It's an electron app, works on Windows, Mac and Linux and is fully extendable through a friendly and simple API. The idea behind this is to create a free tool that is not limited to the functionalities we can add to the editor. Anyone should be able to create editor extensions and publish them either for free or for profit. So, in other words, this could be a Game Engine if you install Game Engine extensions to it, or maybe a WebGL App creator of other sorts if you choose other extensions. We're focusing on the Game side at least for now. As you can see we're in front of something that has no name (yet), no clear purpose and looks like an outlaw which doesn't belong anywhere. So, for now at least, we're referring to it as The Rogue Engine, in search of a purpose and the cure for bad breath ? Will it find a name? Will it find the Rogue's Den where it belongs? Is Paul drunk? We don't know. So yes, I'm here to help out the Rogue in its quest, looking for your feedback and ideas (or insults) of any kind. We'd like to build a tool we'd all want to use, and get a clue of which are the tools we should prioritise for the upcoming Alpha. Yes! There's an Alpha in the oven and we'd love for you to try it out. For now we're sharing content through my Twitter, at least until we can find The Rogue a name and some decent clothes to put it on Twitter, Facebook and all those places where the cool kids hang out these days. Thank you ?for enduring this horrible post to the end. You're a brave soldier, I hope you enjoy the video (preferably with a beer ?) Cheers!
-
Is there any reason why sound is not playing in my WebVR demo in the Oculus browser? I already changed video.muted to false & it still won’t play. It’s the same demo in the examples only with another video I tried with sound. Also, it doesn’t autostart even though I told it to. It only autostarts in non-VR mode on my regular laptop. Here’s the link :: http://babylontesting.epizy.com/Three.js/skytime-vr/ Here’s the link to the Source :: view-source:http://babylontesting.epizy.com/Three.js/skytime-vr/ { NOTE } :: Copy & paste EVERYTHING above including the ‘view-source:’ portion into a browser
- 1 reply
-
- virtual reality
- vr
-
(and 3 more)
Tagged with:
-
I am trying to import in my Three.js project a gltf model exported from Blender. The problem is that, in Three.js, all models materials are black (color: Color {r: 1, g: 1, b: 1}) while originally the mesh is green. I find this topic (http://www.html5gamedevs.com/topic/41196-object-always-exports-black-3dsmax-gltf-export/) that show how to solve the problem in 3dsmax, but how to solve for blender? Here my code in Three.js: var loader= new THREE.GLTFLoader(); loader.load( 'http://localhost/planegeometryeditor/meshes/map/firstterrain.gltf', function(gltf) { scene.add(gltf.scene); }, undefined, function (error) { console.error(error); } );
-
Hello, I am trying to run official Getting Started Example on Playground https://plnkr.co/edit/ with OrbitControls. The first problem was that official OrbitControls is not friendly with TypeScript and I took: https://github.com/nicolaspanel/three-orbitcontrols-ts But this module does not use AMD by default and I recompiled it to AMD for usage with RequireJS library because I have a few files: Program.ts and Scene.ts and I can run my example on Playground only with AMD compilation. Recompilation requires going in node_modules folder for recompiling module - it is not a common way. I created libs folder in my project and copied content of dist to libs/three-orbitcontrols-ts/ it works localy: https://github.com/8Observer8/usage-orbitcontrols-in-typescript-on-playground I put all files in one directory for usage in Plunker and it works localy: https://github.com/8Observer8/usage-orbitcontrols-in-typescript-on-playground-one-directory But when I upload the files on Plunker it does not work: https://plnkr.co/edit/yICv96E7lTK8xu7DohJB?p=preview You will see the error in a console: Please, help me to solve this problem.
-
Hey everyone ✌️ My name is Tibo and I’m lead Creative Developer at Voodoo, the leading mobile game publisher. I’m looking for coworkers to make HTML5 games with me :)! This is a paid opportunity for a job in Paris, France (paid relocation if needed) and actually one of the few job offers for HTML5 game developers on the market. If you’re interested in gaming and would like to enter the industry, are technically savage and eager to learn a lot this really is a gold opportunity! The goal is to create playable ads, a very new and interactive ad format that asks for nothing else but fresh ideas and technical innovations. Key Skills Basic knowledge of HTML & CSS Expert in JavaScript and able to create gameplays with PIXI.js and/or THREE.js Interest in mobile games Misc Competitive salary + Stock options + Performance Bonus + Company Profit Sharing + simply the best company to work for in the world (seriously!!) Any questions welcome in replies or PM, do not hesitate to check the full offer right here and apply! ? https://jobs.lever.co/voodoo/98ae288d-b923-419a-8148-78274a33eb53
-
Hey! I want to create a game thats can run on as many platforms natively. So being a front-end developer i turned to webGL. But i have a few questions: 1 ) Is possible to create big complex and demanding games like: Unturned Risk of Rain Hotline miami Minecraft Terraria Nidhogg Battle block theater Both Graphical as Technical. 2 ) If you use a html wrapper to create a .exe, .apk etc. is the source code protected? Also can you compile to consoles? 3 ) I have read that you can code in c++ and compile it to javascript is that functional? Also is it possbile to write in an high-level strong language and compile that to javascript (i do not like weakly typed languages, and C++ is to low-level for me) 4 ) How does it come that i can not find any big games made in webGL (only tech demo's, fancy websites and games on this forum) 5 ) When i looked around this forum i dident saw any three.js based games. Why is that? i looked at the tech demo's of many engines and three.js looked the most promising. Or is there something i missed? 6 ) Is webGL for my project a smart choice? At the end i dont want my game to be playeble on the web. Only for stand alone on pc, linux, mac. (mobile and console if the project succeeds) 7 ) What is the best engine to use for a 2d/2.5d with some nice light effects? 8 ) Does the steam SDK for achievements, joining friends, steam controller etc. work well with webGL? Thanks for reading, it would mean a great deal to me if you know a answer to one of my questions!
-
In a game I am developing there is an odd issue where rotating the player character the water plane looses it's transparent state completely going opaque but only on a specific heading or the same heading facing the opposite direction, it only happens at a very small degree, you turn slightly and it goes back to transparent. How is rotating an object (which happens to be the player in this case) affect transparency only while facing in a specific direction when the object has nothing to do with the plane (except when the player moves the plane moves but it doesn't effect rotation or do anything with the plane while the character isn't moving). Is this a Three.js issue or a WebGL issue or what? I find nothing googling it in various manners even setting object.material.alphaTest doesn't do anything. It doesn't effect the shader for the water mirror, only the object material transparency.
- 13 replies
-
- three.js
- transparency
-
(and 1 more)
Tagged with:
-
Hey guys. This is a simple RPG demo featuring characters from "Fate/Grand Order" (derivative work), powered by "System Animator 11" (WIP) written by myself. PLAY: http://www.animetheme.com/system_animator_online/SystemAnimator_online_FGO.html?cmd_line=/TEMP/DEMO/fgo_rpg01 "System Animator" is originally a desktop gadget project, a fully customizable system monitor/music visualizer/animated wallpaper with focus on visuals and fun. It runs on "Electron", which is basically a Chrome browser, and no wonder System Animator itself is basically HTML5. In this upcoming WIP version, I plan to make it fully online and add some gaming features so that it can be used to make browser-based 3D games (mainly RPG for now). If you want to know more about System Animator itself, check out the following page. http://www.animetheme.com/sidebar/ For more info about the game itself (controls/copyright/license/credits/etc), check out the following README file. http://www.animetheme.com/system_animator_online/TEMP/DEMO/readme_FGO.txt The game has only been tested on Google Chrome and Firefox. It doesn't work on Edge right now, but it may work on other modern browsers. Bug reports and commments are most welcomed.
-
Hi! First post here. I'm currently experimenting with the gamepad API and I'm trying to capture the motion/orientation of my dualshock 3 to build controls for a new game project. I was wondering if anyone had manage such a thing and managed to make it work in the browser? It seems that WebVR makes use of the motion data using the gamepad.pose object and so far I've been unlucky to reach it on a regular controller. Has anyone managed such a thing and could help? Thank you!
- 1 reply
-
- gamepad
- gamepad api
-
(and 2 more)
Tagged with: