Search the Community

Showing results for tags 'webgl'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • 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


Last Updated

  • Start


Filter by number of...


  • Start



Website URL





Found 429 results

  1. mikhluz

    Farmer's Journey

    This is a simple runner (walker exactly:) ) made with Verge3D engine and runs directly in the browser. All was modelled in Blender, even texturing in 90% made in Blender: I just set up shaders and light and baked it to texture. In my pipeline I've also used 3ds Max, Krita, Webflow, Gimp and Audacity. The game was made without coding in two weeks by only one artist. Character and most of the assets based on concepts of Vihn Nguyen . Thanks to Forget the Whale for the soundtrack. Link to the game: DIRECT LINK You can also download all source files with mesh, textures and sounds HERE Some art related to the game can be found here on my ARTSTATION PAGE
  2. Hi, I made a web-app for planning and visualizing time segments. It looks like this in action: napchart gif2.mp4 I do all the calculations in pure Javascript, and had to write a lot of code to code all the shapes make hit detection work for all shapes. I am drawing all elements in HTML5 canvas. I am looking into refactoring the codebase and adding more features. In that case I am wondering if a library rendering to WebGL would help me? Things I want: Easy way to prevent text overlapping Easy way to add small animations and slick effects Smooth animations with more complex and advanced shapes than in the video. The bottleneck is when animating the shape, and then the JS have to calculate all elements every frame, but would WebGL help with that? This is a non-trivial usecase, and I think it may be best to just use pure JS and canvas, but to be honest, I don't really know how WebGL works, and in what way it helps. Any WebGL heads here?
  3. Is there already a way to make a displacement filter in p3? something like that: would like to use it for explosions (shockwave effect) any idears on implementing this effect into p3.? regards
  4. 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.
  5. 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.
  6. mikhluz


    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!
  7. 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
  8. new addition level 42
  9. 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!
  10. 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.
  11. 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? 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: " + ( + "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 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:
  12. WheelLabs 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:
  13. 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!
  14. 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.
  15. Added new level - Level 40
  16. 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
  17. 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.
  18. Hi, I'm trying to implement the pixi-v4 filters in phaser 2 (CE Version). I'm especially interested in this one: I've noticed this example ( in phaser 2 is outdated/not working (link to pixi filter is wrong). Even when i fix the link (e.g. 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: if not, any pointers how to port them? Thanks!
  19. 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?
  20. 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?
  21. ian

    New Level
  22. mircodj

    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
  23. mikhluz

    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!