Latest WebGL Activity
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…
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;
void…
@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
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
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
I made this playable demo in pure WebGL 1.0 and JavaScript using this tutorial: Unity 2D Minesweeper Tutorial
I use these tools:
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
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">
&l…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…
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…
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…
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 …
Just some useful links to OpenGL tutorials:
OpenGL Tutorials:
WebGL books:
WebGL Tutorials:
- 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 …
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 …
@Jonathan2006 Glad to hear you figured it out! Good luck with your endeavours.
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.
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…
Thanks to everyone who posted. I am using VS Code (and a lot of extensions) for the debugging and launching. But the actual app is from NeutralinoJS. Hope this helps anyone looking to start writing a JS game with NeutralinoJS. Thanks again.
Awesome! I'll have to try both of these (lol). Thanks.
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.
Again, …
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 squarel…
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 pro…
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"