Questions tagged [webgl]

WebGL extends the capability of the HTML canvas element to allow it to render accelerated graphics in any compatible web browser. **DO NOT TAG QUESTIONS ABOUT 3D LIBRARIES (like THREE.js) WITH THIS TAG** unless the question is specifically about a WebGL API feature. **DO NOT TAG QUESTION ABOUT UNITY WEBGL WITH THIS TAG!!**

Filter by
Sorted by
Tagged with
0
votes
0answers
5 views

webGL problem: part of the screen dissapears when moving the camera

I'm wondering if someone could help me with this rendering bug that I can't find the cause. I have a webGL webpage that renders some very simple stuff (a 3D maze, but it doesn't really matter), and ...
0
votes
1answer
17 views

Using gl-transitions in a simple html page

How can I use https://gl-transitions.com/ shaders in a static HTML page? I need a simple example for animating two images.
0
votes
1answer
17 views

How Do I change the color of webgl points?

This is the code I used to try to change the color of WebGL points: I want to change the color of WebGL points when a user clicks the body element. And FYI the shaders are compiling correctly. The ...
0
votes
0answers
17 views

How can I place a GLTF model behind a stencil mask in three.js?

I'm using a stencil mask in Three.js to create a portal effect. It works correctly on meshes when I can control the material. However, when I load a gltf model with the model's material I cannot get ...
0
votes
0answers
28 views

OpenLayers WebGLPointsLayer conditional symbol source

I work with the new feature from openLayers: https://openlayers.org/en/latest/examples/webgl-points-layer.html and want to achieve to have some case transform operator like in the color array, but for ...
-1
votes
0answers
29 views

my game crashes when I try to play it on itch.io

I am using unity 2020.3.25f1, my target platform is WebGL, and I published a demo of my game on itch.io as a ZIP file that will be read by the browser, when I am trying to use it appears this error ...
0
votes
0answers
32 views

How To Set SVG Image In WebGL To Be Used In Javascript?

I'm using the source code in https://codepen.io/at80/pen/tqdmv I want to use the SVG image in place of the objects being animated. Can you please help me to figure out how can I set the SVG image in ...
1
vote
0answers
25 views

threejs change object and animating

My character is wearing glasses and I want to replace them with glasses of a different model. The replacement part was successful, but the animation of the glasses part works strangely. Animation used ...
0
votes
1answer
35 views

How to use data kept on GPU after model inference with tensorflow.js v3.13.0?

I just got aware of a new feature in tfjs v3.13.0 (see https://github.com/tensorflow/tfjs/pull/5953). I am trying to use the new dataToGPU() method of Tensors to keep my model output on the GPU, since ...
1
vote
0answers
16 views

Why is rendering non - deterministic when using expo-gl and react-navigation/native-stack libraries together in React Native?

I'm developing an implementation of Conway's Game of Life using React Native through Expo CLI, which is my first attempt at an RN app. The app's main screen includes a GLView component, onto which a ...
0
votes
0answers
20 views

Flatten Sampler2D to 1D WebGL

I'm encoding a large array into a texture that I can reference in my glsl shader. The array is far to long to encode in a 1d array, so I encoded it as a 2d array. Now I would like to reference each ...
0
votes
1answer
55 views

"Scan Through" a large texture glsl

I've encoded some data into a 44487x1.0 luminance texture: Now I would like to "scrub" this data across my shader, so that a slice of the texture equal in width to the pixel width of my ...
0
votes
1answer
45 views

How to add a displacement map to a point material in ThreeJS?

I'm new to ThreeJS and trying to create something like asteroids with textures made of particles (something like from this website https://staratlas.com/). Unfortunately, when I tried to apply a ...
0
votes
0answers
53 views

I don't mean to ask you to do everything, but please how do I acheive this effects? How is it done? [closed]

First of all, it is just a project for my portfolio, I don't mean to ask you guys to do the whole coding for me, far from that, but as a beginer in Three.js, I want an idea on how they were able to ...
0
votes
0answers
21 views

How to draw a million points into canvas in the most optimal way with the shortest time?

I want to draw scatter plot contains about a million records of data. I don't want to use any lib or framework, just pure WebGL and JS. I tried to draw a simple point, then put it in a loop with a ...
0
votes
0answers
38 views

Error creating WebGL context: WebGL not available for compressed textures. Silently failing

In my production app for some users I get the error Error creating WebGL context: WebGL not available for compressed textures. Silently failing.. The error occurs when calling the following function ...
0
votes
0answers
65 views

How to set texel invisible depending on a texture from another object

Introduction I want to be able to create a sort of fog of war for my app using shaders. I feel that I might be close, but I can't figure out how to make it work… (maybe I don’t have the right approach ...
0
votes
1answer
20 views

WebGL Combined Camera Rotations

Why is it that when I multiply a rotation matrix with the camera matrix - let rotation = m.mult4(m.rotateX(xRads)),m.rotateY(yRads))); camera = m.mult4(rotation,camera); I get incorrect rotation. But ...
0
votes
1answer
29 views

Leveraging webGL to find bounding boxes

Given some vertices with xyz coordinates it is easy to obtain an xyz aligned bounding box, just take the min/max xyz values from the vertices. Ideally, these values only have to be found once and can ...
2
votes
2answers
73 views

WebGL textures from YouTube video frames

I'm using the technique described here (code, demo) for using video frames as WebGL textures, and the simple scene (just showing the image in 2D, rather than a 3D rotating cube) from here. The goal is ...
-2
votes
0answers
51 views

Why does the WebGL shader gives me a syntax error?

I just started learning Three.js and am trying to make my first project, but the shader gives me a silly Uncaught SyntaxError: Unexpected token '{' I don't know why. Everything looks good, I think. So ...
1
vote
1answer
19 views

XBIM Web Viewer - Calculate HTML position from WCS

I'm trying to put an overlay over the top face of the bounding box of selected object. What I'm doing is: 1- Get the vertices of the bounding box top face in WCS, from center point 2- Translate each ...
0
votes
1answer
31 views

Can you use a float array in a WebGL Shader?

I'm trying to use a WebGL shader to visualize some audio data. I have an array of number which represent a normalized .wav file: "demo": {"duration": 0.021111111111111112, "...
0
votes
0answers
19 views

Unity WebGL Dev-Build: Automatically save profiling data (to filesystem)

The issue is that I want to automate profiling and saving profiling data of my WebGL project during the 'Build & Run' of a Developmentbuild. However, to my knowledge, in this way the script does ...
-1
votes
0answers
16 views

The material should ignore everything that goes behind it, even if it’s semi-transparent

We need to gain the following behavior of the threejs material: The material should ignore everything that goes behind it, even if it’s semi-transparent. The problem needs to be solved: by mixing ...
0
votes
0answers
22 views

What functions do WebGL VAOs react to?

After combing through the OpenGL reference and comparing to WebGL's API, my understanding of Vertex Array Objects is that, when bound, they capture information about each attribute's VBO binding, size,...
0
votes
0answers
38 views

Plot points from data texture in glsl shader

I have encoded 100 float values into a 100x1 image texture. The original values were between a range of 0-1, but I remapped them to 0-255 so I could see them in the texture: I would like to plot ...
4
votes
1answer
43 views

Canvas added to YouTube is not visible

I'm following the WebGL tutorial from MDN (code, demo (black rectangle)) to create a WebGL canvas. The goal is a userscript (with WebGL shaders, i.e. video effects) for YouTube. So I opened a YouTube ...
0
votes
0answers
34 views

What's the purpose of `gl.deleteShader` in WebGL?

It's a sensible function in OpenGL ES, where such objects are referenced by unsigned integers. But WebGL is a JavaScript binding and it's by direct object reference: gl.createShader returns a ...
0
votes
0answers
57 views

CORS Request Failing only on Firefox

I'm working with Unity WebGL and i'm having an issue with CORS when the loader tries to download the needed unityweb files for the build. The error: Cross-Origin Request Blocked: The Same Origin ...
0
votes
1answer
28 views

Problems by coloring WebGL 3D Object

I'm trying to implement a WebGL app according to the documentation in the Mozilla Docs. My code generates a sphere with is shaped by a scalefactor. The colors are generated according to the ...
0
votes
0answers
33 views

How to simulate click on canvas with webgl by coordinates?

I want to simulate clicks on https://www.thesnidewalk.com/ For example simulate clicks on "walk" button at start menu. I tried this, got coordinates on button and made mouse event and ...
0
votes
0answers
57 views

How to dynamically alternate between a canvas background color and an image in JS?

I have a webGL program where I create lights in my scene stored in an array. When I call render, I'm trying to make the background be black when there are no lights in the array and have an image ...
1
vote
1answer
37 views

What is the purpose of calling gl.enableVertexAttribArray(); function in WebGL

In WebGL before we call the drawArrays() function we call this function called enableVertexAttribArray() passing the reference to a variable in my compiled glsl program which stores the vertex ...
0
votes
1answer
55 views

Emscripten fails to compile shader

I'm using emscripten with C++ 17 and WebGL 1.0 to try to draw some basic things in OpenGL. But I can't seem to go past shader compilation. I tried many different types of shaders to eliminate the ...
1
vote
1answer
70 views

How can I alternate between a background color and a background image on canvas? [closed]

I have this program where I can add lights to my scene (stored in an array lights). When I first start the program, I want everything to be black since I start with my array empty. But when there is a ...
0
votes
1answer
55 views

I can't get Three.js to render a scene from an imported OBJ file

I'm not able to get my Three.js scene to display on HTML canvas. I'm importing an OBJ file which is importing correctly. It shows all details, such as Meshes, materials, etc. correctly. Here is my ...
1
vote
1answer
40 views

Problem with webGL uniforms for particle emitter : "uniform1f: location not for current program"

I have created a particle emitter class with WebGL/JS and it works fine with one instanciation. The problem is when I try to create 2 instances of this object. I get an error message from the GPU : ...
0
votes
1answer
44 views

webgL - apply wind effect on cloth simulation

I need to implement an easy effect of the wind force in a simulation of a cloth. My cloth is made by 10x10 vertices (100 indices given in the cloth_vertices array) connected using springs. The springs ...
-1
votes
0answers
21 views

Unity WebGL hosted in .NET Core not connecting to Redis

I have a .net core 6 (but I think that is the same issue for the 5) solution which has a View that loads the Unity build WebGL. In the Editor Play Mode, Unity works fine and connects to the Redis ...
1
vote
0answers
51 views

Unity WebGL doesn't properly unload and load Addressable scenes

I am trying to unload a previously added scene and then additively load another scene, in that sequence. I use the following code below to do this. This code works correctly in the editor and on all ...
0
votes
0answers
39 views

How to calculate the interpolation factor considering the frameTime

I would like to know how to calculate the interpolation factor considering the frametime to make the interpolation last for a specific amount os seconds. For example, I have two vectors, I want to ...
2
votes
1answer
49 views

WebGL line drawing issue

I am trying to draw simple shapes using WebGL LINES mode. These are my vertices: <canvas width="200" height="200".../> ... vertices.push( 0.01,0.13, 0.03,0.15, 0....
0
votes
0answers
27 views

What is the limit of 3D objects in threejs?

I am developing an application using threejs. Here my application will load thousands of parts using stlLoader (my user will load stl files to viewer) and only one part will be visible , the last ...
1
vote
1answer
30 views

glsl throws bunch of errors

I am trying to get a square drawn on to a html canvas using GLSL and I am actually having a hard time understanding the errors. Here is my code for defining vertex and fragment shaders.Also Don't ...
0
votes
0answers
40 views

Is it possible to have the objects I draw not have the image I set as the background?

I have this program where my canvas assumes a WebGL context and I'm trying to upload an image as the background, but when I do so, everything becomes the image itself: I achieved this by fiddling ...
0
votes
0answers
19 views

Align Three.js cube with html element

Please help! Is there a way to scale the box geometry to align with the HTML element in my page. I have a responsive .container element and a canvas in the background, and I need this cube to always ...
1
vote
0answers
27 views

three js shadow clapping?

The shadows are weird. Shadows are normally output only in certain areas. What happend? mycode: // plane export const plane = new THREE.Mesh( new THREE.PlaneGeometry(500, 500), new THREE....
0
votes
1answer
28 views

three.js MeshLine vertex implementation

I'm struggling with correct vertex shader implementation for fat lines. I tried using spite/MeshLine, but it hasn't proper mitering which is a must for me. Therefore I started my own implementation (...
0
votes
1answer
42 views

Why can't I render to a floating point texture in webgl?

I am creating a framebuffer and attaching a texture to it. Here is the texture that I would like to attach(but is not working): gl.texImage2D(gl.TEXTURE_2D, 0, gl.R32F, sphere_texture.width, ...

15 30 50 per page
1
2 3 4 5
124