🎉 Celebrating 25 Years of GameDev.net! 🎉
Not many can claim 25 years on the Internet! Join us in celebrating this milestone. Learn more about our history, and thank you for being a part of our community!
Latest WebGL Activity
![zephyr3d v0.4.0 Released - 3D rendering framework for WebGL & WebGPU](https://uploads.gamedev.net/news/monthly_2024_04/large.a46aae7dc6a148829a1038509d830672.terrain.jpg)
Zephyr3d is an open sourced 3d rendering framework for browsers that supports both WebGL and WebGPU, developed in TypeScript.
Introduction
Zephyr3d is primarily composed of two sets of APIs: the Device API and the Scene API.
- Device API
The Device API provides a set of low-level abstraction wrappe…
![Five-pointed Star with WebGL and JavaScript](https://uploads.gamedev.net/blogs/monthly_2022_12/large.a8292f8c98844d5397b1a58128d94b3d.five-pointed-star.png)
Playground: https://plnkr.co/edit/W49ndxcQemMgkAoP
My Video:
assets/shaders/default.vert
attribute vec2 aPosition;
uniform mat4 uMvpMatrix;
void main() {
gl_Position = uMvpMatrix * vec4(aPosition, 0.0, 1.0);
}
assets/shaders/default.frag
precision mediump float;
uniform vec3 uColor;
vo…
@JoeJ Hi JoeJ,
I am planning on adding key bindings upon final release of the game as I intend to release the game on Steam…so i definitely want players to have the ability to change key bindings : ]
I would recommend using a gamepad in the meantime but unfortunately the crouch doesn't work on …
We have ported our Automatic Adaptive Mesh Refinement System to background threads. Scene navigation on main thread now suffer no lag at all. Try it out: https://www.otakhi.com/petridish?load=17206
![Drawing Box and Sphere Cannon-ES Colliders with WebGL and TypeScript](https://uploads.gamedev.net/blogs/monthly_2022_08/large.d36823236a2346d894ebb653aa5c4078.DrawingBoxAndSphereCollidersWithCannonES.png)
The CannonDebugger class I got here: https://github.com/pmndrs/cannon-es/issues/152#issuecomment-1202788163
- Sandbox: https://codesandbox.io/s/cannon-es-box-sphere-debugger-webgl-ts-9co3qr (toggle the preview to see the result: Ctrl+Shift+D)
- GitHub: https://github.com/8Observer8/cannon-es-box-sphere-…
![Demo of Jill's Movement with Ammo.js and WebGL](https://uploads.gamedev.net/blogs/monthly_2022_07/large.ee1e067ee2874b05a127e56109460bbe.jill-colliders.png)
Demo of Jill's Movement with Ammo.js and WebGL
Source code of 3rd person controller with Ammo.js and WebGL
@frob hmm, ill take a look. right now I think I'm making progress by doing LERP on the neighboring chunks that are not the same resolution
![Make small Games. Minesweeper in WebGL. Port from NoobTuts](https://uploads.gamedev.net/blogs/monthly_2022_03/large.880c76036098485080765ab8630603b0.Banner.png)
I made this playable demo in pure WebGL 1.0 and JavaScript using this tutorial: Unity 2D Minesweeper Tutorial
I use these tools:
![Christmas Tree in pure WebGL](https://uploads.gamedev.net/blogs/monthly_2021_12/large.3da2fd3847b14b69b432e3183b7661f5.christmas-tree-1300x300.png)
Demo in pure WebGL, glMatrix, Ammo.js, JavaScript: Christmas Tree
- w, s, d, a - for moving
- arrows keys - for camera rotation
- the ‘f’ key - the third person camera for debugging of colliders
![Loading a cube from gltf 2.0. WebGL, JavaScript](https://uploads.gamedev.net/blogs/monthly_2021_12/large.f010e6b05f98471d825a8385d6925c12.load-cube-from-gltf2-webgl-js-500x500.png)
Sandbox: https://plnkr.co/edit/BYseznZdUBTrUmRa?preview
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
&…
actually, if you want your app to run in a browser, you can make your own browser. you can use CEF3 to integrate chromium into your application. I do this with my game and use html5 gui with javascripting, being a c++ game engine/game, You can render whatever you want however you want, c++ side, an…
Nova is an abbreviation of supernova. The game's visuals focuses around a star's beauty. The stars have the most polygons, with separate objects of each of the star's coronae. Of course, the game has space battles. Nova is a free to play (online) and simple to use RTS. Try it out here :
https://chei…
![Usage of Planck.js with TypeScript (Planck.js is a port of Box2D Physics Engine)](https://uploads.gamedev.net/blogs/monthly_2021_01/large.317daa64030a4fac978c8db0d5b2c638.hello-planckjs-webgl10-ts_for-gamedev-blog.png)
My example shows how to use Ammo.js with TypeScript in Debug and Release modes: hello-planckjs-webgl10-ts
You should install these modules globally:
- npm i typescript -g
- npm i browserify -g
- npm i uglify-js -g
Install all packages from `package.json` using the command: `npm i`
Comment/Uncomment Debug/Relea…
![Usage of Ammo.js with TypeScript (Ammo.js is a port of Bullet Physics Engine)](https://uploads.gamedev.net/blogs/monthly_2021_01/large.0103c8d5147f474c80c7c82b6efe4600.hello-ammojs-webgl10-ts_for-gamedev-blog.png)
My example shows how to use Ammo.js with TypeScript in Debug and Release modes: hello-ammojs-webgl10-ts
You should install these modules globally:
- npm i typescript -g
- npm i browserify -g
- npm i uglify-js -g
Install all packages from `package.json` using the command: `npm i`
Comment/Uncomment Debug/Release…
![Detecting a mouse click on object in JavaScript, Python and C++](https://uploads.gamedev.net/blogs/monthly_2021_01/3c5a542df81b490f86366e6e6742432c.pick-triangle-webgl10-js.gif)
Run demo in Sandbox:
- JSFiddle: https://jsfiddle.net/8Observer8/1gqfLar7
- Plunker: https://plnkr.co/edit/Y85fpZRur7vqaAl7?preview
Source Code:
- JavaScript, WebGL 1.0: https://jsfiddle.net/8Observer8/1gqfLar7
- Python, PyQt5, OpenGL 3.3: https://rextester.com/UZOJ14435
- Python, PySide2, OpenGL 3.3: https://rex…
What you're missing is that a cube is an excessivly simplistic example that is not representative of real-world use cases.
If we step up to the next level of complexity - something like a Quake model - and examine the Shambler model, we'll see that the base model file is 284 triangles, which if not …
![Resources for Learning OpenGL and WebGL](https://uploads.gamedev.net/blogs/monthly_2020_11/large.a7c7abbd2c7b4e4092b8c4c78459d9e3.LogoForOpenGLResources.png)
Just some useful links to OpenGL tutorials:
OpenGL Tutorials:
WebGL books:
WebGL Tutorials:
![Triangle in OpenGL ES 2.0 (Qt5 C++, PyQt5) and WebGL 1.0 (TypeScript) for Desktop and Android](https://uploads.gamedev.net/blogs/monthly_2020_11/large.ce8c6c9a74ca4f4cab71bd37a96ed796.TriangleInOneFile_Qt5OpenGLES20Cpp_500x500.png)
- Added PyQt5 Example: https://rextester.com/LWYAU14361
Version in WebGL 1.0 (TypeScript)
Run by one click in a browser: https://plnkr.co/edit/gAfPR7ZIKjJXulDI?open=main.ts&preview
Version in OpenGL ES 2.0 (C++ Qt5)
Create a QWidget project (without “Generate form”). Delete the Widget class. Add the …
![Old game WebGL problem](https://uploads.gamedev.net/forums/monthly_2020_10/434c94f7b2044fb4a8573421260330a3.obraz_2020-10-19_145053.png)
Ok its done. Moderator can close the topic. Fixed problems.
- i think the game wasn't working on localhost because of https browser blockade, but it works on preview link :> .
- The error was on one boost item with healh points, “there no instance of the object”. But its fixed now :> .
Thanks …
![3D Domino boxes collision not realistic](https://uploads.gamedev.net/forums/monthly_2020_09/0f45c8972c2b41f0a6ab3240e8f3e750.NewDominoProject1.png)
@Jonathan2006 Glad to hear you figured it out! Good luck with your endeavours.
![How to create reference renders to compare with a real time PBR shader](https://uploads.gamedev.net/forums/monthly_2020_02/849fe7ef134a4e19bb186c371fe1af05.68747470733a2f2f692e696d6775722e636f6d2f48516478486d302e706e67.png)
JoeJ said:
I did not want to integrate Mitsuba either, so wrote my own Pathtracer.
Well, if we are talking about reducing the amount of work then I already have a solution - use Arnold.
![NoobTuts Pong. WebGL 1.0, TypeScript](https://uploads.gamedev.net/blogs/monthly_2019_12/234731b83cde49a4937c7783cbe320a7.pong2d-from-noobtuts_webgl10-typescript.png)
I rewrote the Pong game to WebGL 1.0 and TypeScript from the tutorial: https://noobtuts.com/cpp/2d-pong-game
I use a free hosting and sometimes my Node.js/Express server sleeps. Wait 10 second to wake up the server.
Run the release version in the browser: http://ivan8observer8.herokuapp.com/webgl10-t…
Hello everyone!
I am very interested in shadow volumes and was wondering how to implement it. I can't really find any good tutorials that walk through some code in webgl (preferably) or opengl. There are a lot of online resources for putting the general steps to words but I don't know exactly how to…
![Library to emulate retro screens/displays?](https://uploads.gamedev.net/monthly_2019_04/ships.png.b7b582424e32d07907a19f8c4fb6ead2.png)
Awesome! I'll have to try both of these (lol). Thanks.
![Any idea why this seam is appearing on my UV Sphere?](https://s8.postimg.cc/d9jka7rht/Screen_Shot_2018-07-23_at_8.58.43_PM.png&key=9de4c4e6738c0a1e3c41aaa33f3078580bef18c076f32ca52cf310816836cea4)
QuoteThe UV's should not go all the way to the edge.
I didn't down vote, but UV's can go to the edge and further.
QuoteAs you can see, the UV's are a mess. They actually go outside the UV limits of 0 to 1 space in several places.
Aga…
![Tips removing jagged edges and artifacts in frame](https://s8.postimg.cc/fdlx0u9lt/Screen_Shot_2018-07-15_at_6.03.43_PM.png&key=aaa4efd4d6801cf2791be2bbe798463ae33ab5813a8c9890a7da2b5d4faa3452)
3 hours ago, Scouting Ninja said:Anisotropic Filtering is what you are looking for: https://en.wikipedia.org/wiki/Anisotropic_filtering
Basically what is happening is that your mips are causing artifacts when blended with the original texture. The mips are scaled squar…
I wrote a blog post about drawing quads without having to transfer additional data to the GPU compared to drawing gl.POINTS. Is this already well-known? I haven't seen the technique used in popular engines like PixiJS.
1 hour ago, petitrabbit said:Sounds like you're trying to build a color histogram (if I'm not misunderstanding your question ).
Since WebGL doesn't have Compute shaders, retrieving texels on the CPU (using glReadPixels) and building the histogram on the CPU-side is p…
Don't stop at packing some of them into a matrix. Pack all of them into an array of vec4s and alias them with "#define shininess array[3].y"