JS GameDev Summit

JS GameDev Summit 2023

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.

Unity, when deployed on the web, faces three critical challenges: build size, memory usage, and overall performance. This lecture delves deep into advanced optimization techniques to help you address each of these issues. Attendees will gain insights into: - Effective strategies for optimizing textures, audio, and models.- A detailed analysis of our ASTC experimentation with Unity, shedding light on the unexpected results despite Unity's claims.- A comprehensive guide to Unity's memory profiling tool and its implications.- An exploration of lesser-known Unity settings that remain underutilized by many developers. Additionally, we'll introduce our <a href="https://github.com/CrazyGamesCom/unity-optimizations-package" target="_blank">proprietary tool</a> designed specifically for Unity optimization. We will also showcase CrazyGames' developer dashboard, our platform that enables developers to monitor and enhance the performance of their web-based games seamlessly.  Join us to equip yourself with the latest strategies and tools to elevate your Unity web gaming projects.

Boost the Performance of Your WebGL Unity Games!

Florin Ciornei

JS Nation

JSNation 2023

Backplane Canvas is a web-first engine that embraces open standards like WebXR and supports gLTF. PlayCanvas offers an online editor for building experiences visually. The engine architecture, JavaScript gotchas, and API documentation are discussed. The workshop covers setting up the project and scene, creating a player character, writing custom scripts, adding physics and game elements, and implementing UI and sound effects. Additional resources and suggestions for improving the game are provided.

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.

Make a Game With PlayCanvas in 2 Hours

Steven Yau

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.

In this presentation, I'll explore the transition from WebGL to WebGPU, demonstrating how these changes affect game development. The talk will include practical examples and code snippets to illustrate key differences and their implications on performance and efficiency.

Migration from WebGL to WebGPU

Dmitrii Ivashchenko

React Summit

React Summit 2022

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 is strong at UI development but lags with actual game development. Game engines are great for that but bad at UI. How to combine both?

Marrying WASM/WebGL Games with React UI

Johannes Goslar

JS GameDev Summit 2022

The Workshop on Generative Art and JavaScript covers various topics, including drawing shapes, using the debugger and CSS styling, and exploring variables and colors. It also delves into creating fire effects, drawing lines and shapes, and working with oscillation and particles. The workshop emphasizes the importance of saving work, experimenting, and building up from the basics. It highlights the uses of generative art in different industries and draws inspiration from textiles and the real world. Overall, it provides a comprehensive overview of generative art techniques and their applications.

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. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

How to make amazing generative art with simple JavaScript code

Frank Force

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.

Traditionally, browser games haven't been taken seriously. If you want to target the web, that traditionally has meant compromising on your vision as a game developer. Our team at Wonder Interactive is on a mission to change that, bringing one of the world's premiere native game engines to the browser - Unreal Engine. In our talk, we'll dive into our efforts porting the engine to the browser and carrying on the pioneering unfinished work started at Epic Games nearly a decade ago in collaboration with Mozilla. We'll dive into what this means for the future of games in the browser, and the open metaverse on the web.

Unreal Engine in WebAssembly/WebGPU

Alex St. Louis

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.

Unity can build games to run in a web browser using tools like Emscripten, Web Assembly, and WebGL. It provides integration with the browser, using browser APIs to simulate native APIs. Sometimes it is useful to interface with the browser in ways that Unity does not natively provide support for. In this talk, I will discuss how Unity builds games for the web, and how to extend Unity using Javascript to enable support for features not otherwise provided. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Extending Unity WebGL With Javascript

Brendan Duncan

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.

This session explores common performance and memory issues that arise in WebGL builds produced using the Unity game engine. Examine how to identify, troubleshoot and avoid pitfalls that may lead to out-of-memory errors. Learn how to reduce game instability and improve game performance in WebGL builds. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

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

Oz Syed

JSNation Live

JSNation Live 2021

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.

A look into Pixi.js coolest and lesser known features.Including treats such as:- Meshes- Spine Animation- Custom filters- Render Textures and Image exporting Showing example how it can make working with WebGL super easy and give your content that edge it needs to stand out! <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

#webgl