webgl safari performance

WebGL Performance on Safari and Apple Vision Pro

Safari–especially on iOS–has always been considered the pinnacle of performance challenge for developers building on the 3D web. The Metal-based implementation of WebGL, together with the unique performance characteristics of WebKit make it particularly interesting to deal with.

In this article, we give you some insights into how you could improve the performance of your WebGL apps on Safari.

Apple Vision Pro 

In recent days with the launch of the Apple Vision Pro, WebGL performance on Safari has gained even more importance as Apple Vision’s version of Safari has inherited all the performance characteristics of Safari on MacOS and iOS.

We will be posting a full article on WebXR with Apple Vision Pro soon, subscribe to our newsletter to get notified.

Wonderland Engine on Apple Vision Pro 

If you are already using Wonderland Engine, we have good news: all the optimizations we did for our 0.9.0 release translate over to Apple Vision Pro.

Developers with access to the Apple Vision Pro are reporting great performance on their Wonderland Engine based apps:

• James C. Kane about The Escape Artist and
• Ayushman Johri - Vintage Study Room .

Optimizing for Safari 

If you are on another framework, make sure to have a look at our WebGL Performance Profiling blog post . That blog post contains tips on how to find the bottlenecks of your application to find out what to optimize.

Additionally, below are some notes on what you might find in Safari while profiling. These are not one-size fits all, profile your application to find out which of these are cause you trouble.

Bottlenecks 

Here are a few more characteristic issues you might encounter when working with WebGL on Safari:

Uniform Buffers 

Because of how Apple’s graphics API Metal differs from WebGL, Safari needs to emulate a WebGL-style uniform buffer under the hood. This emulation incurs some difficulty in predicting the performance of UBOs: some uses will be fine, while others could incur a 150ms hitch when trying to upload data at the wrong moment in time.

This snippet of code from the Metal implementation of Angle (which is used by WebKit to implement the WebGL2 API) points to the implementation of the GLES equivalent to WebGL’s bufferSubData . It helps us appreciate to which lengths browser developers go to provide us with a consistent graphics API. It also shows to which lengths the Wonderland Engine team goes for you to understand browser performance and optimize for you.

There was a lot of dismay around Safari taking a long time to release support for WebGL2. Contrary to speculations that they might never support it, they did release WebGL2 support in September 2021 with Safari 15 . Reading the WebKit and Angle code raises some empathy around why it might not have been an easy task to get done.

WebGL State Access 

WebGL’s getParameter function has some performance surprises in store for you. What seems like a harmless function can cost a lot of performance budget.

WebGL Error 

While checking errors with getError is generally a good idea, avoid it outside of your frame callback, since it can be more expensive than it should be.

Memory and Limits 

WebGL Safari will report limits for texture sizes, layers, uniform buffer sizes and more. A good tool to check these limits is webglreport.com .

While Safari will allow you to allocate up to these limits in theory, you might find that this can cause your page to crash.

To use memory resources on iOS more efficiently, Wonderland Engine provides a feature we call Texture Streaming , to dynamically swap pieces of textures in and out of memory based on what is currently needed in the frame. It is enabled by default.

Closing Words 

We will be following up with a detailed blog post about WebXR on Apple Vision Pro in short. Subscribe to our newsletter to get notified when we release it.

Until then, we hope you give Wonderland Engine a try ! Especially when coming from Unity, Wonderland Engine is easy to learn .

Make sure to join our Discord server as we are happy to point you to the right resources to get started.

Stay up to date.

You will receive an email verification link, in case you were not signed up already.

How To Enable Webgl On Safari

• Software & Applications
• Browsers & Extensions

Introduction

Welcome to the world of web browsing, where the seamless integration of technology and creativity opens up a universe of possibilities. As you navigate the digital landscape, you encounter captivating visuals, interactive experiences, and immersive 3D graphics that breathe life into websites and applications. At the heart of this visual extravaganza lies WebGL, a powerful JavaScript API that brings stunning graphics to your browser, transforming the way you interact with online content.

WebGL, short for Web Graphics Library, serves as the cornerstone of modern web-based 3D graphics, enabling developers to craft visually rich and dynamic experiences that push the boundaries of traditional web design. From interactive product showcases and engaging games to architectural visualizations and virtual reality experiences, WebGL empowers developers to unleash their creativity and deliver captivating content to users across the globe.

While major web browsers embrace WebGL as a fundamental component of the web experience, Safari, Apple's renowned browser , requires a specific configuration to unleash the full potential of WebGL. In this guide, we'll delve into the intricacies of enabling WebGL on Safari, empowering you to harness the full spectrum of 3D graphics and interactive content that the web has to offer.

So, fasten your seatbelt as we embark on a journey to unlock the captivating world of WebGL on Safari. Whether you're a developer seeking to optimize your creations or an enthusiast eager to immerse yourself in visually stunning web content, this guide will equip you with the knowledge and tools to enable WebGL on Safari and elevate your browsing experience to new heights. Let's dive in and unravel the magic of WebGL within the Safari browser!

Checking WebGL Support on Safari

Before delving into the process of enabling WebGL on Safari, it's crucial to ascertain whether your browser supports this cutting-edge technology. Checking WebGL support on Safari is a straightforward yet essential step to ensure that your browser is equipped to render immersive 3D graphics and interactive content seamlessly.

To verify WebGL support on Safari, you can follow these simple steps:

Accessing Safari Preferences : Launch the Safari browser on your Mac and navigate to the "Safari" menu located in the top-left corner of the screen. From the dropdown menu, select "Preferences" to access the browser's settings and configuration options.

Opening the Advanced Tab : Within the Preferences window, click on the "Advanced" tab, which houses advanced settings and features that cater to the technical aspects of the browser.

Enabling the Develop Menu : To reveal the Develop menu in Safari, ensure that the "Show Develop menu in menu bar" option is checked. This step is crucial as it grants access to developer-centric tools and features, including WebGL-related functionalities.

Accessing the Develop Menu : After enabling the Develop menu, you'll notice a new option labeled "Develop" in the top menu bar, adjacent to the "Bookmarks" and "Window" menus. Click on the "Develop" menu to unveil a dropdown list of developer-oriented tools and settings.

Selecting the Experimental Features : Within the "Develop" menu, navigate to the "Experimental Features" section and ensure that the "WebGL 2.0" option is checked. This step is pivotal in confirming that WebGL support is enabled on Safari, allowing the browser to harness the full potential of WebGL-powered content.

By following these steps, you can effectively check WebGL support on Safari, ensuring that your browser is primed to deliver captivating 3D graphics and interactive experiences seamlessly. This preliminary assessment sets the stage for the subsequent process of enabling WebGL on Safari, paving the way for a visually rich and immersive browsing experience.

With WebGL support verified, you're now ready to embark on the next phase of our journey – enabling WebGL on Safari to unlock a world of visually stunning web content and interactive experiences. Let's dive into the intricacies of enabling WebGL on Safari and harness the full potential of this groundbreaking technology.

Enabling WebGL on Safari

Enabling WebGL on Safari is a pivotal step that unlocks the browser's capability to render immersive 3D graphics, interactive content, and visually rich web experiences. By configuring Safari to harness the full potential of WebGL, users can indulge in a seamless and captivating browsing journey, encountering stunning visuals and dynamic content that elevate the web experience to new heights.

To enable WebGL on Safari, follow these steps:

Accessing the Develop Menu : As mentioned in the previous section, ensure that the Develop menu is visible in Safari. This can be achieved by navigating to the Safari Preferences, clicking on the Advanced tab, and checking the "Show Develop menu in menu bar" option. The Develop menu is a gateway to a plethora of developer-centric tools and features, including essential settings related to WebGL.

Enabling WebGL : Once the Develop menu is accessible, click on it to reveal a dropdown list of developer-oriented tools and settings. Within the Develop menu, locate the "Experimental Features" section and ensure that the "WebGL 2.0" option is checked. This pivotal action effectively enables WebGL on Safari, empowering the browser to seamlessly render 3D graphics and interactive content with precision and fluidity.

By following these steps, you can successfully enable WebGL on Safari, transforming the browser into a powerhouse capable of delivering visually stunning web content and immersive experiences. With WebGL now activated, Safari stands ready to embrace the creative prowess of developers and the captivating allure of WebGL-powered content, ensuring that users are immersed in a visually rich and dynamic online environment.

Enabling WebGL on Safari marks a significant milestone in enhancing the browser's capabilities, allowing users to explore a myriad of visually captivating websites, interactive applications, and 3D experiences that push the boundaries of traditional web design. This pivotal configuration empowers Safari to seamlessly render WebGL-powered content, ensuring that users are greeted with a visually rich and engaging browsing experience that transcends conventional web interactions.

With WebGL now enabled on Safari, users can embark on a captivating journey through the immersive realm of 3D graphics, interactive visualizations, and dynamic web content, all seamlessly rendered within the confines of the Safari browser. This transformation elevates the web experience, inviting users to explore a digital landscape teeming with creativity, innovation, and visually stunning content that captivates the senses and sparks the imagination.

Verifying WebGL is Enabled

After enabling WebGL on Safari, it's essential to verify that the configuration has been successfully implemented, ensuring that the browser is primed to render immersive 3D graphics and interactive content seamlessly. This crucial step allows users to confirm that Safari is equipped to harness the full potential of WebGL, setting the stage for a visually rich and dynamic browsing experience.

To verify that WebGL is enabled on Safari, follow these steps:

Accessing the Develop Menu : Launch the Safari browser and ensure that the Develop menu is visible in the top menu bar. If the Develop menu is not visible, navigate to Safari Preferences, click on the Advanced tab, and check the "Show Develop menu in menu bar" option. The Develop menu serves as a gateway to essential developer-centric tools and settings, including those related to WebGL.

Inspecting the WebGL Status : Once the Develop menu is accessible, click on it to reveal a dropdown list of developer-oriented tools and settings. Within the Develop menu, locate the "Experimental Features" section and ensure that the "WebGL 2.0" option is checked. This pivotal action confirms that WebGL is enabled on Safari, empowering the browser to seamlessly render 3D graphics and interactive content with precision and fluidity.

Testing WebGL Functionality : With WebGL enabled, it's beneficial to test its functionality to ensure that the browser can effectively render WebGL-powered content. Visit websites or applications that utilize WebGL for 3D graphics or interactive experiences. Engage with the content and observe the fluidity and visual richness of the WebGL-powered elements, confirming that Safari is successfully leveraging WebGL to enhance the browsing experience.

By following these steps, users can effectively verify that WebGL is enabled on Safari, ensuring that the browser is equipped to deliver visually stunning web content and immersive experiences seamlessly. This validation process serves as a pivotal checkpoint, confirming that Safari has embraced the creative prowess of developers and the captivating allure of WebGL-powered content, ensuring that users are immersed in a visually rich and dynamic online environment.

With WebGL successfully enabled and verified on Safari, users can embark on a captivating journey through the immersive realm of 3D graphics, interactive visualizations, and dynamic web content, all seamlessly rendered within the confines of the Safari browser. This transformation elevates the web experience, inviting users to explore a digital landscape teeming with creativity, innovation, and visually stunning content that captivates the senses and sparks the imagination.

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Save my name, email, and website in this browser for the next time I comment.

• Crowdfunding
• Cryptocurrency
• Digital Banking
• Digital Payments
• Investments
• Console Gaming
• Mobile Gaming
• VR/AR Gaming
• Gadget Usage
• Gaming Tips
• Online Safety
• Software Tutorials
• Tech Setup & Troubleshooting
• Buyer’s Guides
• Comparative Analysis
• Gadget Reviews
• Service Reviews
• Software Reviews
• Mobile Devices
• PCs & Laptops
• Smart Home Gadgets
• Content Creation Tools
• Digital Photography
• Video & Music Streaming
• Online Security
• Online Services
• Web Hosting
• WiFi & Ethernet
• Browsers & Extensions
• Communication Platforms
• Operating Systems
• Productivity Tools
• AI & Machine Learning
• Cybersecurity
• Emerging Tech
• IoT & Smart Devices
• Virtual & Augmented Reality
• Latest News
• AI Developments
• Fintech Updates
• Gaming News
• New Product Launches

5 Ways to Improve IT Automation

• What is Building Information Modelling

Related Post

Sla network: benefits, advantages, satisfaction of both parties to the contract, what is minecraft coded in, how much hp does a diablo tuner add, what is halo-fi, what is halo lock iphone, related posts.

Why Does Unity Not Work On Chrome

How To Enable Webgl In Chrome

How To Enable Webgl On Chrome

How To Use Unity In Chrome

How Do I Enable Webgl In Firefox?

What Experimental Features Should I Turn On In Safari

Why Doesn’t Chrome Support Unity Anymore?

What Coding Language Is Used For Games

Recent stories.

What is Building Information Modelling?

How to Use Email Blasts Marketing To Take Control of Your Market

Learn To Convert Scanned Documents Into Editable Text With OCR

Top Mini Split Air Conditioner For Summer

Comfortable and Luxurious Family Life | Zero Gravity Massage Chair

Fintechs and Traditional Banks: Navigating the Future of Financial Services

AI Writing: How It’s Changing the Way We Create Content

• Privacy Overview
• Strictly Necessary Cookies

This website uses cookies so that we can provide you with the best user experience possible. Cookie information is stored in your browser and performs functions such as recognising you when you return to our website and helping our team to understand which sections of the website you find most interesting and useful.

Strictly Necessary Cookie should be enabled at all times so that we can save your preferences for cookie settings.

If you disable this cookie, we will not be able to save your preferences. This means that every time you visit this website you will need to enable or disable cookies again.

Safari, JavaScript and WebGL extremely bad performance?

We're seeing the same issue in all our WebGL applications. It definitely worked in April 2021, since then without changing any code the Safari performance went from 60fps to 2fps.

Example scene built in unity (with a camera-texture since camera input is important for our AR applications): https://test.looc.io/forest/index.html

• Skip to main content
• Skip to search
• Skip to select language
• Sign up for free
• Português (do Brasil)

WebGL: 2D and 3D graphics for the web

WebGL (Web Graphics Library) is a JavaScript API for rendering high-performance interactive 3D and 2D graphics within any compatible web browser without the use of plug-ins. WebGL does so by introducing an API that closely conforms to OpenGL ES 2.0 that can be used in HTML <canvas> elements. This conformance makes it possible for the API to take advantage of hardware graphics acceleration provided by the user's device.

Support for WebGL is present in all modern browsers (see the compatibility tables below); however, the user's device must also have hardware that supports these features.

The WebGL 2 API introduces support for much of the OpenGL ES 3.0 feature set; it's provided through the WebGL2RenderingContext interface.

The <canvas> element is also used by the Canvas API to do 2D graphics on web pages.

Standard interfaces

• WebGLRenderingContext
• WebGL2RenderingContext
• WebGLActiveInfo
• WebGLBuffer
• WebGLContextEvent
• WebGLFramebuffer
• WebGLProgram
• WebGLRenderbuffer
• WebGLSampler
• WebGLShader
• WebGLShaderPrecisionFormat
• WebGLTexture
• WebGLTransformFeedback
• WebGLUniformLocation
• WebGLVertexArrayObject
• ANGLE_instanced_arrays
• EXT_blend_minmax
• EXT_color_buffer_float
• EXT_color_buffer_half_float
• EXT_disjoint_timer_query
• EXT_float_blend Experimental
• EXT_frag_depth
• EXT_shader_texture_lod
• EXT_texture_compression_bptc
• EXT_texture_compression_rgtc
• EXT_texture_filter_anisotropic
• EXT_texture_norm16
• KHR_parallel_shader_compile
• OES_draw_buffers_indexed
• OES_element_index_uint
• OES_fbo_render_mipmap
• OES_standard_derivatives
• OES_texture_float
• OES_texture_float_linear
• OES_texture_half_float
• OES_texture_half_float_linear
• OES_vertex_array_object
• OVR_multiview2
• WEBGL_color_buffer_float
• WEBGL_compressed_texture_astc
• WEBGL_compressed_texture_etc
• WEBGL_compressed_texture_etc1
• WEBGL_compressed_texture_pvrtc
• WEBGL_compressed_texture_s3tc
• WEBGL_compressed_texture_s3tc_srgb
• WEBGL_debug_renderer_info
• WEBGL_debug_shaders
• WEBGL_depth_texture
• WEBGL_draw_buffers
• WEBGL_lose_context
• WEBGL_multi_draw
• webglcontextlost
• webglcontextrestored
• webglcontextcreationerror

Constants and types

• WebGL constants
• WebGL types

WebGL 2 is a major update to WebGL which is provided through the WebGL2RenderingContext interface. It is based on OpenGL ES 3.0 and new features include:

• 3D textures ,
• Sampler objects ,
• Uniform Buffer objects ,
• Sync objects ,
• Query objects ,
• Transform Feedback objects ,
• Promoted extensions that are now core to WebGL 2: Vertex Array objects , instancing , multiple render targets , fragment depth .

See also the blog post "WebGL 2 lands in Firefox" and webglsamples.org/WebGL2Samples for a few demos.

Guides and tutorials

Below, you'll find an assortment of guides to help you learn WebGL concepts and tutorials that offer step-by-step lessons and examples.

A guide to variables, buffers, and other types of data used when writing WebGL code.

Tips and suggestions to help you improve the quality, performance, and reliability of your WebGL content.

A guide to using WebGL extensions.

A beginner's guide to WebGL core concepts. A good place to start if you don't have previous WebGL experience.

This example demonstrates the simple animation of a one-color shape. Topics examined are adapting to aspect ratio differences, a function to build shader programs from sets of multiple shaders, and the basics of drawing in WebGL.

A series of live samples with short explanations that showcase WebGL concepts and capabilities. The examples are sorted according to topic and level of difficulty, covering the WebGL rendering context, shader programming, textures, geometry, user interaction, and more.

Advanced tutorials

A detailed explanation of the three core matrices that are typically used to represent a 3D object view: the model, view and projection matrices.

A useful guide to how 3D transform matrices work, and can be used on the web — both for WebGL calculations and in CSS transforms.

• Khronos WebGL site The main website for WebGL at the Khronos Group.
• WebGL Fundamentals A basic tutorial with fundamentals of WebGL.
• Raw WebGL: An introduction to WebGL A talk by Nick Desaulniers that introduces the basics of WebGL.
• WebGL Academy An HTML/JavaScript editor with tutorials to learn basics of webgl programming.
• WebGL Stats A site with statistics about WebGL capabilities in browsers on different platforms.
• three.js is an open-source, fully featured 3D WebGL library.
• Babylon.js is a powerful, simple, and open game and 3D rendering engine packed into a friendly JavaScript framework.
• Pixi.js is a fast, open-source 2D WebGL renderer.
• Phaser is a fast, free and fun open source framework for Canvas and WebGL powered browser games.
• PlayCanvas is an open-source game engine.
• glMatrix is a JavaScript matrix and vector library for high-performance WebGL apps.
• twgl is a library for making webgl less verbose.
• RedGL is an open-source 3D WebGL library.
• vtk.js is a JavaScript library for scientific visualization in your browser.
• webgl-lint will help find errors in your WebGL code and provide useful info

Specifications

Browser compatibility, api.webglrenderingcontext.

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

api.WebGL2RenderingContext

Compatibility notes.

In addition to the browser, the GPU itself also needs to support the feature. So, for example, S3 Texture Compression (S3TC) is only available on Tegra-based tablets. Most browsers make the WebGL context available through the webgl context name, but older ones need experimental-webgl as well. In addition, the upcoming WebGL 2 is fully backwards-compatible and will have the context name webgl2 .

Gecko notes

Webgl debugging and testing.

Firefox provides two preferences available which let you control the capabilities of WebGL for testing purposes:

A Boolean property that, when true , enables a minimum capability mode. When in this mode, WebGL is configured to only support the bare minimum feature set and capabilities required by the WebGL specification. This lets you ensure that your WebGL code will work on any device or browser, regardless of their capabilities. This is false by default.

A Boolean property that, when true , disables all WebGL extensions. This is false by default.

• Compatibility info about WebGL extensions

WebGPU now available for testing in Safari Technology Preview

Dec 21, 2023

by Mike Wyrzykowski

WebGPU is a new standards-compliant API that enables high-performance 3D graphics and general-purpose computations on the Web. WebGPU programs are written in JavaScript but expose GPU functionality, allowing GPU computing to be used in Web content for the first time. Starting in Safari Technology Preview 185, WebGPU can be enabled for early testing and development.

To enable WebGPU, turn on the “WebGPU”, “GPU Process: DOM Rendering” and “GPU Process: Canvas Rendering” feature flags in the Feature Flags tab in Safari Preferences. If you don’t see the Feature Flags tab, you need to first check “ Show features for web developers ” in the Advanced tab.

Once you have WebGPU enabled in Safari Technology Preview 185, try out this example of WebGPU . It utilizes many of the best features of WebGPU.

WebGPU JavaScript API

The WebGPU API is accessed through JavaScript, similar to WebGL.

Creating a GPUDevice

In order to use WebGPU, a device must be created. Resources and pipeline state are created from a GPUDevice instance. To create a device with default limits and features which are supported on all devices supporting WebGPU, we can pass zero parameters to the invocations of requestAdapter and requestDevice .

Configuring a GPUCanvasContext

The GPUCanvasContext is an interface that allows you to configure how your content will be displayed in the corresponding HTMLCanvas element on the page.

Creating a GPURenderPipeline

A GPURenderPipeline or a corresponding GPUComputePipeline are used to configure the pipeline state of the graphics driver. This pipeline state is then used in a GPURenderPassEncoder or GPUComputePassEncoder as later illustrated.

Issuing draw calls

A GPURenderPassEncoder is created to send draw calls to the graphics driver. In the below example, we draw a simple triangle which contains three vertices. A GPURenderPassEncoder can also draw multiple instances of the same geometry or draw from an offset of a vertex buffer.

WebGPU Shading Language

WebGPU introduces WGSL, a platform independent shading language for the web. Here is an example of a WGSL shader source that would be passed in place of wgslSource in the above API call:

Try WebGPU and file bugs!

We’re very excited to have an early version of WebGPU and WGSL in the latest version of Safari Technology Preview. Please do try it out. Check out the public repository of WebGPU samples . And file bugs or issues you discover at bugs.webkit.org .

• Español – América Latina
• Português – Brasil
• Tiếng Việt
• Chrome for Developers

From WebGL to WebGPU

As a WebGL developer, you may be both intimidated and excited to start using WebGPU, the successor to WebGL that brings the advancements of modern graphics APIs to the web.

It’s reassuring to know that WebGL and WebGPU share many core concepts. Both APIs allow you to run small programs called shaders on the GPU. WebGL supports vertex and fragment shaders, while WebGPU also supports compute shaders. WebGL uses the OpenGL Shading Language (GLSL) while WebGPU uses the WebGPU Shading Language (WGSL). Although the two languages are different, the underlying concepts are mostly the same.

With that in mind, this article highlights some differences between WebGL and WebGPU, to help you get started.

Global state

WebGL has a lot of global state . Some settings apply to all rendering operations, such as which textures and buffers are bound. You set this global state by calling various API functions, and it remains in effect until you change it. The global state in WebGL is a major source of errors , as it is easy to forget to change a global setting. Additionally, global state makes code sharing difficult, as developers need to be careful not to accidentally change the global state in a way that affects other parts of the code.

WebGPU is a stateless API, and does not maintain a global state. Instead, it uses the concept of a pipeline to encapsulate all of the rendering state that was global in WebGL. A pipeline contains information such as which blending, topology, and attributes to use. A pipeline is immutable. If you want to change some settings, you need to create another pipeline. WebGPU also uses command encoders to batch commands together and execute them in the order that they were recorded. This is useful in shadow mapping for example, where, in a single pass over the objects, the application can record multiple command streams, one for each light's shadow map.

To summarize, as WebGL’s global state model made creating robust, composable libraries and applications difficult and fragile, WebGPU significantly reduced the amount of state that developers needed to keep track of while sending commands to the GPU.

Sync no more

On GPUs, it is typically inefficient to send commands and wait for them synchronously, as this can flush the pipeline and cause bubbles . This is especially true in WebGPU and WebGL, which use a multi-process architecture with the GPU driver running in a separate process from JavaScript.

In WebGL, for example, calling gl.getError() requires a synchronous IPC from the JavaScript process to the GPU process and back. This can cause a bubble on the CPU side as the two processes communicate.

To avoid these bubbles, WebGPU is designed to be completely asynchronous . The error model and all other operations happen asynchronously. For example, when you create a texture, the operation appears to succeed immediately, even if the texture is actually an error. You can only discover the error asynchronously. This design keeps the cross-process communication bubble-free and gives applications reliable performance.

Compute shaders

Compute shaders are programs that run on the GPU to perform general-purpose computations. They are available only in WebGPU, not WebGL.

Unlike vertex and fragment shaders, they are not limited to graphics processing, and can be used for a wide variety of tasks, such as machine learning, physics simulation, and scientific computing. Compute shaders are executed in parallel by hundreds or even thousands of threads, which makes them very efficient for processing large datasets. Learn about GPU compute and more detail in this extensive article about WebGPU .

Video frame processing

Processing video frames using JavaScript and WebAssembly has some drawbacks: the cost of copying the data from GPU memory to CPU memory, and the limited parallelism that can be achieved with workers and CPU threads. WebGPU does not have those limitations, making it a great fit for processing video frames thanks to its tight integration with the WebCodecs API.

The following code snippet shows how to import a VideoFrame as an external texture in WebGPU and process it. You can try out this demo .

Application portability by default

WebGPU forces you to request limits . By default, requestDevice() returns a GPUDevice that may not match the physical device’s hardware capabilities, but rather a reasonable and lowest common denominator of all GPUs. By requiring developers to request device limits, WebGPU ensures that applications will run on as many devices as possible.

Canvas handling

WebGL automatically manages the canvas after you create a WebGL context and supply context attributes such as alpha, antialias, colorSpace, depth, preserveDrawingBuffer, or stencil.

On the other hand, WebGPU requires you to manage the canvas yourself. For example, to achieve antialiasing in WebGPU, you would create a multisample texture and render to it. Then, you would resolve the multisample texture to a regular texture and draw that texture to the canvas. This manual management allows you to output to as many canvases as you want from a single GPUDevice object. In contrast, WebGL can only create one context per canvas.

Check out the WebGPU Multiple Canvases demo .

On a side note, browsers currently have a limit on the number of WebGL canvases per page. At the time of writing, Chrome and Safari can only use up to 16 WebGL canvases simultaneously; Firefox can create up to 200 of them. On the other hand, there is no limit on the number of WebGPU canvases per page.

Helpful error messages

WebGPU provides a call stack for every message that is returned from the API. This means that you can quickly see where the error occurred in your code, which is helpful for debugging and fixing errors.

Besides providing a call stack, WebGPU error messages are also easy to understand and actionable. The error messages typically include a description of the error and suggestions for how to fix the error.

WebGPU also allows you to provide a custom label for each WebGPU object. This label is then used by the browser in GPUError messages, console warnings, and browser developer tools.

From names to indexes

In WebGL, many things are connected by names. For example, you can declare a uniform variable called myUniform in GLSL and get its location using gl.getUniformLocation(program, 'myUniform') . This comes handy as you get an error if you mistype the name of the uniform variable.

On the other hand, in WebGPU, everything is entirely connected by byte offset or index (often called location ). It is your responsibility to keep the locations for the code in WGSL and JavaScript in sync.

Mipmap generation

In WebGL, you can create a texture's level 0 mip and then call gl.generateMipmap() . WebGL will then generate all the other mip levels for you.

In WebGPU, you must generate mipmaps yourself. There is no built-in function to do this. See the spec discussion to learn more about the decision. You can use handy libraries such as webgpu-utils to generate mipmaps or learn how to do it yourself .

Storage buffers and storage textures

Uniform buffers are supported by both WebGL and WebGPU and allow you to pass constant parameters of limited size to shaders. Storage buffers, which look a lot like uniform buffers, are only supported by WebGPU and are more powerful and flexible than uniform buffers.

Storage buffers data passed to shaders can be much larger than uniform buffers. While the spec says uniform buffers bindings can be up to 64KB in size (see maxUniformBufferBindingSize ) , the maximum size of a storage buffer binding is at least 128MB in WebGPU (see maxStorageBufferBindingSize ).

Storage buffers are writable, and support some atomic operations while uniform buffers are just read-only. This allows new classes of algorithms to be implemented.

Storage buffers bindings support runtime-sized arrays for more flexible algorithms, while uniform buffer array sizes have to be provided in the shader.

Storage textures are only supported in WebGPU, and are to textures what storage buffers are to uniform buffers. They are more flexible than regular textures, supporting random access writes (and reads as well in the future).

Buffer and texture changes

In WebGL, you can create a buffer or texture and then change its size at any time with gl.bufferData() and gl.texImage2D() respectively for instance.

In WebGPU, buffers and textures are immutable. This means that you cannot change their size, usage, or format after they have been created. You can only change their contents.

Space convention differences

In WebGL, the Z clip space range is from -1 to 1. In WebGPU, the Z clip space range is from 0 to 1. This means that objects with a z value of 0 are the closest to the camera, while objects with a z value of 1 are the furthest away.

WebGL uses the OpenGL convention, where the Y axis is up and the Z axis is towards the viewer. WebGPU uses the Metal convention, where the Y axis is down and the Z axis is out of the screen. Note that the Y axis direction is down in framebuffer coordinate, viewport coordinate and fragment/pixel coordinate. In clip space, the Y axis direction is still up as in WebGL.

Acknowledgements

Thanks to Corentin Wallez, Gregg Tavares, Stephen White, Ken Russell, and Rachel Andrew for reviewing this article.

I also recommend WebGPUFundamentals.org for a deep dive of differences between WebGPU and WebGL.

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License , and code samples are licensed under the Apache 2.0 License . For details, see the Google Developers Site Policies . Java is a registered trademark of Oracle and/or its affiliates.

Last updated 2023-09-19 UTC.

• Scripting API

Unity Manual

• Platform development
• WebGL development

WebGL performance considerations

In general, the WebGL A JavaScript API that renders 2D and 3D graphics in a web browser. The Unity WebGL build option allows Unity to publish content as JavaScript programs which use HTML5 technologies and the WebGL rendering API to run Unity content in a web browser. More info See in Glossary performance is close to native apps on the GPU, because the WebGL graphics API uses your GPU for hardware-accelerated rendering. The only exception is the slight overhead for translating WebGL API calls and shaders A program that runs on the GPU. More info See in Glossary to your OS graphics API (typically DirectX on Windows, OpenGL on Mac, and Linux).

On the CPU, Emscripten translates your code into WebAssembly, the performance of which depends on the web browser you’re using.

Following are the additional considerations that you must be aware of:

• The JavaScript language does not support multi-threading or SIMD.
• Any code that benefits from these features is likely to be slower than other code.
• Some engine parts are multi-threaded or SIMD-optimized and offer lower performance on WebGL. One example is mesh The main graphics primitive of Unity. Meshes make up a large part of your 3D worlds. Unity supports triangulated or Quadrangulated polygon meshes. Nurbs, Nurms, Subdiv surfaces must be converted to polygons. More info See in Glossary skinning The process of binding bone joints to the vertices of a character’s mesh or ‘skin’. Performed with an external tool, such as Blender or Autodesk Maya. More info See in Glossary , which is both multi-threaded and SIMD-optimized.

Tip: To learn how Unity distributes work to different threads on non-WebGL platforms, refer to the new timeline Profiler A window that helps you to optimize your game. It shows how much time is spent in the various areas of your game. For example, it can report the percentage of time spent rendering, animating, or in your game logic. More info See in Glossary in Unity.

WebGL-specific settings which affect performance

To improve performance, set Exception support to None in the Player settings for WebGL by expanding Other Settings > Stack Trace .

Profiling WebGL

WebGL supports the Unity profiler. Refer to the Profiler documentation to learn how to set it up.

WebGL content in background tabs

Your content continues to run when the canvas or browser window loses focus if one of the following options is enabled:

• Run in background in the Player settings for the Web platform
• Application.runInBackground

However, some browsers can throttle content running in background tabs. If the tab with your content isn’t visible, your content only updates once per second in most browsers. Note that this causes Time.time to progress slower than usual with the default settings, as the default value of Time.maximumDeltaTime is lower than one second.

Throttling WebGL performance

You might want to run your WebGL content at a lower frame rate in some situations to reduce CPU usage. For example, on other platforms, you can use the Application.targetFrameRate API to do so.

When you don’t want to throttle performance, set this API to the default value of –1. This allows the browser to adjust the frame rate for the smoothest animation in the browser’s render loop, and might produce better results than Unity trying to do its own main loop timing to match a target frame rate.

Note : For security reasons, Unity can’t query a browser for its frame rate. As a result, Unity assumes a display rate of 60 fps See first person shooter, frames per second. See in Glossary for all browsers and bases Application.targetFrameRate on that value.

WebGPU/WebGL performance comparison best practices

Introduction, ensure both apis use the same gpu, gpu verification, antialiasing, preferred color format, use equivalent depth/stencil settings, alpha blending, do not use preservedrawingbuffer, match resolutions, general: ensure equivalent content, sometimes it’s not you.

If you are developing a WebGPU variant of an existing WebGL application it’s natural to want to benchmark the two to determine either where performance needs to be improved or how much faster one is relative the other. There’s several easy-to-miss differences between how WebGL and WebGPU behave, though, that can lead to an innacurate comparisons if not taken into account.

This doc covers some simple considerations to take into account when comparing WebGPU and WebGL pages to ensure that you’re getting the most accurate, “apples-to-apples” picture of their performance.

Context and adapter creation

The first step for any WebGPU or WebGL-based page is going to be to get an adapter or context, respectively. It’s common for pages to use the defaults for these call:

Oops! You’ve already opened the door to an invalid comparison!

The primary issue with the above code is that in both cases it allows the underlying browers to determine which GPU will be used for the subsequent API calls. If you are on a device with only one GPU that’s not a problem, but many laptops have both an integrated and discrete GPU, and they frequently have significantly different performance! Furthermore, the internal logic the browser uses to choose a GPU can be different for each API. For example, Chrome will default to selecting a low-powered GPU for WebGPU if it detects that your laptop is on battery power, and a high-powered GPU if it detects that you’re plugged in. The same logic doesn’t exist for WebGL, which instead prefers to default to the GPU that is currently being used by Chrome’s compositor.

This can lead to situations where, for example, the WebGPU page can select the much more powerful discrete GPU while WebGL gets kicked to the integrated GPU. Unsurprisingly, the WebGPU content is likely to perform much better in this scenario! But that doesn’t indicate much about the API being used or the quality of your code calling it. Instead you’re mostly measuring the difference in performance between two different pieces of hardware, which probably wasn’t your goal.

To mitigate this, you should provide hints to the API about which GPU should be preferred during initialization. In both APIs this is done by specifying a powerPreference of either 'high-performance' or 'low-power' .

This dramatically increases your chances of getting the same GPU for both APIs! But it should be noted that this is merely a (fairly strong) hint. It’s possible that flags provided to the browser, graphics driver utilities, or other external factors could still override this.

That’s why if you are doing performance comparisons it’s best to confirm that both APIs are using the same device by logging the GPU information they report to the page or console.

It’s important to note that the strings given by both of these APIs are not directly comparable! The WebGPU strings are likely to (intentionally) be more terse and higher level. Your best bet is to visually inspect them and gauge whether or not you think they refer to the same device. At the very least if they both show a different vendor then you can be sure that they’re not using the same device!

In Chrome you can increase the details returned in the adapter info by navigating to about:flags and enabling the “WebGPU Developer Features” flag. This will provide more complete strings from the driver that can make it easier to compare. You shouldn’t expect that flag to be set on user’s devices, though, so don’t write apps that depend on it.

Canvas configuration

Once you’ve ensured you’re comparing with the same GPU, the next thing to pay attention to is the defaults for your canvas configuration. This is an area where WebGL and WebGPU differ significantly in their approaches, with WebGL creating and managing a default framebuffer for you which silently handles your color buffer, depth buffer, antialising resolution, and more. WebGPU, on the other hand, leaves the responsibility for much of that in your hands.

This means it’s easy to accidentally have your WebGL framebuffer performing more work than your realized.

In WebGL, if you don’t explicitly specify otherwise the default framebuffer will be antialiased. In contrast, the textures provided by a WebGPU canvas context are always single sampled.

In order to perform antialiasing in WebGPU you have to explicitly create multisampled color and depth textures, bind them as render pass targets, and bind the canvas’ current texture as the color resolve target. If you are already doing this work then great! You can leave the WebGL default in place. Otherwise you should explicitly disable antialiasing on the WebGL context to ensure that it doesn’t need to do additional rasterization work compared to WebGPU.

WebGL handles many aspects of the default framebuffer opaquely, and that includes choosing an optimal format for the device. WebGPU, on the other hand, requires you to select a texture format for the canvas-provided textures. The WebGPU spec guarantees that both 'bgra8unorm' and 'rgba8unorm' will work on any device, but every device also has a “preferred format”, which can be queried by calling navigator.gpu.getPreferredCanvasFormat() . This is the format you should always use when comparing performance between WebGL and WebGPU (or, really, any time you’re using WebGPU)!

The consequence of not using the preferred format is that on some systems (for Chrome it’s Android and Mac specifically) an extra texture copy will be needed before the rendered image can be displayed on the page. This eats into your available fillrate and can result in lower performance relative to WebGL.

WebGL contexts are created with a depth buffer but no stencil buffer by default, controlled using the depth and stencil booleans during context creation. WebGPU does not automatically handle creation of depth/stencil textures for you, but instead requires you to create one manually and provide it to the GPUDepthStencilAttachment when beginning a render pass.

Whether or not your application needs a depth or stencil buffer is app-specific, but if your app doesn’t require them ensure that you explicitly set depth and/or stencil to false when creating the WebGL context.

Conversely, if a depth/stencil buffer is used in WebGL ensure that you are passing an equivalent WebGPU depth/stencil texture to the appropriate render passes.

Unfortunately the WebGL spec is unclear on exactly what format of depth/stencil buffer will be allocated , it merely says that any depth buffer will be at least 16 bits and any stencil buffer will be at least 8 bits. You can query the exact precision by calling gl.getParamter(gl.DEPTH_BITS) and gl.getParamter(gl.STENCIL_BITS) . In Chrome, at least, this is very likely to be a GL_DEPTH24_STENCIL8_OES renderbuffer (even if stencil wasn’t explicitly requested, as a compatibility workaround.)

The equivalent WebGPU depth/stencil format would be a 'depth24plus-stencil8' texture, though you can use a 'depth24plus' texture if no stencil is required and 'stencil8' if no depth is required.

Regardless of the format used, don’t enable depth or stencil operations in your WebGPU render passes if the WebGL context does not explicitly enable the same.

Both WebGL and WebGPU have the option of specifying that the canvas be alpha-blended with the rest of the page, which can have some performance implications. The defaults for each API are different, though. In WebGPU the default behavior, specified through the alphaMode canvas configuration option , is 'opaque' , which does no blending with the page but might incur an extra step to clear the alpha channel on some platforms. In WebGL the default behavior is to do premultiplied alpha blending with the page, which is specified through a combination of the alpha and premultiplied booleans during context creation.

Whether you use alpha blending for the canvas or not is up to your application, but it should be explicitly stated for both APIs to ensure equivalent workloads.

Do not use { alpha: true, premultiplied: false } with WebGL when doing performance comparisons, as there is no equivalent WebGPU canvas blending mode.

The preserveDrawingBuffer option for WebGL contexts does not have an equivalent mode in WebGPU, and thus should be avoided when doing performance comparisons. It defaults to false so as long as you avoid setting it or explicitly set it to false you’re fine.

If preserveDrawingBuffer -like behavior is required for your app to perform correctly it must be emulated in WebGPU by rendering to an intermediate color target without clearing each frame. (Use loadOp: 'load' in the render pass GPURenderPassColorAttachments ) This texture then need to be manually copied to the canvas’ current texture each frame.

A surprisingly common issue I’ve seen as I’ve looked at a variety of WebGL vs. WebGPU comparisons is not running the content being compared at the same resolution. Sometimes this may be due to a quirk of the page layout: If one version of the page has slightly longer text, for example, it may leave less room for the canvas and thus cause it to render at a reduced resolution. I’ve also heard of cases where one version of the page takes the devicePixelRatio into account while the other doesn’t, which could lead to a 2-3x difference in resolution!

Differences in resolution can also lead to differences in aspect ratio for the page’s virtual cameras, which can change how much geometry is in frame, further skewing the results.

Something to consider is that the resolution that WebGL and WebGPU render at is independent of the size of the content on the page. The rendered results will always scale up or down to fit into the canvas, even if that results in some image stretching. That’s generally OK for performance comparisons, though, so consider setting the canvas to a fixed size for both pages.

Of course, there’s bound to be some differences between an otherwise equivalent WebGL and WebGPU app, otherwise why bother porting it? For example, if a WebGPU app moves what was previously CPU work to a compute shader, that will definitely have a performance impact! In general, though, to get the best sense of how those intentional changes have impacted your performance you want to reduce as many other variables as you can.

This means obvious things like using the same resources in both, keeping instance and light counts the same, viewing from the same camera angles, etc. Unless the goal is to show, for example, that the WebGPU app can handle XX% more lights at the same performance. In all cases you want to try to isolate the variable you want to highlight as much as possible from other potential differences.

Having said all that, sometimes you may do everything you can to make the workloads equivalent and still find that the WebGPU code is slower than expected. (It’s supposed to be the new, fast thing, right?) It’s possible you’ve just hit a poorly optimized path in our implementation! WebGPU, as of this writing, is still relatively new so it’s expected that there’s some wrinkles that’ll show up. And we want to hear about it when you find them! File bugs at https://crbug.com telling us about the behavior you are seeing. We’ll be able to help out best if you can also include live links that demonstrate the problem (and access to the source code behind it is always a huge plus!)

Good luck in your future porting efforts, and thanks for helping make WebGPU even better through your feedback!

WEBGL - Question about grass and performance (with Safari issues)

Hello, I need to create a project in WebGL 2.0 with a lot of grass. The main problem I have, is performance.

As soon as I add a few grass zones, my performance drops drastically (below 60fps on Chrome, and below 5/10 fps on Safari). At this point, I have a question: how I can achieve a realistic field of grass, without to have very low FPS?

Also, another question: why on Safari everything runs poorly? Do I need to change some options in Unity in order to have a better frame rate?? Thank you.

I’m using Unity 2022.2.10 - URP Shader Pipeline.

Regarding Safari poor performance:

• it runs on a Mac, they have traditionally poor game performance
• Apple does not prioritize WebGL since it is seen as a threat to their app stores

You are not going to have a realistic field of grass on WebGL.

So right now, it’s impossible to make games on web, that run also on Mac devices?

But what if I have to achieve the most closest thing to that? There should be a way to achieve a garden and put it on a browser… with grass and trees.

Yes. It’ll look more like this though:

https://codesandbox.io/s/3rk1o6 https://webglsamples.org/field/field.html https://github.com/spacejack/terra

These examples use shaders, these could probably be replicated in Unity. But they also look abstract and repetitive, the third one looks best by far but it also wouldn’t run for me in Chrome.

These examples are about what I would expect at best in a WebGL app. Keep in mind that even though WebGL runs on Desktop with high-end GPUs, the graphic fidelity is limited to what mobile devices could render roughly 10 years ago. And these demos did not have to account for much else than some basic terrain rendering either.

Web Browser Grand Prix VI: Firefox 6, Chrome 13, Mac OS X Lion

Chrome 13, Firefox 6, Safari 5.1, and Mac OS X Lion (10.7) have all emerged since our last Web Browser Grand Prix. Today, we test the latest browsers on both major platforms. How do the Mac-based browsers stack up against their Windows 7 counterparts?

Performance Benchmarks: HTML5 Hardware Acceleration And WebGL

• Page 1: Crowning A Web-Browsing King In Windows 7 And OS X
• Page 2: The Contenders
• Page 3: A Spotlight On Lion's Safari
• Page 4: Hardware And Test Setup
• Page 5: Performance Benchmarks: Startup Time
• Page 6: Performance Benchmarks: Page Load Time
• Page 7: Performance Benchmarks: JavaScript, DOM, And CSS
• Page 8: Performance Benchmarks: Flash, Java, And Silverlight
• Page 9: Performance Benchmarks: HTML5
• Page 10: Performance Benchmarks: HTML5 Hardware Acceleration And WebGL
• Page 11: Efficiency Benchmarks: Memory Usage
• Page 12: Efficiency Benchmarks: Memory Management
• Page 13: Reliability Benchmarks: Proper Page Loads
• Page 14: Conformance Benchmarks: HTML5, CSS3, JavaScript, And DOM
• Page 15: Placing Tables
• Page 16: Analysis Tables
• Page 17: Two Winners: One In Windows 7, One in OS X

Psychedelic Browsing

The scores and placing of this benchmark are similar to results generated for WBGP5: Firefox, IE9, Chrome, Opera, and Safari. The difference is that Chrome 13 earns a little over 1.5 points more than version 12. On Mac OS X, Safari's weak score of eight points rockets up to more than 1800, allowing Apple's browser to come in less than two points behind Microsoft's Internet Explorer in Windows.

Hardware Acceleration Stress Test

Only browsers supporting HTML5 hardware acceleration achieve good scores in this benchmark. In fact, they max it out. First place on Windows is a tie between Firefox 6 and Internet Explorer 9. Second place goes to Chrome, followed closely by Opera, with the Windows version of Safari 5.1 falling behind in last place.

In OS X Lion, Safari 5.1 maxes out the benchmark at 60+ FPS, creating a cross-platform tie for first with the Windows versions of Firefox 6 and IE9. Opera lands in second place on OS X, with Chrome and Firefox in the distance. 

For those wanting to utilize HTML5 hardware acceleration today, Firefox 4+ and IE9 are still the only options for Windows users, while Safari is the one and only hope on a Mac. 

We've completely changed the lineup of WebGL benchmarks. We replaced the Kronos Particles test with a variation from ThoughtsInComputation. Its version has more going on, which lowers the frame rate so the test cannot be maxed out. It also has the option of adding more particles and other graphics, ensuring that this test is scalable for some time to come.

Stay On the Cutting Edge: Get the Tom's Hardware Newsletter

Get Tom's Hardware's best news and in-depth reviews, straight to your inbox.

The WebGL Aquarium from the Chrome Experiments site is being replaced with WebGL Solar System for much the same reason (WebGL Solar System is more taxing and configurable than WebGL Aquarium).

Finally, we added a Mozilla-created WebGL variant of the famous FishIE HTML5 hardware acceleration test from the IE Test Drive site. All three tests yield lower frame rates, are configurable, have higher FPS limits, and provide steadier FPS counts.

ThoughtsInComputation Particles

Unlike the Khronos Particles benchmark, the ThoughtsInComputing variant puts Firefox ahead of Chrome by a significant margin: 62 FPS versus 39. The same result is seen in Mac OS X. However, Firefox only manages to produce 46 FPS on the Apple platform. 

WebGL Solar System

On Windows 7, Chrome 13 beats Firefox 6 in the WebGL Solar System demo, 24 FPS to 16. The placing is reversed on OS X, with Mozilla besting Google by less than two FPS.

WebGL FishIE

Chrome 13 regains its lead in the WebGL version of the FishIE test, beating Firefox 6 by 10 FPS. The punishment gets worse for Mozilla on Mac OS X, where Chrome beats Firefox 53 FPS to 27.

The edge in WebGL performance goes to Chrome 13 in Windows 7 and Firefox 6 in OS X Lion.

Current page: Performance Benchmarks: HTML5 Hardware Acceleration And WebGL

Bye Bye, AI: How to turn off Google's annoying AI overviews and just get search results

Firefox user loses 7,470 opened tabs saved over two years after they can’t restore browsing session

Asus ROG Ally mentioned in latest SteamOS 3 beta release notes — Valve's platform expansion ambitions take shape

• ne0nguy The first chart says "higher is better" for the load time Reply
• adamovera ne0nguyThe first chart says "higher is better" for the load timethank you, workin' on it Reply
• SteelCity1981 Chrome is the best browser out there right now. While FireFox maybe more popular then Chrome is, Chrome has shown why it is the best browser out today. If you haven't used Chrome yet it's def worth a look. Reply
• soccerdocks The reader function in safari actually looks really nice. Although I'd never use Safari on principle. I hope other browsers implement a similar function. Reply
• mayankleoboy1 why does firefox(6/8/9) performa so horribly on the IE9 maze solover test? chrome13 completely obliterats it. and firefox 8/9 are still a memory hog. not really surprised by poor show of ie9. moat updates it gets are "security updates". Reply
• tofu2go Being on a Macbook with only 3GB of memory, memory is the most important factor for me. I open a LOT of tabs and I keep them open for long periods. For awhile I used Chrome, but recently switched to Firefox 6 and saw my memory utilization drop by well over 1GB. Granted with Firefox I was able to do something I am not able to do in any other browser, I could group my tabs into tab groups. I believe this allows for more efficient memory management, i.e. only the current group uses much memory. Not having done any tests, this is pure speculation. All I know is that I'm seeing MUCH lower memory usage with Firefox on OSX. Despite what this article would suggest. Reply
• @soccerdocks Yeah? And exactly what principle would that be? Reply
• andy5174 @Google: Bring back the Google Dictionary , otherwise I will use Bing Search, Firefox and Facebook instead of Google Search, Chrome and G+. Reply

Firefox 6 comes in third for both OSes, representing a major drop from Firefox 5.

• LaloFG I keep Opera, more memory used and time to load pages is nothing when it load pages correctly; and the feeling in its interface is the greater. Reply
• View All 92 Comments

Most Popular

SharedArrayBuffer is Enabled but Features like Gallery View, Noise Cancellation, and Blur Background are Not Working

Description During our testing phase, one of our testers encountered an issue where all videos rendered black except for one. Out of 20+ testers, he is the only one experiencing this issue.

After investigating potential hardware-related causes, we discovered that the SharedArrayBuffer is enabled on his device (confirmed using typeof SharedArrayBuffer === 'function' and crossOriginIsolated ), but features like Gallery View, Noise Cancellation, and Blur Background are not working.

Browser Console Error Warnings:

• WebGL: INVALID_OPERATION: uniform1i: location is not from the associated program.
• WebGL: INVALID_OPERATION: uniform4f: location is not from the associated program.
• WebGL: too many errors, no more errors will be reported to the console for this context.
• Please see below screenshot for console warnings .

Screenshots:

• imgur.com/a/Vz22uFV
• imgur.com/a/FPLplDM

Which Web Video SDK version? VideoSDK 1.11.10 for Web

Device: MacBook Pro (A1708 (EMC 3164))

• OS: Ventura v13.6.6
• Browser: Chrome/Safari
• Browser Version: 126.0.6478.183/16.6 (18615.3.12.11.2)

Additional context You can review the latest session we conducted: Participant with the issue: Dmitry M. 110 0054 6919 mjpHIt2IQtumJz4g+VL76A==

Hey @mark.eubans

Thanks for your feedback.

It could be due to insufficient device performance.

However, in the latest version (1.12.0), we have made some optimizations that allow devices with lower performance to support gallery view( 2 videos).

Hello @vic.yang ,

We will update the SDK to the latest version. However, is there a way to determine whether a device is low performance even if the SharedArrayBuffer is enabled?

Aside from the following code, which returns true: typeof SharedArrayBuffer === 'function' && window.crossOriginIsolated

Thanks, Mark

is there a way to determine whether a device is low performance

We use navigator.hardwareConcurrency to detect the number of CPU cores. If the number of cores is less than 4, it’s considered a low-performance device.

Got it, @vic.yang . I will apply the changes you recommended and will update here if that fixes the issue.

Thank you, Mark

Hi @vic.yang ,

I spoke with the tester experiencing the issue, and he reported that when he entered navigator.hardwareConcurrency in his browser’s console, the output was 4. Following this, we asked the other testers to check the number of CPU cores on their devices using the code you suggested.

To our surprise, a few other testers who haven’t encountered any issues have the same number of CPU cores as the tester with the problem and are also using the same model of MacBook Pro. The only difference appears to be their OS version.

Given this, it seems we can’t rely on navigator.hardwareConcurrency to determine whether a device is low-performing. Additionally, you mentioned in your last comment that the value needs to be less than 4, but the tester’s device has exactly 4 CPU cores. Is there any other method we can use to determine if a device doesn’t fully support the Zoom Video SDK, even when SharedArrayBuffer is enabled?

Thanks for sharing the detailed information with us.

To confirm the cause of this issue, could you please check the return values of these two methods?

Related Topics

Address: 4995 Stevens Creek Blvd Santa Clara, CA 95051

Hours: Monday – Friday 8:30am – 6:00pm

Phone:   408-244-2793 Email:   [email protected]

Safari Kid of Santa Clara, CA

Welcome to safari kid.

At Safari Kid, we believe childhood should be celebrated! Our proprietary preschool curriculum takes inspiration from a mix of both traditional methods (Montessori, Reggio Emilia, Waldorf) and reflects current brain research on early childhood development. This has resulted in a focus on the whole child, in which we offer the perfect balance of learning and play. Our daycare and preschool programs are carefully developed to ignite curiosity and encourage lifelong learning, but it doesn’t end there! We also offer a well-rounded after-school program for children in kindergarten through 8th grade, which provides a combination of valuable academic support and engaging extra-curricular enrichment.

Allow us to help turn your child’s Potential into Possibilities at Safari Kid Santa Clara.

Programs Offered

After School – TK to 6th grade

Our Programs

• After School
• Summer Camp (TK to 6th grade)

After a tough day at work, Safari Kid parents feel comforted knowing their child has not only successfully completed their homework but also enjoyed learning something new! Safari Kid offers a comprehensive After School Program. We offer structured learning and tutoring coupled with a diverse choice of extracurricular activities. Our Safari Kid After School Program offers daily help with schoolwork but also provides supplemental mathematics and English Language Arts lessons that align directly with Common Core Standards. While academic learning is our primary goal, we also ignite interest beyond the core subjects through exciting enrichment activities that promote a love for new learning. Depending on demand, centers offer such enrichment classes as creative writing, public speaking, chess, robotics, visual arts, and performing arts. Students participating in Safari Kid’s After School Program consistently test above grade level, and many earn awards for academic achievement. We’re so proud of our Safari Kids and excited to be a part of their amazing growth!

Learn more about our After School Program!

Meet the Staff

Director & Owner

Ms. Ratnamala

Preschool director.

PreK Teacher

Ms. Vaishali

Prek teacher aide.

ASP Teacher

Ms. Deepika

Tk & asp teacher.

Ms Vidya Gopidas

Director & owner.

Schedule a Tour

Explore other programs offered by safari kid.

Safari Kid is a Global Chain of Preschools and After School Programs, founded by Ms. Shy Mudakavi in the heart of Silicon Valley in Newark, California. Over fifteen years, 35,000 children going through the program have shown consistent excellence in elementary and middle schools.

Privacy Policy

Connect With Us

Elderly Iranians Feel At Home At Noor Active Living in Santa Clara

By Julie Ershadi

Mahin Afkhami worked for an affiliate of Iran’s information and tourism ministry in the 1970s when the Revolution broke out. She and her husband, who had four children studying at universities in the U.S., found themselves unable to send them money to apply for green cards. The couple traveled west to sort out the status of their children’s visas, in what they believed would be a brief trip. They ended up leaving behind everything they had in Iran: their belongings, their wealth, and life as they knew it.

That was 38 years ago. Today, like the hundreds of thousands of Iranians who lived through the revolution and moved abroad, Afkhami speaks proudly of the efforts she made to rebuild her life and ensure her children’s success. Yet as she has advanced in years, she has made the decision to move to an assisted living facility rather than rely on her offspring.

Unlike many elders in the Iranian expatriate community who live with their adult children, Afkhami – who shies away from disclosing her age – is a resident of Noor Active Living , an assisted living facility located in Santa Clara , California. The idea behind Noor is to provide an environment that would be familiar to an Iranian population of patients, who often feel isolated receiving care outside of their home country and away from their families.

“My children want me to go and live with them, but I refuse,” she says in a recent afternoon. “I would be interrupting their lives. They come to visit me and I go over there, but I’d rather have my privacy and live here.”

Noor Active Living was founded with the purchase by a group of philanthropists of an existing assisted living center in need of major renovations in 2009. The idea was to create a place for elderly Iranians in the United States, based on the Kahrizak Charity Foundation , a nonprofit that provides care and a living environment for the elderly and handicapped in Iran.

The driving force at Noor is its executive director, Nazila Safari, a medical doctor in the U.S.  and Iran. Like virtually all of the residents and staff at Noor, Safari is an Iranian immigrant who had to start over in the United States.

Inside the Noor facility, the walls are decorated with calligraphy and traditional paintings. A small study contains a library of books in Persian , including War and Peace in translation, a book on Afghan cuisine , history books, and poetry. On all the floors are authentic Persian rugs , donated by one of the center’s patrons.

In the dining hall, the Iranian-born chef prepares a lunch of ghormeh sabzi (a herb-based stew) for the 12 residents and staff members. Even ta’arof , the Iranian form of etiquette, is present, as when the site manager invites a visiting reporter to stay for lunch.

Outside is a patio lined with persimmon trees and palm fronds. There, accompanied by three caretakers and another resident, Afkhami tells her story of leaving Iran and coming to the United States. She produces an issue of Kayhan International , dated June 3, 1976. Page 3 features her promotion to deputy director for technical and planning affairs at the Tourism Facilities Compan  of Iran.

The group is seated at a patio table spread with Iranian tea, a box of gaz nougat  (candy) fresh from Esfahan , and other traditional snacks. Everyone exchanges knowing glances and nods somberly as Afkhami describes how hard it was to rebuild her and her family’s lives from the ground up.

“I came here with just one small suitcase of things for myself because I didn’t have plans to stay,” she says. “But things got worse. Me and my husband were both in good positions over there, so we would’ve been killed. We never went back.”

“The children were working, going to school, and had a lot of expenses,” she recalled. “It was just the six of us working. Hard.”

Noor’s executive director Safari qualified as a doctor in Iran. But when she came to the United States 22 years ago, her degree was not recognized, and she had to attend U.S. medical school to continue her practice. While in school, she took a job as a live-in nurse with an elderly couple.

“At that time, I didn’t have anybody here,” she says. “So they became my parents, my grandparents, my whole family.”

Alone in a foreign country, she developed a close bond with the family that would change the course of her life.

“Their kids moved out,” she recalls. “I got married and took the elderly woman with me until I could find a place to put her. I noticed all of these assisted living places. I was looking for which one would give her as much love and support as I was giving her.”

It was during her search for a care facility that Safari discovered a pressing situation: here and there, solitary elderly Iranians living in facilities where they related to no one. “There would be one or two Iranians. When they would see me, they would say, ‘Oh my God, you speak Farsi ! Nobody understands me here, I don’t like the food – this is not good!’ It was bothering me,” she says.

Safari started going to assisted living homes in the little free time she had between work and medical school. She wanted to spend time with these elderly Iranians who had been alone up until then. She would sit with them at the care facilities where they lived, translate their words when necessary for the nurses, and spend time with them when their children weren’t available.

As she became more deeply involved in the field of elderly care, Safari helped to open a Sunrise Senior Living branch in Sunnyvale , California, a town adjacent to Santa Clara. According to the company’s website, Sunrise operates internationally with 315 facilities in the United States, Canada and the United Kingdom .

Opening the Sunnyvale branch got Safari noticed by a group of directors hoping to start their own assisted living community, a not-for-profit facility created with the needs of elderly Iranians in mind. They asked her to help open Noor in 2009, and she agreed. She supervised renovations on the building that the group had acquired, but declined to run the facility, asking them instead to find someone else as she pursued her own professional activities.

After the completion of renovations in 2011, the facility sat unused for two years while the board searched for a substitute for Safari. They approached her again, this time with success. Safari has been director of Noor Active Living since 2013.

As a not-for-profit organization, Noor relies on donations from board members and community groups, as well as the fees charged to its residents. These funds cover expenses, and do not earn a profit for Safari and her staff, which is composed almost entirely of recent Iranian immigrants. The overarching aim, they say, is the respect, comfort and longevity of their patients, who have traveled so far and, in many cases, given up a great deal in the face of political turmoil in Iran.

“They had their independence, their house, their job, their respect in Iran,” Safari says. “They were looking forward to retiring there, going to the supermarket and speaking their own language, negotiating all of that. All of a sudden, they’re an immigrant, they’re brought to a new place where they can’t go anywhere or even speak the language.”

Chewing on gaz and sipping Iranian tea, Noor’s staff members echo the same sentiment that Safari described: what they do is more than a job – it is the love and care of the elderly members of their community, who are living thousands of miles away from the place they all call home. Afkhami, for her part, speaks warmly of the life she lives at Noor.

“We had everything over there,” she says, remembering her life in Iran before the revolution. “Now, this is the best place I could be. It is home.”

More from KayhanLife

Iran Dismisses European Calls for Restraint Amid Mideast Tensions

War Is Not in Anyone’s Interest, UK PM Tells Iran’s Pezeshkian

Islamic Republic Faces Challenges As It Prepares Response to Haniyeh Killing

Saman Soltani, Iranian Kayaker on Olympics Refugee Team, Leaves Games Full...

Iranian Women Athletes Win Medals For Taekwondo In Paris 2024 Olympics 

US Publicly Announces Submarine Move to Middle East Amid Israel-Iran Tensions

• [Kayhan Life Privacy Policy]

Privacy Overview