6,762 questions
3
votes
0
answers
66
views
WebGL canvas `toBlob()` result shows glitched color spots not seen on the canvas (cause: invalid pixel value for premultipliedAlpha)
In the below code snippet, I draw a texture on a canvas on the left, and then call canvas.toBlob() and display the result in an <img> on the right. The resulting image has a cyan glitchy spot:
...
- 1,585
Advice
0
votes
0
replies
60
views
Webgl Threejs canvas performance optimization
Hi guys i am trying to make a website with 3d model in it and you can apply patterns designs texts stickers on the model i am doing it with canvas atlas which is every assets renders inside the oen ...
- 37
0
votes
0
answers
116
views
React Three.js: "Error creating WebGL context" even though WebGL works on https://get.webgl.org/
I'm developing a hero section for my React portfolio that includes a 3D model rendered with Three.js via @react-three/fiber.
However, when the component loads, I see this error in the browser console:
...
1
vote
1
answer
99
views
PlayerPrefs won't update between simultaneous players
I am currently developing a WebGL app with Unity and using PlayerPrefs to try and make it so that a unique user id is generated for a player and used to connect to a remote lobby system.
The problem I'...
- 45
2
votes
0
answers
98
views
PyQt6 QWebEngineView 3D Plot Fail To Render With Large Data
I'm working on an antenna 3D polar plot program which need to render real-time plot.
Things I'm using:
Python 3.11.9
PyQt6 6.9.1
PyQt6-WebEngine-Qt6 6.9.2
plotly 6.3.1
Issue:
The code can generate ...
- 21
1
vote
0
answers
84
views
Three.js - DOF not working with point clouds (THREE.Points)
I'm trying to implement a Depth of Field (DOF) effect in a Three.js scene that includes a point cloud rendered using THREE.Points. I've based my implementation on these official examples:
https://...
- 11
0
votes
0
answers
30
views
in webgl how to display two quad's at a same time both with their own position?
Not able to see both rect and trap panel at a same time?Individually both are render with their proper position worldX but both at a same time with loop not.
i have this in editor.tsx =>
const ...
- 1
3
votes
1
answer
143
views
WebGL is disabled error when opening bing maps with python selenium?
i try to open bing maps using python selenium with this code:
import os, sys
from selenium import webdriver
from selenium.webdriver.chrome.options import Options
from selenium.webdriver.chrome.service ...
- 1,565
0
votes
0
answers
60
views
WebGL context lost error on using two canvases on different pages
I recently started using WebGL, learning 3D on the web.
My current issue is as follows:
I have two pages, a home page and an about page. I have an Earth Model on the home page, rendering using the ...
0
votes
0
answers
58
views
Three.js not rendering correctly when canvas has display: none
I'm using MediaPipe to apply face blendshape scores to a 3D avatar's morph targets in Three.js.
The avatar is rendered into a custom canvas element, which is explicitly passed into WebGLRenderer like ...
1
vote
1
answer
109
views
Blur or antialias edges of rendered polygon in WGSL shader without intermediate rasterization
I'm rendering a 3D-polygon on top of a given background (a pre-rendered image). The polygon is arbitrary: I just have its vertices (as a triangle strip or indexed triangles) passed via buffer. It ...
- 1,127
-1
votes
1
answer
54
views
How can I turn a rectangular region of my webage into a WebGL texture?
I have wanted to do an "Apple Liquid Glass" or refractive glass type effect on my website since before "Liquid Glass" was even a thing. I've designed my site to lean into 3D ...
- 129
7
votes
2
answers
344
views
Problem rendering fullscreen/fixed canvas in iOS safari
I'm rendering multiple WebGL "scenes" with one context using a single canvas element that is fullscreen and with a fixed position
The page contains several div elements and I use their ...
- 378
0
votes
0
answers
46
views
Why aren't my instanced elements rendering?
There seems to be no errors which popup, even with GL.getError():
const Canvas = document.getElementById("game_ui");
Canvas.width = window.innerWidth;
Canvas.height = window.innerHeight;
...
- 11
1
vote
0
answers
80
views
How to reliably read depth value from FBO using gl.ReadPixels?
I'm trying to read a depth value from a FBO through gl.readPixels.
const canvas = document.getElementById("glcanvas");
const gl = canvas.getContext("webgl2");
const width = 64;
...
- 2,416
0
votes
1
answer
124
views
PIXIJS v8: "Uniform type undefined is not supported" when passing float array uniform to a custom shader
I’m on PixiJS v8.1 (WebGL2) + TypeScript, trying to pass five RGB colors as a flat float[] into my fragment shader—but I keep getting:
Error: Uniform type undefined is not supported. Supported uniform ...
0
votes
0
answers
60
views
Three.js shadow anomaly. Appears some dark blur on detail
I'm new in three.js and i don't know how but when i'm using shadows with my model it gives me some anomaly to different details.enter image description here
Like on this image . I have the directional ...
1
vote
1
answer
60
views
Threejs EffectComposer optimization
I'm building a Three.js viewer for a static building model using postprocessing and n8ao. Since the model doesn't animate, I want to render only once when the user stops moving the camera — not every ...
- 473
2
votes
1
answer
84
views
webgl canvas with shader not filling screen
how do I fill the full canvas with the full webgl shader layer? The canvas is filling the full window width and height, but the webgl shader layer is stuck to the top right quadrant of the screen at ...
- 209
0
votes
0
answers
30
views
WebGlRenderTarget's content incorrect behaviour
i’m trying to make interactive screen of TV by using webGlRenderTarget as a screen texture, i created the second scene and camera, but nothing works properly. Despite it actually rendering on the ...
- 1
0
votes
0
answers
144
views
Unable to get WebGL GPU support in GCP CloudRun container using Playwright/Chromium
I'm trying to deploy a container to Google CloudRun which lets me use WebGL which is GPU hardware-accelerated.
I have the following front-end code (using node) to initialize WebGL and query its vendor ...
- 143
3
votes
1
answer
91
views
Ambiguous information about WebGL clip space
I am reading about WebGL clip space, I think it basically should mean the same thing as coordinate system. The same site specifies ambiguous, information.
In WebGL basics is specified left hand system,...
- 2,417
1
vote
1
answer
176
views
Open Layers WebGLTile GLSL "Hello World" Example
I'm using OpenLayers for a React project and everything is going very well. I'd like to extend the WebGLTileLayer class to eventually be able to apply GLSL to web tiles (for raster smoothing, ocean ...
0
votes
0
answers
59
views
How to fix Arabic script in Neo4j visualization library
I’m using the Neo4j Visualization Library to display Arabic text, but the letters are rendering left‑to‑right (instead of right‑to‑left) and appear disconnected. See image below. Has anyone ...
- 1,083
0
votes
0
answers
37
views
Trouble converting between GameObject space to Joint configuration space for FABRIK algorithm Inverse Kinematics
Given a mouse click, I am trying to use the FABRIK inverse kinematics algorithm to figure out the best joint orientation for a robot arm such that the end effector is as close as possible to the ...
- 31
2
votes
1
answer
79
views
Overwrite video element: display a different image (manually decoded frame) & WebGL compatibility
Context
I'm currently building a library to precisely record (ideally any) javascript-based animation, even on slow computers or at very high framerate (e.g. 120fps to do motion blur later…). What I ...
- 2,594
0
votes
1
answer
70
views
Three.js model color difference from expected rendering
I am trying to display a model I downloaded on Sketchfab which is not showing up as expected when I render it.
Above is the expected rendering
Above is the rendering I get in three.js.
How do I ...
- 15
-1
votes
1
answer
80
views
Export Asymptote graph to WebGL
I have a Docker installation of Asymptote, based on Alpine Linux, the output of which I intend to transclude in web pages. The installed packages are g++ gettext-dev texlive-dev freetype-dev woff2-dev ...
- 4,729
0
votes
0
answers
56
views
How to improve brush stroke intersection in WebGL (fragment shader)?
Main issue :
I'm trying to create a brush effect using WebGL. The issue arises when strokes intersect—currently, the blending doesn't look natural.
Here’s what I get:
Here’s what I’d like to achieve (...
0
votes
0
answers
45
views
<Enviroment/> floating model
Seems is not possible to have a 'non-floating' mpdel within a , so I am trying to come up with a workaround as I have seen here:
hack for skyground from three.js,
since I couldnt figure out how to use ...
- 624
0
votes
1
answer
119
views
How to fix ThreeJs camera controls only updating for starting view
I am making a 3d Three Js game, but I have run into a problem with my camera controls. When I look the starting direction that you look, the camera controls are all right. But if I look backward, the ...
- 59
0
votes
0
answers
35
views
glslify Cannot Find The Method I'm importing
I'm having an issue where my method multiColourLerp Cannot be found when I import it from my utils file. I know that shaders usually don't reuse code across files but for the sake of maintainability I ...
- 1
1
vote
1
answer
41
views
WebGL Matrixes Translate wrap instead of move
So, I tried creating my own WebGL Matrixes. Rotate and Scale worked properly, except for Translate. For some reason, it has wrapped (large on the bottom and small on the top). You can test this by ...
1
vote
1
answer
274
views
How to Fix Incorrect Unity Color Rendering in Web Version of Game?
I am struggling with incorrect color rendering in the web version of my game.
It looks fine on Windows, like this:
But on the web, it looks like this:
I'm using Unity 6, and by default, it uses the ...
- 21
1
vote
2
answers
127
views
Three.js Scene Freezes When Browser Tab is Idle
I'm working on a Three.js project with a Tamagotchi-style animated character using GLTF animations and an animation mixer. The project includes a robot, a hatching box, and interactive controls.
...
- 871
2
votes
1
answer
128
views
How to implement KHR_materials_dispersion?
I see this GitHub page. Sadly, Khronos Group has provided no documentation on how to actually use it, as far as I can tell.
The Three.js Editor has a slider for Dispersion listed for type ...
- 1,743
0
votes
0
answers
31
views
I want to transform the coordinates of a parallel projection in WebGL
Parallel projection in WebGL,
const orthoMatrix = mat4.create();
mat4.ortho(orthoMatrix, -1, 1, -1, 1, near, far);
Some of the parts that are done as
mat4.ortho(orthoMatrix, -0.5, 1, -0.5 ...
- 21
0
votes
0
answers
110
views
Invert raster tiles with maplibre
I'm trying to invert raster tiles in maplibre (like in CSS filter: invert). I have the following code for a minimum example that doesn't show any errors but doesn't invert the tiles.
<!DOCTYPE html&...
- 2,147
0
votes
0
answers
50
views
Fix the Babylon JS GLSL
I am making simple babylon.js project that can be set base texture, pattern overlay texture, pattern tint, lightmap of sphere.
But my project doesn't work well.
I can see only black sphere (not ...
0
votes
1
answer
229
views
How to return variable from function when using callback?
Good afternoon, dear colleagues.
I'm trying to adapt a Unity WEBGL program for a some social network on the WEB. The social network has an API and integrated simply with Unity via JavaScript. It is ...
- 11
0
votes
0
answers
34
views
Android WebGL fragment shader. Slideshow begins when time uniform increases
I have Samsung A41 (Android 12, Mediatek MT6768) and I noticed the strange thing.
When the time (passed as uniform to fragment shader) exceeds 100 seconds the slideshow effect in animation (based on ...
0
votes
1
answer
49
views
How to prevent base color from changing when overlaying patterns?
I'm building a custom racing silks customizer using THREE.js. My app allows users to:
By the way it is something like this website here: https://hylandsportswear.com/kitbuilder/#/customise/80325870?...
- 11
0
votes
1
answer
37
views
Inconsistent behaviour in WebGL depth testing using EQUAL
I’ve run into inconsistent behaviour in depth testing and I don’t know if this behaviour is specified anywhere.
My question is: when using EQUAL as the depth-testing function, what is the expected ...
- 14.5k
0
votes
0
answers
65
views
Reconstruct world Space from Depth Texture THREE.js Shader Pass
I am creating an Atmosphere shader in three.js. The Shader is passed to a ShaderPass, and the ShaderPass to the effectComposer. I am currently having a problem with utilizing the DepthTexture. The ...
- 1
1
vote
0
answers
102
views
Trying to profile WebGpu on Xcode, but Xcode crashes
I'm trying to follow the following set of instructions on how to profile a webgpu/webgl app on a Mac using Xcode: https://developer.playcanvas.com/user-manual/optimization/gpu-profiling/
I get a ...
- 153
0
votes
1
answer
389
views
MapLibre GL custom mask layer causing subsequent vector tile line layer to render incorrectly
I have created a mask layer using MapLibre GL JS's CustomLayerInterface to mask a raster layer behind it. The mask layer works correctly in hiding the raster behind, however it is causing issues with ...
- 177
1
vote
0
answers
78
views
Adding 2D Text on a 3D Object in Threejs
I've just started learning threejs, thought of working on a pre-made model.
I wanted to work with a Flipper Zero Model.
Here is the link of the model.
Flipper's Screen is called "Object_8" ...
-1
votes
1
answer
66
views
Sprite animation with pixelStorei & texImage2D gives strange color margin
This code works generally.
I use 4x4 shema for sprite animation (texture/image).
Only when YY is 3 (last row) i got strange color margin.
I found at How do I use texSubImage2D to show sprites in webgl?...
- 4,274
0
votes
0
answers
65
views
Custom Webgl points layer, with vertex shader and fragment shader, want to distinguish two points with same latitude and longitude on Webgl Points Lyr
The goal of this code is to distinguish two overlapping points with identical coordinates using WebGL in OpenLayers. Two approaches have been attempted:
Approach 1: Implements a custom WebGL points ...
2
votes
1
answer
74
views
Unable to create a framebuffer with an RGBA32F texture
I'm unable to create a framebuffer from a texture with internal format RGBA32F.
The following code logs test.js:38 Framebuffer is incomplete. Status: 36054 in the console
function main() {
const ...
- 42