Search the Community

Showing results for tags 'webgl'.



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

Found 426 results

  1. We are seeing very unusual performance on a vizio smart tv platform. Pixi finds WebGL and so does HTML5Test. However, a simple test based on bunnymark shows 14fps + video blanking between each frame. When we switch to the Canvas2D renderer, we see 30fps and smooth animation, no blanking. Has anyone played with the vizio? They do have a custom SOC (2 core, 4 gpu) which leads me to suspect there is some quirkyness in their webgl implementation. We also ran a standard bunnymark with similar bad webgl results.
  2. I downloaded 16 lessons to learn WebGL programming of this WebGL tutorial from GitHub, the first four lessons are fine and in the canvas HTML5 element I see what I should see, but in lessons 5 to 13, the canvas is entirely black and I don't see any colorful shape on it. In lesson 14, I only see in the center of the canvas the white text "Loading world...", the canvas in lesson 15 is again entirely black and in the last lesson number 16, I do see in the canvas a moving and turning white shaded box from left to right during few seconds and then it disappears and after that the canvas is entirely black again. According to his/her WebGL tutorial, the canvas in each lesson should show me nice colorful shaded and textured 3D shapes transforming in real time on the canvas, not everything black, but this is not happening for me. Why? I am using the latest version of Google Chrome internet browser. What can possibly cause this? In addition to the 16 lessons, there are also 3 examples, the first two examples are fine, i.e. in the canvas I see what I should see, but in the third example the canvas is entirely black again and I guess that this should not be happening.
  3. VERGE3D 2.3 FOR 3DS MAX RELEASED

    It’s been almost a month since the previous release and here we are again with an incredible amount of new functionality and the most advanced demo we ever made with Verge3D. In this version you’ll find: HTML puzzles for mixing web page elements and 3D objects without coding, basic support for V-Ray materials, the highly efficient LZMA compression for glTF assets that saves 6x of average file size, several new Puzzles and support for 3ds Max 2019. Link to the Full Article!
  4. Look at this steampunk puzzle game made using Verge3d engine and Webflow design tool! This audio-visual experience was created to showcase various Verge3D features and to demonstrate its unlimited capabilities in integrating with different DCC tools to allow for a complete code-less workflow. No single line of code was used to develop this web application! Software used: Verge3D, Blender, 3ds Max, Substance Painter, Webflow, GIMP and Inkscape. Link to the Full Application
  5. new addition level 42
  6. We are glad to present a maintenance release of the Blender version of Verge3D – yet it contains quite a large set of new functionality. Among the most exciting features are the optimized Facebook export, support for custom fonts, extremely efficient asset compression using the LZMA algorithm, lamp energy animation and almost 3 dozen of new puzzles! Read the full article here!
  7. Hi all, I know this issue maybe repeated and seems to be very common but I searched first and did not find anything concrete. I am doing some test and playing around with pixijs. I created an stage 320x180 and I am rendering an sprite of 27x27 in a autodetected renderer (WEBGL always is selected) I am in a macos retina resolution (devicepixerate 4) the problem is I can not achieve having the sprite pixelated even setting antialias false in the renderer. I tested the same without pixijs but native canvas 2d context using drawImage and I could get what I wanted using some hacks like after every drawImage set context.imagesmoothingenabled to false and I have CSS file to canvas image-rendering: pixelated. With those I am having exactly what I want, but of course I would like to obtain the same using pixijs and WEBGL. Is it possible? Disable at all antialias in a WEBGL context? How we can deal with this to render pixel arts properly? example using native canvas 2d context drawImage example using PixiJS webgl renderer Cheers.
  8. function getDeltaTime() { return scene.getLastFrameDuration() / 1000; } How can I get same function with EngineInstrumentation? I am playing around instrumentation. Can any body help me getDeltaTime? getLastFrameDuration is not working anymore. Which counter can get me solve getDeltaTime like code above? Any help hint? http://doc.babylonjs.com/how_to/optimizing_your_scene#instrumentation function instrumentFun() { //console.log(instrumentation.gpuFrameTimeCounter.current); //console.log(instrumentation.gpuFrameTimeCounter.average); //console.log(instrumentation.gpuFrameTimeCounter.average); console.log( "current frame time (GPU): " + (instrumentation.gpuFrameTimeCounter.current * 0.000001).toFixed(2) + "ms" ); console.log( "average frame time (GPU): " + (instrumentation.gpuFrameTimeCounter.average * 0.000001).toFixed(2) + "ms" ); console.log( "total shader compilation time: " + (instrumentation.shaderCompilationTimeCounter.total).toFixed(2) + "ms" ); console.log( "average shader compilation time: " + (instrumentation.shaderCompilationTimeCounter.average).toFixed(2) + "ms" ); console.log( "compiler shaders count: " + instrumentation.shaderCompilationTimeCounter.count ); } I am useing chrome (with debian) And I get "current frame time (GPU)" and "average frame time (GPU)" 0. I always get current frame time (GPU): 0.00ms average frame time (GPU): 0.00ms Should I get also CPU time anyhow? Should I get also CPU frame time? Can anybody help me code getDeltaTime function with instrumentations counters? I test chrome with http://webglreport.com/ and I get WebGL 1 Platform: Linux x86_64 Browser User Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.162 Safari/537.36 Context Name: webgl GL Version: WebGL 1.0 (OpenGL ES 2.0 Chromium) Shading Language Version: WebGL GLSL ES 1.0 (OpenGL ES GLSL ES 1.0 Chromium) Vendor: WebKit Renderer: WebKit WebGL Unmasked Vendor: Intel Open Source Technology Center Unmasked Renderer: Mesa DRI Intel(R) Sandybridge Desktop Antialiasing: Available ANGLE: No Major Performance Caveat: No Vertex Shader Max Vertex Attributes: 16 Max Vertex Uniform Vectors: 4096 Max Vertex Texture Image Units: 16 Max Varying Vectors: 32 Best float precision: [-2127, 2127] (23) Transform Feedback Coming in WebGL 2 Rasterizer Aliased Line Width Range: [1, 7.375] Aliased Point Size Range: [1, 255] Fragment Shader Max Fragment Uniform Vectors: 4096 Max Texture Image Units: 16 float/int precision: highp/highp Best float precision: [-2127, 2127] (23) Framebuffer Max Color Buffers: 8 RGBA Bits: [8, 8, 8, 8] Depth / Stencil Bits: [24, 8] Max Render Buffer Size: 8192 Max Viewport Dimensions: [8192, 8192] Textures Max Texture Size: 8192 Max Cube Map Texture Size: 8192 Max Combined Texture Image Units: 48 Max Anisotropy: 16 Uniform Buffers Coming in WebGL 2 Supported Extensions:
  9. Zorelit.io space shooter

    It's our first HTML5 multiplayer game. "Zorelit" is a ukrainian word for star ship. It's an example, what's happening, when a developer with C++-damaged brain starts to work with web. We don't have development blog yet, but here is YouTube channel of my friend who did 3D modeling for this game: https://www.youtube.com/channel/UCnBdtM0blIctiRZ6GJgKtng
  10. Live demo HERE! We are excited to announce the first significant update since the 3ds Max version of Verge3D was originally released last month. This update includes important graphics developments, such as the reworked physical material system, the support for edited normals and smoothing groups, shadows and transparency, adds even more puzzles to help your code-less scripting workflow, and fixes many issues reported by early adopters. Read the full list of new features in this acticle!
  11. In Phaser 2, there was a simple parameter you could set to disable antialiasing/smoothing, but i cannot disable it in Phaser 3. I assumed it should be in the config object like this, but it did not work: const config = { width: window.innerWidth, height: window.innerHeight, parent: 'canvas', type: Phaser.AUTO, physics: { default: 'arcade', arcade: { gravity: {y: 0}, debug: true } }, scene: [ Preloader, Game ], antialias: false }; const game = new Phaser.Game(config); Is there another way to disable it? I found "game.config.antialias" in the phaser.js file, but i tried with "false" and "0", nothing worked. I also found it in the WebGLRenderer.js file and it looks like it should be a boolean - but still, it did not work. I tested it with <canvaselement>.getContext('webgl').getContextAttributes().antialias and the value is always true.
  12. Added new level - Level 40
  13. Hello there! I basically just want to present my personal game project and to collect some feedback and ideas. The game is currently in the alpha phase and there might be bugs and problems but I feel confident enough to show it to the public. The game is called "Connect 3D" and it is a free to play competitive online browser game, where you have to place four tokens in a row to score. However, the game is not as easy as it sounds because the rows can be build in the three dimensional space. This GIF shows a local game session but the game can also be played online. You just have to send the link of the session to one of your friends. Currently you need a second person to play since there is no AI or computer enemy to play against. It works on mobile and on desktops, but you should try it on a modern device and with an up to date browser. There are known problems in Firefox on Windows and on Android. Therefore I recommend to try it in Chrome, Safari or Edge. You can give it a try for free on the website Connect 3D. The feedback is very important for me and the development. I really appreciate your feedback! I plan on implementing much more stuff if the feedback is positive. Possible next features: Personal Profiles and Statistics Level/Rank System (implies profiles) Public Games (join random people and play against them) Tournaments/Competitive Play Computer Opponent (AI) Different Game Modes and many more... Tell me your opinion and what you would enjoy the most in an upcoming version? Thank you for your help! iflow
  14. Hi, I have basic knowledge about javascript. I'm learning babylon js by myself now. and I'm trying to make a pottery maker game for fun. But I don't know how to achieve this. Can anyone give me a little clue? Thank you.
  15. Hi, I'm trying to implement the pixi-v4 filters in phaser 2 (CE Version). I'm especially interested in this one: https://github.com/pixijs/pixi-filters/tree/master/filters/zoom-blur I've noticed this example (http://phaser.io/examples/v2/filters/pixi-filter) in phaser 2 is outdated/not working (link to pixi filter is wrong). Even when i fix the link (e.g. https://github.com/photonstorm/phaser/blob/v2.6.2/filters/pixi/RGBSplitFilter.js) the filter gives an error because pixi is not included. So I'm wondering what is the right method to do it. I guess the main questions here are: is pixi-v4 filters compatible with phaser-v2 method of importing of pixi filters? if yes, where are the new filters (interested in the zoom-blur one: https://github.com/pixijs/pixi-filters/tree/master/filters/zoom-blur)? if not, any pointers how to port them? Thanks!
  16. Error - WebGL: INVALID_VALUE: texImage2D: width != height for cube map at the beginning of the scene rendering error for the environment I use .dds texture 2048x1024 When I remove it from the scene everything is working fine. What to do about it?
  17. Hi, I have a sprite sheet with 9694 pixels width that I can NOT make it narrower because it has 74 frames with 131 pixels each. However it is blowing WebGL (see snapshot with the error attached)... How could I solve this issue?
  18. New Level

    https://gaming.youtube.com/watch?v=cGwsAGfm2MI
  19. Pixi v4 and webgl code effect

    Hi, I wold like to implements one effect that I found in codepen: this is the link of the effects: codepen My question is : Is there one way to implements it in pixi.js. I'm new with this framwork, i tried to search somethink on google but I don't found nothink. Thanks in advanced
  20. Verge3D for 3ds Max RELEASE!

    We are excited to announce that Verge3D, the complete, artist-friendly suite for creating interactive 3D web experiences, is now available for Autodesk 3ds Max users! Read the full article here!
  21. Added now

    https://gaming.youtube.com/watch?v=q28Z526xCYU
  22. From 3ds Max to Webgl

    We will soon release a new product called Verge3D for Autodesk 3ds Max. Support for both Blender and 3ds Max can significantly expand the audience of 3D Web. Both versions will be compatible with each other so that you can use assets from different packages in one application. Follow the news, the release is expected very soon! Video Teaser
  23. Watch out for gl.clear()!

    Hello, everyone! I just wanted to pass along some very important information that I just discovered regarding optimization that has been completely overlooked in optimization articles that I've read, and can have a huge impact on your apps! I have a game that pushes a pretty similar number of triangles and commands as the Sponza demo, but I wasn't enjoying anywhere near the same frame rate on slower systems. I fired up SpectorJS, cleaned up as much as I could in terms of draw calls and such, and wound up with a game that had fewer calls, fewer commands, and yet STILL ran a good deal slower than Sponza. However, there was one more metric that I had yet to take a close look at, and that was "clear()". I had 6 of them, while Sponza was using only 1. My game is a first-person-shooter that uses an additional camera to draw UI components, and on a different layer, so game geometry doesn't interfere with it. The player's hands and weapons are also drawn in a different rendering group for the same reason. It turns out, however, that for every new layer and group, Babylon kicks off a gl.clear() (which makes sense), and on systems with poor fill rates, this can absolutely wipe you out. In my case, the engine was clearing various buffers 6 times per frame, including multiple times per group/layer. Disabling Babylon's engine.prototype.clear() entirely made a world of difference in terms of FPS, though I do need at least 1 or 2 gl.clear() calls to accommodate my layering requirements. 6 is excessive and unnecessary, however, and I'm currently investigating ways to minimize that. Hopefully, I can do it all by simply modifying my code, but I suspect I might have to make some small engine modifications as well so I have greater control over when gl.clear() gets called, and just how many times. Edit: Just discovered scene.autoClear and scene.autoClearDepthAndStencil. Setting both to false takes care of... well... one of them!