Search the Community

Showing results for tags 'webgl2'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • 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

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Website URL


Twitter


Skype


Location


Interests

Found 8 results

  1. Hello ! As WebGL2 comes with new texture formats, I decided to play a bit with them, and it seems to work well in pure WebGL2: https://playground.babylonjs.com/#RBQYSP (If it prints red, that means the RGB texture did work 🙂) I saw texture format has been added to createRenderTargetTexture function so I wanted to try it out. But whatever I do, I never achieve to create a RGB Render Target Texture. 😥 This code works to create a RGBA RenderTarget: https://playground.babylonjs.com/#RBQYSP#5 This code fails to create a RGB RenderTarget: https://playground.babylonjs.com/#RBQYSP#6 Framebuffer is incomplete. I already pulled the last version of BJS and added gl.pixelStorei(gl.UNPACK_ALIGNMENT, 1) everywhere but it doesn't help much. I'm struggling with this, I don't understand where something is different from the pure WebGL2 version. I verified InternalSizedFormat, InternalFormat and TextureType and they're OK. If anybody has an idea... Thanks in advance 😊 PeapBoy
  2. Hi, found issue with PBR on android device, that have webgl 2.0 support, probably its chrome issue but thought to post it here as well. Device: Galaxy S8+ OS: Android 7.0 Chrome: 65.0.3325.109 Babylon: v3.2.0-rc.2 GPU: {vendor: "ARM", renderer: "Mali-G71", version: "WebGL 2.0 (OpenGL ES 3.0 Chromium)"} How to reproduce: any pbr playground will go, as all of them show black meshes instead of pbr materials. PG It fails without any error or even warning in console. Works fine in native browser (Internet) as it has webgl 1.0: Internet: 6.4.10.5 GPU: {vendor: "ARM", renderer: "Mali-G71", version: "WebGL 1.0 (OpenGL ES 2.0 Chromium)"}
  3. babbleon

    WebGL2 shadow fallback - bug?

    Hello, As per the docs, the WebGL2 shadows are meant to fall back to Poisson Sampling on non compatible devices. However, Chrome 65.0.3325.109 on Android (Samsung S6 edge+) only display a red cube on this PG without ground and no shadows. That said, Chrome >= v. 64 should support WebGL2. and checking on another Android phone, with Chrome 64 it shows shadows. Is this a bug?
  4. The best way to learn is to practice as much as possible. Share your examples here. What browsers WebGL is supported, you can see here: WebGL 1.0: https://caniuse.com/#feat=webgl WebGL 2.0: https://caniuse.com/#feat=webgl2 A brief description of what WebGL is, and references to the specifications: https://www.khronos.org/webgl/ Tutorials: WebGL 1.0 Fundamentals WebGL 2.0 Fundamentals This book is about WebGL 1.0: WebGL Programming Guide Source Code for the book: examples.zip Source Code for the book on JSFiddle: Chapter 02. Your First Step with WebGL ch02/HelloCanvas: https://jsfiddle.net/8Observer8/2gky294r/ ch02/HelloPoint1: https://jsfiddle.net/8Observer8/cc72u1u5/ ch02/HelloPoint2: https://jsfiddle.net/8Observer8/uxw657ud/ ch02/ClickedPoints: https://jsfiddle.net/8Observer8/xf4fnc0o/ ch02/ColoredPoints: https://jsfiddle.net/8Observer8/gkkmnpga/ Chapter 03. Drawing and Transforming Triangles ch03/MultiPoint: https://jsfiddle.net/8Observer8/cty1120m/ ch03/HelloTriangle: https://jsfiddle.net/8Observer8/wk4sksnw/ ch03/HelloQuad: https://jsfiddle.net/8Observer8/g4ctyk7w/ ch03/HelloQuad_FAN: https://jsfiddle.net/8Observer8/v119e8o6/ ch03/HelloTriangle_LINES: https://jsfiddle.net/8Observer8/wwrkaxcf/ ch03/HelloTriangle_LINE_STRIP: https://jsfiddle.net/8Observer8/3ggjz4rm/ ch03/HelloTriangle_LINE_LOOP: https://jsfiddle.net/8Observer8/7vcyquro/ ch03/TranslatedTriangle: https://jsfiddle.net/8Observer8/0dp4xvyt/ ch03/RotatedTriangle: https://jsfiddle.net/8Observer8/gh9s6szm/ ch03/RotatedTriangle_Matrix: https://jsfiddle.net/8Observer8/7ze7pgpu/ ch03/ScaledTriangle_Matrix: https://jsfiddle.net/8Observer8/6xzoe63s/ Chapter 04. More Transformations and Basic Animation ch04/RotatedTriangle_Matrix4: https://jsfiddle.net/8Observer8/t4y7783v/ ch04/RotatedTranslatedTriangle: https://jsfiddle.net/8Observer8/b5yfxojp/ ch04/TranslatedRotatedTriangle: https://jsfiddle.net/8Observer8/o8voebc9/ ch04/RotatingTriangle: https://jsfiddle.net/8Observer8/x9j5vdk7/ ch04/RotatingTranslatedTriangle: https://jsfiddle.net/8Observer8/rkrv0322/ ch04/RotatingTriangle_withButtons: https://jsfiddle.net/8Observer8/wzoLmdzd/ Chapter 05. Using Colors and Texture Images ch05/MultiAttributeSize: https://jsfiddle.net/8Observer8/dsfgezbj/ ch05/MultiAttributeSize_Interleaved: https://jsfiddle.net/8Observer8/bshwnden/ ch05/MultiAttributeColor: https://jsfiddle.net/8Observer8/bveykLdf/ ch05/ColoredTriangle: https://jsfiddle.net/8Observer8/mrkpms7d/ ch05/HelloTriangle_FragCoord: https://jsfiddle.net/8Observer8/ft33yo9s/ ch05/TexturedQuad: https://jsfiddle.net/8Observer8/o3vakb3h/ ch05/TexturedQuad_Repeat: https://jsfiddle.net/8Observer8/2s7q68cc/ ch05/TexturedQuad_Clamp_Mirror: https://jsfiddle.net/8Observer8/mqu0wwma/ ch05/MultiTexture: https://jsfiddle.net/8Observer8/ztew5u0p/ Chapter 07. Toward the 3D World ch07/LookAtTriangles: https://jsfiddle.net/8Observer8/6ab11xpg/ ch07/LookAtRotatedTriangles: https://jsfiddle.net/8Observer8/944dd57h/ ch07/LookAtRotatedTriangles_modelViewMatrix: https://jsfiddle.net/8Observer8/e5t6gj1w/ ch07/LookAtTrianglesWithKeys: https://jsfiddle.net/8Observer8/38ewegg2/ ch07/OrthoView: https://jsfiddle.net/8Observer8/zebt4u7t/ ch07/LookAtTrianglesWithKey_ViewVolume: https://jsfiddle.net/8Observer8/vLcejtm1/ ch07/OrthoView_halfSize: https://jsfiddle.net/8Observer8/uvcd9h4p/ ch07/OrthoView_halfWidth: https://jsfiddle.net/8Observer8/vepodfb8/ ch07/PerspectiveView: https://jsfiddle.net/8Observer8/640pv8qe/ ch07/PerspectiveView_mvp: https://jsfiddle.net/8Observer8/w8yh4Lmj/ ch07/PerspectiveView_mvpMatrix: https://jsfiddle.net/8Observer8/hhwnx145/ ch07/DepthBuffer: https://jsfiddle.net/8Observer8/hyumw026/ ch07/Zfighting: https://jsfiddle.net/8Observer8/foc0b45t/ ch07/HelloCube: https://jsfiddle.net/8Observer8/rkpn5tyw/ ch07/ColoredCube: https://jsfiddle.net/8Observer8/80x8cyom/ ch07/ColoredCube_singleColor: https://jsfiddle.net/8Observer8/pespackq/ Chapter 08. Lighting Objects ch08/LightedCube: https://jsfiddle.net/8Observer8/4jchxo84/ ch08/LightedCube_animation: https://jsfiddle.net/8Observer8/ekw3osj7/ ch08/LightedCube_ambient: https://jsfiddle.net/8Observer8/y6qwnfe1/ ch08/LightedTranslatedRotatedCube: https://jsfiddle.net/8Observer8/pa88ujjg/ ch08/PointLightedCube: https://jsfiddle.net/8Observer8/vuq118ue/ ch08/PointLightedCube_animation: https://jsfiddle.net/8Observer8/5bj39hb8/ ch08/PointLightedSphere: https://jsfiddle.net/8Observer8/edz9Lz8f/ ch08/PointLightedSphere_perFragment: https://jsfiddle.net/8Observer8/qzwyow4j/ ch08/PointLightedCube_perFragment: https://jsfiddle.net/8Observer8/8t1umamf/ ch08/LightedCube_perFragment: https://jsfiddle.net/8Observer8/471y2t84/ Chapter 09. Hierarchical Objects ch09/JointModel: https://jsfiddle.net/8Observer8/vqse5egz/ ch09/MultiJointModel: https://jsfiddle.net/8Observer8/sL53wkn3/ ch09/MultiJointModel_segment: https://jsfiddle.net/8Observer8/ygvk7odv/ Chapter 10. Advanced Techniques ch10/RotateObject: https://jsfiddle.net/8Observer8/1f5hLmff/ ch10/PickObject: https://jsfiddle.net/8Observer8/owue624n/ ch10/PickFace: https://jsfiddle.net/8Observer8/edvw6z90/ ch10/HUD: https://jsfiddle.net/8Observer8/fLxxxs35/ ch10/3DoverWeb: https://jsfiddle.net/8Observer8/tbowcc16/ ch10/Fog: https://jsfiddle.net/8Observer8/6yf9L399/ ch10/Fog_w: https://jsfiddle.net/8Observer8/8aLvthc3/ ch10/RoundedPoints: https://jsfiddle.net/8Observer8/sjs5kmn4/ ch10/LookAtBlendedTriangles: https://jsfiddle.net/8Observer8/apoz294n/ ch10/BlendedCube: https://jsfiddle.net/8Observer8/xsrL2fs5/ ch10/ProgramObject: https://jsfiddle.net/8Observer8/jnd0j6w0/ ch10/FramebufferObject: https://jsfiddle.net/8Observer8/vaLq6d66/ ch10/Shadow: https://jsfiddle.net/8Observer8/jsnfwcae/ ch10/Shadow_highp: https://jsfiddle.net/8Observer8/brjzr00n/ ch10/Shadow_highp_sphere: https://jsfiddle.net/8Observer8/4fmyLy5f/ ch10/OBJViewer: https://jsfiddle.net/8Observer8/pws1x7uv/ ch10/RotatingTriangle_contextLost: https://jsfiddle.net/8Observer8/vs01s8Lz/ Gifts gifts/Particle: https://jsfiddle.net/8Observer8/Ltzt31vk/ gifts/Printf: https://jsfiddle.net/8Observer8/qsw7jtec/ gifts/SpecularCube: https://jsfiddle.net/8Observer8/z4xj9rbv/ gifts/TextTexture: https://jsfiddle.net/8Observer8/qt7q2kuf/ gifts/ThreeDUI: https://jsfiddle.net/8Observer8/zdw1f2st/ gifts/Wave: https://jsfiddle.net/8Observer8/eL9odthz/ gifts/WorldCoordinateSystem: https://jsfiddle.net/8Observer8/6utj3hnk/ appendix/CoordinateSystem: https://jsfiddle.net/8Observer8/dzz056jt/ Appendix appendix/CoordinateSystem_viewVolume: https://jsfiddle.net/8Observer8/apxLww1q/ appendix/LoadShaderFromFiles: https://jsfiddle.net/8Observer8/wdn9ubhj/
  5. One of the killer new features in WebGL2 is the "sampler2DArray" uniform type. Apparently, we can use it to: This would be a game changer for a project I'm working on, as it uses a shader which needs many textures as uniforms and we're hitting the limit regularly. Any thoughts on implementing this feature?
  6. babdev

    WebGL 2 Support

    Hello BJS devs, What are BabylonJS's plans for WebGL 2 support? Namely, how do you guys envision supporting webgl 2 and backwards compatibility? I'm not super experienced with game development but I've been playing around with a toy project and I need to use binary 3D textures. I've made some changes to BJS to support 3D textures but I'm not familiar enough with the codebase to think this is the correct way of doing this. https://github.com/BabylonJS/Babylon.js/compare/master...wongwill86:texture3d?expand=1 Any feedback is much appreciated and I would be happy to make changes / open a PR if this seems like the correct approach. Also, if there is already a branch that supports this correctly, that would be even better Thanks!
  7. If you want to start testing WebGL 2 in TypeScript I have already written a definition file right here that you can use Reason I wrote this is because I couldn't find reliable ones on Internet (they were very obsolete) and currently TypeScript doesn't support WebGL 2 Edit: In order to use WebGL 2 API in code you need to write: const CANVAS: HTMLCanvasElement = document.getElementById("myCanvas") as HTMLCanvasElement; // get canvas element let GL: WebGLRenderingContext & WebGL2RenderingContext = CANVAS.getContext("webgl2") as any; // get webgl2 context
  8. chiguireitor

    [WebGL2] [WIP] Ganymede Gate DX

    Ganymede Gate DX (DX as in Deluxe, the game i'm developing has an open source, ascii based version) Ganymede Gate is a Sci-Fi traditional roguelike. It will have a quirky story not like any other sci-fi games you find out there, but i will not reveal much as not to spoil it. You're sent to the jovian moon in search of answers to a human base where some mysterious things have been happening, as it recently went silent. The deluxe version i'm developing includes tiles support and will, eventually, have steam achievements, etc. Itch.io ascii version is available here. You can play online (although it is pretty slow) on ganymedegate.com:. The ascii game is playable, although on a very alpha state, and the tiles version is just being developed atm. Here are some screenies of both of them. (this is a lot of AIs duking it out without lighting) (Some of the map generators currently implemented) And here's some of the WebGL2 UI goodness (with some shaders active, Curvature, Scanlines, Gamma and Tinting) (Yeah, roguelikes have scary keybinding sheets) (Inspired by SNES9x and ZSNES, i'm making shaders optional, modifiable and user generated, so anyone can put their favorite shader in) UI work numbs the mind, wish me luck