• Content count

  • Joined

  • Last visited

About webGLmmk

  • Rank
    Advanced Member

Profile Information

  • Gender
    Not Telling
  • Interests

Recent Profile Visitors

1,746 profile views
  1. Older thread, but this is how I used the Sound class: Sound.play(), sound.pause(), sound.stop(). http://www.babylonjs-playground.com/#KZQGPA#1 Does what it needs to. Next step is to try to put the pause on the same button as the play..i think i've got that worked out...and design of course @MackeyK24 @davrous @Nabroski
  2. Ok so I guess I have to get back on the Node train again, and related DB's. Pretty comfortable with all the OOP, but databases were always like, "I'll get to that when I need to get to that". Apparently that's where I'm getting to pretty soon. I think I did something with PHP/mySQL once lol. Who hasn't. Was never particularly anxious about the ability to figure it out when I needed to use it. You can cripple your productivity worrying about all the things there IS to learn..its better to just learn what you need when you need it. I came across something called "Nodegame" that seems pretty promising. http://nodegame.org/. Obviously don't want a stack that's meant for standard webdev. Enough gamedevs doing this now that there hopefully will be something easier for me to jump into. [Here's the deal guys, gamedevs...you do all the hard work, and then I tweet about how awesome you are. thanks for the framework. Open source is the best.] Yeah, any game idea I want to develop that's not a simple arcade style game will need to store it's objects in a DB. That I expected, though not as immediately. This star scene was never really meant to be a game, but it's probably a good way to build my skills. I like the idea of using particles as distant stars. They'd need static positioning in this scene though...they're not going to emit from anything. maybe SolidParticleSystem. No worries, I don't take it all as gospel ...you do have a way of helping me think of things I haven't considered, so the brainstorming around to different possibilities has it's value.
  3. OOOk... I got a lot from this, thanks. Lots of stuff I didin't think of. In the space scene, they're supposed to have movement and camera control over 3 axes. (eye roll..skipping directly to the most difficult concept is my specialty). Instead of relocating parent-child groups, simple create new ones and dispose...IF the player goes back a previous direction, they either see a different randomly generated group of elements -- or else I have the object stored in a global array and figure out a way to reference the correct index...Haven't thought that out yet...version 3.0 I"m thinking. As few navigation options as possible for any other idea though. As far as the view when the user is in reverse...or moving forward for that matter...zones are a good idea...may not be necessary depending on how much of the view the close objects are taking up. I mean the webGL canvas already shows diminishing perspective. The current element group would be big enough to occupy the attention of the player, and new zones would be created far enough before the edge of the current zone is reached. That would still be saving GPU power. The problem with the scene I created is that the stars have massive particle systems, and I want ALL the stars to have particle systems, and that is way too intensive. There are the "really" far away stars that I could use a skybox or skydomes for...Never really loved how that turned out when I tried it before, but I just need the right texture. In that case, navigation limits could be set (I assume?). What If I have a rubix cube layout of star zones. Multiple array of grouped elements. Player is always in the very center. As soon as I reach one of the outside squares, the far column disappears and a new one appears on the side I'm approaching. Piece of cake Another thing I thought of, is increasing the size of objects as you approach them. A size gradient, with elements gradually smaller the farther they are away, and they increase as you move closer. To simulate a greater distance of objects, without increasing the number of meshes over a broader area. Feels like I'm missing something obvious there... The space concept is pretty forgiving though, because there are lots of dead zones in space. Which reminds me...fog wouldn't work in this scene, because it's space I mean it's a flipping non-photoreal, totally fantasy, webGL render, lets get over myself So does LOD stand for Level of Detail? Had to google that but I still don't know what it really refers to in terms of 3D content. Basically like...the closer the objects, the greater the subdivision/high-poly? Need to look back through Babylon docs again and look through camera classes and location stuff...navigation, control, etc. It's been too long, too too long.
  4. I'm sorry, I don't really have any code examples, since this is totally new to me. I want to start creating all my babylon scenes with procedurally generated content - I mean elements, not just textures. For example, this space scene with randomly distributed stars.. http://www.babylonjs-playground.com/#1PWCZ8#2 I can render quite a bit less if i just relocate sections as the camera moves forward. I'd rather start with another scene though, something simpler, like a "ground", moving tiles based on position of the camera - in fact putting it that way makes it seem even easier...(its never as easy as it seems) I've started to read up on techniques, and I'm sure I can figure it out, but I thought I'd just shout out in case I've missed any nice examples in my forum searches. Most of what comes up is related to textures. I'm not particularly concerned about materials right now, just environments and elements that are generated with movement. What I DO understand is that its a wide open field and how you procedurally generate depends entirely on what you are trying to create. Been on hiatus for a few months, too busy but I'M BACK B
  5. Looked through the questions and docs, and I think what I want is a not quite as complex as that. I"m fine with the basic loading screen, and setting the text below it... http://www.babylonjs-playground.com/#1PWCZ8#1 So the scene renders first and THEN shows the loading screen, then the loading screen doesn't go away. I tried putting in something like... setTimeout(function () { engine.hideLoadingUI(); }, 16); // or 50); but then it didn't show at all...the playground samples I've seen are using an imported mesh and I'm not really doing that.
  6. Ok i was just about to post when I found this topic... @Nockawa I'm having trouble making sense of what the margins are doing between these Canvas2D buttons. http://www.babylonjs-playground.com/#LYEU3#15 Right now I'm trying to vertically space the buttons in grpCenter: U,F,B,D to have a margin of 5 in between, so they're closer. Cam-U and Cam-D i want a bit further away from the center buttons I set marginTop: 5 on F,B, & D. But its putting about 10 in between, if I were to change it to 1 or 2, it still looks like its about 10, like they're all being stretched out or something **edit** ok so its a little better and I'm not sure how. It changed when I adjusted the downCamButton button margins. http://www.babylonjs-playground.com/#LYEU3#16 Now I can't seem to increase the top margin though, and if i put a buttom margin on downButton, it pushes it up into one above it. Anyway I'm going to settle for what I have...thought I would throw this out there because it's a little tough to lay things out #wip
  7. Ever the pragmatic: With CG, we're simulating. So you have to basically decide what specifics to simulate. Bubbles exist in an atmosphere WITH gravity..they simply have next to zero mass, and are easily carried along by air movement. (Bubblemaking 101 at community college...Can bubbles exist in the vacuum of space? I'm going with no. Got no clue what I'm talking about actually.) So in choosing to simulate the MOVEMENT of bubbles: using the babylon.js physics engine, you create a sphere ...so you can either set the gravity really really really low, or at zero ..and apply impulses. Collisions with varying objects either make it burst, or bounce...with another bubble stick together or get bigger....hey, good idea, there's a lot of potential with this theme. It reminds me of a game I played on steam... Osmos: http://store.steampowered.com/app/29180/?snr=1_7_7_230_150_7 Have you used the physics in babylon yet? I'll let you start that off either way. As far as surface area relative to volume...I dont think thats really a necessary thing to factor in a bubble simulation, or possible, or will even be noticed by user/audience/players. The APPEARANCE of the film is what is simulated..see DB above...obviously material with low alpha/high transparency..but those swirling colors...that does seem like a task...pretty cool one...If someone could create that kind of dynamic movement, let me know, because I'll use them for my stars. or lava flow. I'm thinking alternating gradients, based on some kind of moving black and white map...thats heavy duty...haven't done any shader stuff...yet I mean the simplest cheap out way for the bubble material would be a mostly transparent and lightly emissive grayish-bluish color...but close up, bubbles aren't bubbles without the swirling soapy rainbow of colors So then you decide, what is the point. Is this a game? A slightly interactive animation? Are you seeing only a few bubbles up close, or lots of bubbles from further away? Finishing my ramble with the idea that purpose and concept must come first.
  8. OK. I'm not sure what you're objective for the scene is, but as far as SEEING all of the skyboxes: http://www.babylonjs-playground.com/#FXYUA#3 I adjusted the x positions so they would all line up 1-9. I think you just had some on top of each other in their position. (also adjusted the camera position so you can see them while you're figuring it out... skybox.position.x = -80; I fixed all the names to properly number them "skybox3, skybox4, skybox5," etc. In your copying and pasting, you had some repeating names. That way you can see them when you click the button that says "debug" layer. (for some reason i had to click the button twice for the menus to show.). Once you do that, check "clickable labels", and "meshes tree", and you can see all of them labelled side by side. var skybox2 = BABYLON.Mesh.CreateBox("skyBox2", 20, scene); Not really seeing anything else interactive here, so I"m hoping that helps...however you're going to move them around, you can use the labels in the debug layer to see where they are...
  9. No worries, Just wasn't sure if you knew how to get a blender export in the playground. Glad you're getting it figured out, thats the best feeling. Will definitely do that. That WAS the plan, I've just been getting distracted. Going to add a bit more about getting CORS free images, with examples, then I'll submit it.
  10. Hi Cris, Can you post a playground scene? i know you're importing a scene... (from blender maybe?)...but if you have the exported file on github, you can easily use the raw github url to import it into the playground.. http://www.babylonjs-playground.com/#1UQADD#0 wrote a brief tutorial on getting your assets to show in the playground https://github.com/3dwebgs/miscWebGLpages/blob/master/babylondoc.md Even if you don't use git, you can still create a github account, its convenient for so many things. The best way you can help yourself here is to get some practice getting your code into a playground scene, so you can demonstrate your question to the forum. It helps everyone else help you by seeing your code.
  11. I was looking at this myself, and I'm still trying to understand how this dat.GUI figures in...only place i can find where it came from is in this procedural textures library.. https://github.com/BabylonJS/Babylon.js/blob/125af00fbe0c80dc0b12f05af21afd484cc42b9a/proceduralTexturesLibrary/test/refs/dat.gui.min.js Basically, the colored rectangles are produced using Canvas2D, but the stack panel is not, its using this other dat-gui library... (technical debt I think. Doesn't exist yet just using Canvas2D.? someone correct me if I'm wrong) To adjust the stack, we'd have to understand that "dat" interface...and I'm not sure I want to. Aware that's not overly helpful - clarifying the questions and the needs involved is always a good thing tho. These may be features that are still forthcoming I can show you something I just put together... http://www.babylonjs-playground.com/#LYEU3#8 You'll notice that within the lengthy "createButtonControls" function that comes after CreateScene, I have a main group, with child groups, such as this: var grpLeft = new BABYLON.Group2D( { parent: grpMain, id: "grpLeft", size: new BABYLON.Size(75, 200), layoutEngine:"VerticalStackPanel" } ); This "subgroup" is in turn parent to rectangles that are vertically stacked thanks to "layoutEngine:"VerticalStackPanel" I'm not sure what kind of GUI elements you need for whatever you are designing...but you can make things stack vertically this way. As far as centering, I'm still not sure myself how to get groups to center, with the marginAlignment...didn't have success with that....yet
  12. Hey there @Nockawa. This is a slightly older thread but my question is exactly relating. In answer to why its important to have the canvas2d responsiviely resized: I created a set of camera movement controls. Here is the playground scene: http://www.babylonjs-playground.com/#LYEU3#8 But a live page will illustrate it a bit better: http://3dwebgs.github.io/miscWebGLpages/starfield.html There's a set of controls on the left, which translate the camera, and a set on the right which adjust rotation. IF you resize the window from the right hand side, it doesn't resize itself. This is pretty important for this scene idea because i designed this to be viewed on smartphones, ...if you start in landscape, then go back to portrait, you can't see the right side controls anymore. IF you start out in portrait, then move to landscape, it'll be too far over to the left. Putting everything on the left disrupts my dual-thumb design.... I have one main group parented to other groups, but the right size of the canvas2d itself isn't automatically responsive. Canvas2D is amazing, and it was a huge piece missing in being able to complete actual games and interactive scenes with Babylon, you're documentation is great as well...without being able to make the right side of the canvas2d automatically responsive though, its going to limit my design quite a bit when you consider mobile use, and alternating landscape/portrait. I'm trying to figure out what @vsh91wrote above..also, @vsh91 did that end up working out the way you needed it?
  13. Excellent...I do recall having seen something about this in previous threads I've read, I just didn't connect why you'd need it. So its actually making the mesh the parent to the camera: camera.parent = thing; thing.visibility = 0; I almost thought the translate buttons weren't working...until I realized I just wasn't seeing the movement because it was too small...increased the posStep and its fine! http://www.babylonjs-playground.com/#LYEU3#8 I swear, I gotta watch the whole "scale/view" thing in these scenes...Like too much lighting, movement too small to notice...where it's not the code thats the problem but the way it looks...I bet a good chunk of questions are coming down to things like that...going on my list of things to watch for along with scope. Good idea with the physics engine and impulses. I can have it emit particles as the camera spins around making people dizzy...like WALL-E. *edit* VR anyone? I want to get some randomized planets going so need to create a constructor that picks one of a few different images, flips it in a random direction, then applies it as a texture...although perhaps its time to look into whatever "procedural generation" is now. Whoa so whats with the matrix thing? gnarly...Saving that for another day... nice work
  14. Ok before I plunge into some crazy hair-brained attempt at a solution, I need to ask if there's an easier way to accomplish this. I created a set of camera/movement controls using Canvas 2D buttons. Look pretty good I think. Looks aren't everything. The set on the left adjusts the POSITION of the camera along 3 axes. The set of buttons on the right adjusts the ROTATION of the camera. http://www.babylonjs-playground.com/#LYEU3#2 They don't work together at all. If i rotate the camera, then want to move forward in that direction, the position controls on the left move me along the original axes...Its like Im looking out the side window of a car thats moving forward. I want to be able to adjust the camera, then have a forward/backward movement action based on where the camera is pointing. The way it works when you are using keyboard/mouse. Except the buttons are to ensure all touchscreen users can adjust view/movement. I'm going to create more practical scenes with these controls. position.x/y/z and cameraDirection.x/y/z both do the same thing. I guess its obvious...the current button listeners are based on the static X/Y/Z axes of the scene. How do I get the camera to move according to the camera rotation? Or is my entire architecture here wrong... You need to be able to swivel the camera along X and Y... And then as long as I had forward and backwards, I could get rid of the other position buttons and have just one group of buttons. But I have to be able to do the forwards/backwards correctly first. I was hoping someone would see something I dont, or offer a new perspective #pun ...I've looked through FreeCamera, TargetCamera, and Camera classes... Confused by inputs Manager still...not at that level I don't think, unless at some point in the future someone could provide a more indepth non-typescripty breakdown :-D I'm sure there are better ways to set up another Virtual Joystick. But I like the idea of having button control options...like a cockpit simulation or something... Relevant code starts at line 333 in the Playground scene: forwardButton.pointerEventObservable.add(function (d, s) { camera.position.z += 20; //camera.cameraDirection.z += 20; }, BABYLON.PrimitivePointerInfo.PointerUp); backButton.pointerEventObservable.add(function (d, s) { camera.position.z -= 20; }, BABYLON.PrimitivePointerInfo.PointerUp);