#webgl

WebGL stands for Web Graphics Library. It is a JavaScript API that allows developers to render interactive 2D and 3D graphics within any compatible web browser without the use of plugins. By using WebGL, developers can create complex 3D scenes that have high-level effects like lighting, shadows, and post-processing. These scenes can be used for games, data visualization, or other applications.

Boost the Performance of Your WebGL Unity Games!

JS GameDev Summit 2023

7 min

Boost the Performance of Your WebGL Unity Games!

Florin Ciornei

CrazyGames

The Talk discusses ways to boost the performance of WebGL Unity games, including issues with bundle size, memory usage, and runtime performance. It suggests using Brotli for compression and non-exception support for better performance. Choosing the appropriate texture compression format and experimenting with separate builds can also help. The Talk also covers optimizing textures, models, audio, and assets by reducing build size, using compression, disabling unnecessary models, and optimizing audio quality. Unity's optimization tools and profilers are recommended for analyzing performance and memory issues.

Make a Game With PlayCanvas in 2 Hours

JSNation 2023

116 min

Make a Game With PlayCanvas in 2 Hours

Top Content

Featured WorkshopFree

Steven Yau

In this workshop, we’ll build a game using the PlayCanvas WebGL engine from start to finish. From development to publishing, we’ll cover the most crucial features such as scripting, UI creation and much more.
Table of the content:- Introduction- Intro to PlayCanvas- What we will be building- Adding a character model and animation- Making the character move with scripts- 'Fake' running- Adding obstacles- Detecting collisions- Adding a score counter- Game over and restarting- Wrap up!- Questions
Workshop levelFamiliarity with game engines and game development aspects is recommended, but not required.

webgl game development

Migration from WebGL to WebGPU

JS GameDev Summit 2023

21 min

Migration from WebGL to WebGPU

Dmitrii Ivashchenko

MY.GAMES

This talk explores the differences between WebGL and WebGPU, with a focus on transitioning from WebGL to WebGPU. It discusses the initialization process and shader programs in both APIs, as well as the creation of pipelines in WebGPU. The comparison of uniforms highlights the use of uniform buffers for improved performance. The talk also covers the differences in conventions between WebGL and WebGPU, including textures, viewport and clip spaces. Lastly, it mentions the differences in depth range and projection matrix between the two APIs.

performance webgl game development webgpu

Marrying WASM/WebGL Games with React UI

React Summit 2022

22 min

Marrying WASM/WebGL Games with React UI

Johannes Goslar

Synthesia

Jonny discusses marrying WebAssembly and WebGL games with React, emphasizing the importance of choosing the right tool for game development. He introduces the Godot game engine as a powerful choice for game development and highlights the limitations of Godot. Jonny demonstrates how to combine React with Godot and showcases the ability to dynamically switch between different games on the same website. He explains the process of exporting a Godot game to the web using WebAssembly. Jonny also discusses the communication between React and Godot games and highlights the benefits and future improvements of using this approach.

react webgl webassembly game development react games react unity webgl

How to make amazing generative art with simple JavaScript code

JS GameDev Summit 2022

165 min

How to make amazing generative art with simple JavaScript code

Top Content

WorkshopFree

Frank Force

Instead of manually drawing each image like traditional art, generative artists write programs that are capable of producing a variety of results. In this workshop you will learn how to create incredible generative art using only a web browser and text editor. Starting with basic concepts and building towards advanced theory, we will cover everything you need to know.

webgl animations 3d

Unreal Engine in WebAssembly/WebGPU

JS GameDev Summit 2022

33 min

Unreal Engine in WebAssembly/WebGPU

Top Content

Alex St. Louis

Co-founder and Chief Operating Officer @ Wonder Interactive

Alex Saint-Louis, co-founder of Wunder Interactive, shares the mission of bringing Unreal Engine to the browser, enabling cross-platform 3D applications and games. They are working on a WebGPU back end for Unreal Engine to push the limits of 3D on the web. Wunder Interactive has improved compression, built their own asset file system, and offers powerful tools for game developers. They are utilizing modern web technologies like WebAssembly, WebGL, and WebGPU, and plan to support other engines like Unity and Godot. The team aims to transform the industry by bringing console-quality games to the browser and providing an alternative distribution path. They are excited to bring Unreal Engine 5 to the web with WebGPU support and are working on WebXR support for cross-platform 3D experiences, including VR.

webgl webassembly game development webgpu game engine

Extending Unity WebGL With Javascript

JS GameDev Summit 2022

32 min

Extending Unity WebGL With Javascript

Top Content

Brendan Duncan

Senior Software Engineer @ Unity Technologies

Unity targets over 25 platforms and technologies, including desktop, mobile, and virtual reality. They use Emscripten to compile the engine and game logic into WebAssembly for web development. Unity can be extended with plugins to access browser features like WebXR's augmented reality mode. The speaker demonstrates intercepting Unity's calls to the browser to modify its behavior. Unity is actively working on mobile support for web export and improving documentation for extending Unity with web plugins.

webgl game development webgpu game engine react unity webgl

Detect and Avoid Common Performance and Memory Issues in Unity WebGL Builds

JS GameDev Summit 2022

10 min

Detect and Avoid Common Performance and Memory Issues in Unity WebGL Builds

Top Content

Oz Syed

Sauce Labs

Today's Talk focuses on avoiding performance and memory issues in Unity WebGL builds. The importance of managing memory and keeping the heap size small is highlighted. Techniques such as using asset bundles or an addressable system can help reduce memory usage. The limitations of garbage collection in WebGL builds are discussed, along with tips for optimizing Unity code. Tools like Backtrace can assist in debugging memory and performance issues.

performance webgl game development game server react unity webgl

Pixi Powerups!

JSNation Live 2021

30 min

Pixi Powerups!

Mat Groves

Goodboy Digital

Pixie is a powerful tool for creating scenes and effects in software development. It supports features like texture mapping, Spine animation, and filters for creating cool effects. The talk also covers the use of render textures to capture and download images, as well as the importance of communication and a positive attitude in software development. The speaker shares their journey into coding and discusses the potential for porting Unity games to JavaScript using technologies like web GL and web GPU.

webgl game development