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
    • Facebook Instant Games
    • 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 434 results

  1. mikhluz

    Verge3D 2.5 for 3ds Max

    We are finally releasing Verge3D 2.5 for 3ds Max – it took longer than we thought, yet the amount of new features that we delivered this time was definitely worth waiting for. In this release are reworked physical materials, support for bipeds and character rigs, animation of material parameters, support for more texture settings, anisotropic filtering and various new puzzles to help creating even more engaging interactive scenarios without coding. Link to the Full Article Link to the Realtime Application Youtube Video
  2. mikhluz

    VERGE3D 2.5 FOR BLENDER RELEASED

    We are glad to present a new release of Verge3D – the Blender version comes first this time. We included several significant improvements in this release, such as basic support for Cycles nodes, puzzles for dragging objects with the mouse or gestures and puzzles for limiting object movement, support for anisotropic filtering for textures, Unicode characters and new settings for constraints. We have also created a new application to demo all these features. In this release: • Support for Cycles renders, including physically-based lighting model and the Principled BSDF node! • New Puzzles for positioning, rotating and zooming objects by using the mouse or touch screen. This tool has unlimited possibilities whether it's controlling the a complex equipment or the simple arrangement of the furniture in your apartment. • Support for international and special characters for the names of objects, animations, files and projects. • Textures now look much better due to anisotropic filtering feature. • Ability to control constraints, procedural animations, sounds and many other features in the Puzzles editor. • Various UI/UX improvements in App Manager. Remember the NASA Curiosity application? Now you can create the same app without a line of code using only visual logic blocks, look at our new example. Link to the Industrial Robot demo Link to the Full Article
  3. Some time ago I started my own twitch channel where I have been working at 2D space massive multiplayer game development. I try to utilise my roadmap task by task, telling about what I'm doing. I have using javascript, node.js and top-notch technologies such as service workers, websockets, server-side rendering, webgl and famous libraries & frameworks like React, Webpack, Koa. And finally the question, does anybody interested in watching Twitch to improve their skills in gamedev and programming based on real game projects? I'm free to welcome other developers, answer for any technical questions. For me it's basically chance to meet new developers, increase of motivation, extra opportunity to find anyone who can help me in gamedev as well. Thank you!
  4. AndrewJS

    Fastest way to do masking?

    Pixi usually performs really well even with heavy scenes. I can put hundreds of objects, even thousands of particle sprites and get 60 FPS on mobile. I typically only use a single masked object in a scene but recently needed to use more and I was surprised at how badly Pixi performed with masked objects. For every masked sprite, I lost about 5 FPS on mobile (both Android and iOS on old and new phones, newer phones actually performed worse in some cases). By the time I added 4 masked sprites, I was down to 40 FPS, adding 10-20 masked sprites dropped to 20 FPS with really bad stuttering. As soon as I switch the mask off by removing the assignment, it goes from 20 FPS to 60 FPS, even with 200 of the same sprites. It doesn't seem like it should take so much resources to do masking given all the other effects that are possible. Tinting for example, adds a value to every pixel and costs nothing. Masking is just checking a pixel in one object and setting the equivalent pixel in the other object. Is there a faster alternative to using object.mask = mask? Is there a graphics buffer I can use to set the pixel values myself, e.g if I could create an array of pixel values and generate a texture buffer from that. Javascript is pretty fast with arrays. The main thing that bothers me is that the low performance happens with static masks. I could understand the performance hit when the sprite is animating relative to the mask but not when they are both static. Why doesn't it buffer the masked sprite and use that over and over like a normal sprite? I found a thread that describes the same issue, unfortunately I'm stuck on v3 for now: https://github.com/pixijs/pixi.js/issues/2163 I just found the following with a possible alternative using multiply blending: https://github.com/pixijs/pixi.js/issues/3735 To isolate it, it suggests using a voidfilter. Is this the fastest way to do masking in Pixi? If so, is there example code for this? Say that I did at some point want to draw a texture pixel by pixel, one way would be to draw a tinted 1x1 pixel sprite into a render texture. Is there a better way than this e.g set values in a buffer and convert it to a texture? Is there a way to read a pixel color/alpha value from a sprite or texture. There seems to be an extract function for WebGL and Canvas but it looks like this extracts the viewport. It would be good to be able to render sprites to a rendertexture and be able to read the pixel values of that texture using pixel co-ordinates.
  5. mikhluz

    NASA turns to Verge3D

    As Verge3D is getting more and more popular among interactive designers and web developers, quality applications are starting to appear online with regularity. We could not resist to share with you an amazing example of using our toolkit by NASA’s Jet Propulsion Laboratory. Experience Curiosity, the award-winning 3D web app that tells the story of the tireless Mars rover, is now powered by Verge3D! Created by NASA to celebrate the third anniversary of the Curiosity rover landing on Mars, this app was featured by the Khronos consortium on SIGGRAPH 2015 as a breakthrough application powered by then-young WebGL technology. Read the full article HERE!
  6. 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
  7. 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?
  8. Is there already a way to make a displacement filter in p3? something like that: https://pixijs.io/examples/#/filters/displacement-map.js would like to use it for explosions (shockwave effect) any idears on implementing this effect into p3.? regards
  9. 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.
  10. 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.
  11. mikhluz

    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!
  12. 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
  13. new addition level 42
  14. 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!
  15. 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.
  16. 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:
  17. WheelLabs

    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
  18. 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!
  19. 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.
  20. Added new level - Level 40
  21. 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
  22. 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.
  23. 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!
  24. 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?