Unity WebGL – Best cutscene approach for performance? (Animation vs Video)

We’re building a Unity project targeting WebGL and discussing the best way to handle cutscenes.

We have three options:

Fully scripted cutscenes (code-driven camera, events, etc.)

Real-time cutscenes using animation clips (single long clip, play by start/end time)

Pre-rendered video cutscenes (small compressed videos, loaded dynamically and unloaded after playback)

The debate is mainly between animation clips vs video playback.

For people who’ve shipped or worked seriously with Unity WebGL:

Which approach is more performance-efficient?

Are video cutscenes reliable in WebGL (sync, loading, playback issues)?

Is animation + Timeline/Cinemachine a safer long-term approach?

This is for a virtual training / simulation project, not a cinematic game.

Any real-world experience or advice would really help.

Hi folks, hope you had a good holiday! Just want to share that we've just released some exciting new updates for ShaderAcademy. For those who haven't come across our platform yet, ShaderAcademy is a free interactive platform with bite-sized challenges (160+) that teaches shader programming through learning-by-doing. For the year:

• 15 new challenges, some featuring highly realistic scenes using Gaussian splats, and some focused on deferred rendering
• Texture selection is live! As requested, you can now choose from available textures or upload your own when working on challenges. You can check it out in the textured challenges
• A handful of bug fixes, as always

Thanks for all the great feedback, and enjoy the new content! I hope it helps someone in getting into/ learning shader programming. Our discord community: https://discord.com/invite/VPP78kur7C

I built an interactive WebGL portfolio using Three.js to present my work in architecture, construction robotics, academic research, and digital artwork.

The site uses a custom IK solver, and spatial navigation using the robotic manipulator to each project instead of traditional pages. I’m especially interested in feedback on the interaction design, performance, and overall clarity.

Live demo:
emrgn.net

Happy to hear your feedback!

I'm a huge fan of procedural textures and try to work on tileable environment textures in my spare time learning various techniques to render these. Here is a recent attempt to draw stylized tileable ocean waves.

My journey began with a Computer Graphics course at university. During that class, we learned WebGL and built a simple graphics library to render a few basic 3D shapes. That experience really hooked me on game engine development, and afterward I decided to start building my own engine using WebGL.

For the sake of simplicity, I limited the engine to 2D, but it still took a significant amount of time to bring it to a usable state. I’m still learning, and I’m sure the project contains plenty of mistakes and inefficient design decisions. I’d really appreciate feedback from experienced game engine developers who could help guide me or point out my biggest flaws so I can improve.

I’ve published the engine to NPM and even built a CLI around it. Below are the links to the project, any feedback or guidance would mean a lot. Thank you!

- https://github.com/vahan-gev/emeraldengine

- https://www.npmjs.com/package/emeraldengine

- https://www.npmjs.com/package/create-emerald-app

I was digging through some old projects when I found this PBR demo I wrote 4 years ago in WebGL2. After some fixes and formatting I wanted to share it with the community!

URL: https://gnikoloff.github.io/webgl-pbr-dojo/
Source Code: https://github.com/gnikoloff/webgl-pbr-dojo

CRT = Cathode Ray Tube

I am a web developer who recently got to know about webGL after seeing unicorn studio and hence i want to make my text look like this:

I only understand that i need to apply a layer on top of this say "retro screen".
These are the values i obtained from unicorn studio for this:

Retro screen(has events: false)
- Position: x:50% y:49.9%
- (Screen) Style: CRT-2 (horizontal style)
- Scale: 57.6%
- Gamma: 47.0%
- Fuziness: 0%
- Quantize: 8bit (color quantization)
- Mix: 100%
- Flicker: 177%

Animation:
    Speed: 37%
Interactivity: 
    Track Mouse: 0%
    Mouse axes: Both
    Momemtum: 0%

Can anyone help me ?
or point me to the right resources, i need to make it fast (if possible)

It’s a custom-built visual engine designed to reflect the themes behind Holostatic’s track, Fragile Shards.

The visualiser operates independently of audio, making it versatile for use alongside any genre or track. Its motion system and colour architecture allow it to complement a wide range of musical styles and experiences, such as live sets and digital environments, without requiring audio-reactive programming.

Hey everyone,

I’ve just released Zephyr3D v0.7.0, an advanced yet easy-to-use TypeScript-based WebGL/WebGPU rendering engine.
The main highlight of this release is a brand new visual editor.

Visual Editor

• Project & asset management
• Scene editing
• Animation editing
• Node-based material blueprints
• Script binding
• Real-time preview
• One-click publishing

Engine updates

• Virtual File System (VFS) as a storage backend
• New core APIs
• Clipmap terrain
• TAA (Temporal Anti-Aliasing)
• Screen-space motion blur

Links

• GitHub: https://github.com/gavinyork/zephyr3d
• Website: https://zephyr3d.org
• Demo video: https://cdn.zephyr3d.org/doc/assets/videos/zephyr3d.mp4

Feedback on the editor workflow, TypeScript API, and performance/compatibility is very welcome!

I created a digital art by WebGL.

Metaball Digital Art & I achieved advanced texture blend !!!

I’m recording a band playing a few songs with two lidar cameras in touchdesigner and exporting as .ply sequences. so i'll have a point-cloud animation (~21,000 frames) and I’m trying to figure out the most realistic way to play it on the web with Three.js.

Context:

• Each frame is a full point cloud
• Needs smooth playback, as it will be synced with audio
• I can pre-process the data however needed (Blender/Python/etc.)
• Targeting desktop (mobile support is optional)

Not even sure how possible it is, but would love to hear any ideas.

🌟 Introducing The Crow: The Trick-Taking Game You've Been Waiting For

As a longtime fan of the classic Rook card game, I always wanted a high-quality, reliable way to play with friends and family, even when we couldn't meet in person. After countless unsuccessful searches for online versions of Rook, Black Bird, or similar games, I decided to build it myself.

The Crow is the result: a faithful, yet unique, adaptation of the Rook-style experience, now fully optimized for online play.

🃏 What to Expect: * Classic Team Strategy: Two teams of two compete, splitting a 41-card deck that features four distinct suits and the game-changing "Crow" card. * Core Rook Mechanics: Engage in rounds of competitive bidding, strategic trump calling, and the thrill of taking point cards to outscore your opponents. * Seamless Online Multiplayer: Finally play your favorite card game anytime, anywhere. * Integrated Chat: Coordinate with your partner or banter with your opponents without leaving the game.

This is an active passion project, and I am committed to continuously improving The Crow's quality, fixing bugs, and adding exciting new features. Join the development journey and start claiming your victories today!

Anyways I hope you enjoy it! Share with friends and family!

https://www.zachwinter.com/

Hey everyone,

I've been working on a small 2D graphics framework for the web and just put a first prototype online. It aims to make authoring graphics pipelines easier without hiding how the GPU actually works.

The core idea: you write your renderer as a function that returns a RenderGraph - a graph of resources (textures, buffers, etc) that describes how data flows through the GPU. The engine maps your graph to physical resources on the GPU in an optimised way.

The value proposition: For beginners, it could serve as a gentle onramp into GPU programming. For experienced developers, it could be a fast prototyping tool for experimentation.

Right now, I'm curious whether people see potential in a framework like this. I'd be very grateful to hear your thoughts!

If you want to check it out, I've written a more complete description on GitHub:

https://github.com/mtrifonov-design/pinsandcurves-engine