Jump to content
  • Advertisement

Hashbrown

Member
  • Content count

    29
  • Joined

  • Last visited

Community Reputation

117 Neutral

About Hashbrown

  • Rank
    Member

Personal Information

  • Role
    DevOps
  • Interests
    Art
    Audio
    Business
    Design
    DevOps
    Programming
  1. Thanks a lot for the answer guys, greatly appreciated. I'll have to change my engine a little but that's fine, I prefer doing it right, thanks again!
  2. Oh it was you No problem, thanks again. Stepping through my games was the best solution.
  3. I've noticed in most post processing tutorials several shaders are used one after another: one for bloom, another for contrast, and so on. For example: postprocessing.quad.bind() // Effect 1 effect1.shader.bind(); postprocessing.texture.bind(); postprocessing.quad.draw(); postprocessing.texture.unbind(); effect1.shader.unbind(); // Effect 2 effect2.shader.bind(); // ...and so on postprocessing.quad.unbind() Is this good practice, how many shaders can I bind and unbind before I hit performance issues? I'm afraid I don't know what the good practices are in open/webGL regarding binding and unbinding resources. I'm guessing binding many shaders at post processing is okay since the scene has already been updated and I'm just working on a quad and texture at that moment. Or is it more optimal to put shader code in chunks and bind less frequently? I'd love to use several shaders at post though. Another example of what I'm doing at the moment: 1) Loop through GameObjects, bind its phong shader (send color, shadow, spec, normal samplers), unbind all. 2) At post: bind post processor quad, and loop/bind through different shader effects, and so on ... Thanks all!
  4. I solved it. Who ever posted an answer and deleted it was right about going through my code again. I had to step through my game, turn on and off parts of it and debug it since WebGL is all about states. Not only did I solve my issue but found a lot of areas that needed a re-write. What happened? I feel so silly, instead of using: this.gl.COLOR_BUFFER_BIT | this.gl.DEPTH_BUFFER_BIT); I had: this.gl.COLOR_BUFFER_BIT || this.gl.DEPTH_BUFFER_BIT); // Notice the OR The first frame always worked, but by the time the second one drew, that's where the depth buffer wasn't cleared. Now it's clearing and my post processing pipeline is working.
  5. I'm trying to figure out why my depth buffer is not working when using multisample FBOs. If I only render 2 passes: shadow pass and final pass...everything works nicely as you can see: ...but if I flip my post processing boolean to true, I get the following issue: From the looks of it, it's like webGL is ignoring the depth buffer. Interestingly enough, if I disable DEPTH_TEST while leaving post processing on, I get an image, only that it's understandably see through: I don't understand what I'm doing wrong. When my PostProccessor class starts, I store 2 FBOs in it: IN and OUT. In fact, this is the constructor code: // Unbind any FBOS, render buffers, or textures this.unbindFBO(); this.unbindRenderbuffer(); this.unbindTexture(); // IN FBO this._in = gl.createFramebuffer(); this.bindFBO(this.in); let colorBuffer = gl.createRenderbuffer(); gl.bindRenderbuffer(gl.RENDERBUFFER, colorBuffer); gl.renderbufferStorageMultisample(gl.RENDERBUFFER, this.samples, gl.RGBA8, this.width, this.height); gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.RENDERBUFFER, colorBuffer); let depthBuffer = gl.createRenderbuffer(); gl.bindRenderbuffer(gl.RENDERBUFFER, depthBuffer); gl.renderbufferStorageMultisample(gl.RENDERBUFFER, this.samples, gl.DEPTH_COMPONENT16, this.width, this.height); gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, depthBuffer); // Finalize IN FBO gl.drawBuffers([gl.COLOR_ATTACHMENT0]); checkFBO(); this.unbindFBO(); this.unbindRenderbuffer(); this.unbindTexture(); // NOW MAKE OUT FBO this._out = gl.createFramebuffer(); this.bindFBO(this.out); this.texture = new Texture(noImage); gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this.texture.buffer, 0); // Finalize OUT FBO gl.drawBuffers([gl.COLOR_ATTACHMENT0]); checkFBO(); this.unbindFBO(); this.unbindRenderbuffer(); this.unbindTexture(); Everything seems fine, I'm banging my head trying to figure out what I'm doing wrong Oh and texture wise, I'm creating a standard texture, this is part of the constructor: gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, this.width, this.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); I'll also include my render loop in psuedo code, just case that's helpful. It'll be on PasteBin so this post doesn't look overwhelming, it's short though, promise. You can find it here. Thanks in advance!
  6. Hashbrown

    Tips on 3D level collision

    Thanks smoker, I plan on implementing your code once I get home. I'm definitely going to have questions. I'm just now learning about level collision. Won't give up until understanding these concepts.
  7. Hashbrown

    Tips on 3D level collision

    Smoker sorry about the slightly late response. This was very useful, as I mentioned earlier it's a lot easier looking at other examples, so thanks again
  8. Hashbrown

    Tips on 3D level collision

    I love this forum. Thanks Cozzie and turanszkij, I appreciate the tips. Once I finish, I'll share what I did so other can use. Thanks again!
  9. I'm wondering what is the right way to create level collision for a very basic level like the following image (click on it for a larger version): I'm not what to search, so I'm a little confused. What I'm thinking is AABB collision tests for the cubes and walls, maybe keeping them all in arrays, and checking the array for collisions every frame. Again, not sure if that's the correct way of doing this. I'm also not sure about the platform in the middle since the character would have to go up a slope like this one: ...and stand on the platform. The floor is set at y:0 at the moment, but it might be higher or lower in different parts of the map. If anybody has links I can read to learn, or even just keywords I can use to search. I'd really appreciate it. I just don't know where to start in terms of searching. Thanks! Edit: I don't plan on using collider shapes outside of cubes and that slope in green. Making sure to keep the collision very simple. I don't think any of these level colliders are going to rotate either, so it's going to be axis aligned. Edit 2: I just found this old post from 2002 and from what I understand in one of the answers: divide the world in different cubes and each one holds a list of all the aabb colliders within that particular cube. I'm guessing in order to avoid having to walk and test so many colliders. Not sure if I'm on the right track though. Also need to figure out how to go up the slope, obb perhaps?
  10. Thanks for the help vinterberg and JJ, I really appreciate it. Between both of your explanations and some further research, the problem was solved. I'm not sure if the solution is the most the optimal, but it works for now, still need to work on jumping. I actually calculated a second model matrix, just multiplying yAxis rotation and translation. Mat4.translate(translation, this.position.x, this.position.y, this.position.z); Mat4.scale(scale, this.scale.x, this.scale.y, this.scale.z); Mat4.rotateX(rotateX, this.rotation.x); Mat4.rotateY(rotateY, this.rotation.y); Mat4.rotateZ(rotateZ, this.rotation.z); Mat4.mul(rotateXY, rotateY, rotateX); Mat4.mul(rotation, rotateXY, rotateZ); Mat4.mul(rotScale, rotation, scale); Mat4.mul(model, translation, rotScale); if (camModel) Mat4.mul(camModel, translation, rotateY); // This is what I added. ...Also calculated separate forward, right and up directional vectors with that second model matrix: Mat4.transformVec4(this.forward, FWD, model); Mat4.transformVec4(this.up, UP, model); Mat4.transformVec4(this.right, RIGHT, model); // Also added this... if (camModel) { Mat4.transformVec4(this.moveForward, FWD, camModel); Mat4.transformVec4(this.moveUp, UP, camModel); Mat4.transformVec4(this.moveRight, RIGHT, camModel); } ...and used those new moveForward, moveUp, and moveRight vectors for moving my character. I can also look around since I'm still calculating the inverse of the original model matrix. Hopefully my method is not too much overkill and I can roll with it. All I'm doing is: 1) Add one more matrix multiplication (translation * rotateY) 2) Three more matrix * vec4 multiplications (moveForward, moveUp, moveRight) Thanks again both of you. If my solution is overkill, feel free to let me know
  11. Thank you very much for the response jj, I'm afraid I'm having trouble wrapping my head around your first explanation. I'm sure you explained nicely, it's definitely me. If it's not too much trouble, would you mind posting the math you mentioned? It can be pseudo code, no problem. I tend to understand quicker with examples. Hopefully, I'm not asking for too much. Thanks again!
  12. Hopefully this is a simple question for some of you. I've managed to create a nice fly cam: ...but now I'd like to make a standard fps control. If I keep the y axis at 0, I don't fly up or down and I obviously move around at y0, but if I look down, my player slows down. Keep in mind, I'm using my own little engine btw. I'm guessing this has to do to the fact that my w,a,s,d forward vectors are calculated using the model matrix which also calculated XYZ rotation. Making a google search, I found this link, but it's an Unreal related question, and on top of that using their graphical blueprint whatever you call it. But it's pretty much the same question and (I'm guessing) possible answer. What I think I should do Should I make a completely different model matrix that ignores the X and Z axis which I can use for the player's movement? I'm a little confused in what I can do, and I can't find anything on Google that isn't THREE.js or Unity related. I'm pretty sure I have to disconnect the look controls from the movement controls. I'd like to be able to move towards where I'm looking without flying up or down, but at the same time be able to apply gravity at some point. But for now, I'd really like to solve that "look down move slow" issue. Thanks all for your support. Below I'll share some of the code I wrote for the movement. // Controls flyCam(camSpeed) { if (Game.Input.Key.rightArrow.down) { Game.camera.translateX(camSpeed); } if (Game.Input.Key.leftArrow.down) { Game.camera.translateX(-camSpeed); } if (Game.Input.Key.upArrow.down) { Game.camera.translateY(-camSpeed); } if (Game.Input.Key.downArrow.down) { Game.camera.translateY(camSpeed); } Game.camera.transform.rotation.y += Game.Input.Mouse.delta.x * (200.0 / Game.Renderer.width/2) * Game.Time.step; Game.camera.transform.rotation.x += Game.Input.Mouse.delta.y * (200.0 / Game.Renderer.height/2) * Game.Time.step; } // TranslateXYZ translateX (speed) { this.transform.position.x += this.transform.right.x * speed * Game.Time.step; this.transform.position.y += this.transform.right.y * speed * Game.Time.step; this.transform.position.z += this.transform.right.z * speed * Game.Time.step; } translateY (speed) { this.transform.position.x += this.transform.up.x * speed * Game.Time.step; this.transform.position.y += this.transform.up.y * speed * Game.Time.step; this.transform.position.z += this.transform.up.z * speed * Game.Time.step; } translateZ (speed) { this.transform.position.x += this.transform.forward.x * speed * Game.Time.step; this.transform.position.y += this.transform.forward.y * speed * Game.Time.step; this.transform.position.z += this.transform.forward.z * speed * Game.Time.step; } // Model Matrix Mat4.translate(translation, this.position.x, this.position.y, this.position.z); Mat4.scale(scale, this.scale.x, this.scale.y, this.scale.z); Mat4.rotateX(rotateX, this.rotation.x); Mat4.rotateY(rotateY, this.rotation.y); Mat4.rotateZ(rotateZ, this.rotation.z); Mat4.mul(rotateXY, rotateY, rotateX); Mat4.mul(rotation, rotateXY, rotateZ); Mat4.mul(rotScale, rotation, scale); Mat4.mul(model, translation, rotScale); // Update Direction Mat4.transformVec4(this.forward, FWD, model); Mat4.transformVec4(this.up, UP, model); Mat4.transformVec4(this.right, RIGHT, model);
  13. No problem, it's okay Maybe I should start asking my questions outside of the beginners section now. I wasn't sure what was considered beginners. I actually found this site which tells me all the features my GPU supports, but I found your link more useful. I'll try using your link as a guide and see if I figure it out, or hopefully a WebGL user can pitch in as well. Thanks again for your help Lawn, hopefully I can figure it out, or somebody can also contribute with further suggestions. If I figure it out, I'll definitely share my solution here.
  14. Hey there lawn thanks for replying, I'm pretty sure my GPU supports this feature. The tutorial is based on OpenGL, if you're interested, you can find the tutorial here, it's very nice. As far as I know (I could be wrong), I'd have to get depth texture via an extension in webGL1, but I'm using webGL2. Excuse my ignorance, but what do you mean when you say querying the caps? The capabilities of my video card? Thanks again!
  15. Hello all. I've been taking some wonderful tutorials on making water with OpenGL (I'm using WebGL2), but I'm a little confused about FBO's. I'm trying to get a depth texture attachment, but unfortunately getting the following warning: "[.Offscreen-For-WebGL-0x7fcd65022600]GL ERROR :GL_INVALID_VALUE : glTexImage2D: invalid internal_format GL_FALSE" This is what I got for gl.texImage2D: gl.texImage2D(gl.TEXTURE_2D, 0, gl.DEPTH_COMPONENT32, this.width, this.height, 0, gl.DEPTH_COMPONENT, gl.FLOAT, null); I'm using gl.DEPTH_COMPONENT32 since that's what the tutorial is using. I'm trying to get that grayish looking image that represents the depth in my scene but not sure what format to use. There's definitely something I'm doing wrong :( Btw, if I comment out "this.makeDepthTextureAttachment(gl);" I get no warnings. I've also never had trouble getting a color texture attachment, Depth texture is what I have problem with. This is my FBO implementation, thank you very much in advanced: class FBO { constructor (width, height) { const gl = Core.getRenderer().gl; this._fbo = gl.createFramebuffer(); this.bind(gl); this._width = width; this._height = height; this._depthTexture = false; this._colorTexture = false; this.makeDepthTextureAttachment(gl); this.makeColorTextureAttachment(gl); this.unbind(gl); } get fbo () { return this._fbo; } get depthTexture () { return this._depthTexture; } get colorTexture () { return this._colorTexture; } get width () { return this._width; } get height () { return this._height; } makeDepthTextureAttachment (gl) { this._depthTexture = gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, this.depthTexture); gl.texImage2D(gl.TEXTURE_2D, 0, gl.DEPTH_COMPONENT32, this.width, this.height, 0, gl.DEPTH_COMPONENT, gl.FLOAT, null); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.TEXTURE_2D, this.depthTexture, 0); } makeColorTextureAttachment (gl) { this._colorTexture = gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, this._colorTexture); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, this.width, this.height, 0, gl.RGB, gl.UNSIGNED_BYTE, null); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this._colorTexture, 0); } bindColorTexture () { const gl = Core.getRenderer().gl; gl.bindTexture(gl.TEXTURE_2D, this._colorTexture); } bind (gl) { gl.bindFramebuffer(gl.FRAMEBUFFER, this.fbo); } unbind(gl) { gl.bindFramebuffer(gl.FRAMEBUFFER, null); } }
  • Advertisement
×

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

Participate in the game development conversation and more when you create an account on GameDev.net!

Sign me up!