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!!**
6,251
questions
0votes
0answers
8views
What's the different between using modelViewmatrix directly and using normalMatrix instead? [duplicate]
I'm studying in Interactive Computer Graphics by Edward Angel and Dave Shreiner E7.
In Ch6, I come into this question.
In the Sample code shadedSphereEyeSpace.html, vertex shader change the normal ...
- 1
1vote
0answers
12views
User clicks in React UI layer affecting lower WebGL layer
I have a React app that contains a WebGl experience.
The interface for the WebGl is in the parent React component, which passes props down into the WebGl.
React UI
|
--- > WebGL
Whenever I click in ...
- 87
0votes
0answers
9views
Fix this phong shader for me where to put the lights or vertex position with custom baked normals
My goal is to create a bevel effect for a flat 2d sprite. Where the edges are the start of non transparent pixels.
I've tried this approach Create a bevel effect on non-rectangular shapes in ...
- 5,439
0votes
0answers
28views
How do I render different scenes on different sections of a page?
What I want to do is to render a particular scene on let's say section1 of the page, let's call that scene1, then, I also want to render a diffrent scene (scene2) on section2 of the same page. So the ...
- 61
0votes
1answer
11views
webgl glsl change the projection
I'm drawing a 2d plan on the screen using webgl. I would like to rotate the plan a bit to give a 3d impression.
current:
wanted:
My first approach was to use vanishing points like drawing in ...
- 357
0votes
0answers
16views
Laravel Valet does not serve WebGL build, error 404
My Laravel project has a WebGL build viewer/creator in the public/admin/creator and public/admin/viewer folders. On production and development servers this works fine. Locally running Laravel Valet I ...
1vote
0answers
23views
WebGL How to pass big numbers to shaders
I am making app by using javascript and webgl. I need to pass big numbers (for example 1647843999744) to shader but when I get this value with this code gl.getUniform(this.shaderProgram, this....
- 101
1vote
0answers
26views
How to play a tween animation on key press multiple times
I am trying to make a robot that can perform certain animations when keys are pressed.
When I press the "J" key I would like the robot to jump up and down.
I am using Three.js and Tween.js ...
- 11
-1votes
1answer
21views
React project: Unity or three.js?
Recently, the React project plans to adopt a 3D map, which will be a complex scene. It will be a city with different plots, beaches, mountains, and interaction. You can choose, click and drag, etc.
...
- 1
0votes
1answer
20views
Unity - WebGL build works fine into the localhost but not into the webserver
I wanted to create a WebGL game with Unity. So i created my version of the game, i built it and works just fine in the localhost that unity launches after the build, but when i upload it in my web ...
0votes
1answer
51views
Uncaught TypeError: Failed to resolve module specifier "three/examples/jsm/loaders/GLTFLoader.js"
I am having a really hard time understanding why my program is crashing due to this error:
Uncaught TypeError: Failed to resolve module specifier "three/examples/jsm/loaders/GLTFLoader.js". ...
0votes
1answer
35views
Create a 3D Object from cross-section by using THREE.JS
I've learned how to create shapes now and I want to take camera location and size information from the user and create a cross-section view.
I want to create a cylinder and get a cross-section. Can ...
- 312
0votes
0answers
18views
WebGL flickering shader when setting varying value in Firefox
I'm following a basic tutorial learning about WebGL (https://webglfundamentals.org/webgl/lessons/webgl-fundamentals.html). Currently I'm just drawing a square (2 triangles) to the screen.
I tried to ...
- 536
-1votes
0answers
22views
framework.js.unityweb! The file is corrupt, or compression was misconfigured check Content-Encoding HTTP Response Header on web server
I'm using unity 2021.2.1 version that give me error when i upload my build files to
my server..
0votes
0answers
32views
A-Frame: what to do when WebGL context lost on Oculus Quest browser (in VR)
Sometimes when working with WebGL, we encounter the error WebGL: CONTEXT_LOST_WEBGL: loseContext: context lost. There are many reasons why this may happen, and many people have written suggestions on ...
- 8,528
0votes
0answers
13views
WebGL not playing audio from Unity 2D platformer on Simmer.io
Unity version: 2020.3.16
WebGL: most updated version
Only SOME of the audio works, for example, sound effects work when triggered by collision and the sound when the scene ends. However the background ...
- 1
0votes
0answers
32views
Why doesn't emscripten glMapBufferRange emulation use standard OpenGL constant GL_MAP_WRITE_BIT?
I'm using emscripten with wasm and OpenGL in my C++ code. I'd like to use glMapBufferRange but when using access constant GL_MAP_WRITE_BIT which is a standard GL constant gives the emscripten error
...
- 2,870
0votes
0answers
36views
Make objects selectable in ThreeJS [closed]
Unfortunately, I'm new to ThreeJs.
I have a question, how I can make an object selectable in ThreeJS?
I mean that the user can select an object and in the background, I can detect its selection and ...
- 19
0votes
0answers
34views
Distort text behind blob/bubble three JS webgl shader
i have a sphere geometry with shadermaterial consisting perlin noise with fresnel, and vec4 colored fragment, so that it could become transparent. How can i get the text (or basically anything) behind ...
- 53
0votes
0answers
15views
Raycast not hitting a scene child using Three.js with GMaps
Im trying to hit a pin scene child with a click in GMaps, using Three.js and threejs-overlay-view but I can't get the object clicked. Raycaster.intersectObjects only returns [].
Image of pin
Here's a ...
1vote
0answers
30views
Tizen Web Application: WebGL canvas not properly rendered
I'm developing a Tizen web application for kiosks based on Samsung's Smart TVs and I need to add a shape drawn by WebGL inside an html canvas.
The problem: when I run the web application in the TV ...
- 131
0votes
0answers
21views
Image rendered from useLoader @react-three/fiber using shaderMaterial has different color from its original color
Here is my problem, my project is generated from create-react-app, followed by some @react-three/fiber and glsl dependencies, I render simple planeBufferGeometry and for the material I use ...
0votes
2answers
50views
+500
How do I apply a 2d shader to a webgl canvas in js?
I hope I'm not taking the wrong approach here but I feel like I'm on the right track and this shouldn't be too complicated. I want to take a simple function of x and y on the screen and return a color ...
- 8,671
-1votes
2answers
62views
Is it possible to work around CORS while trying to Authenticate on Forge?
We are building a WebGL application in Unity, and we want to use Forge's Design Automation API in it. As most of the Design Automation API is using a Websocket API, it's pretty straightforward. BUT, ...
- 101
0votes
1answer
27views
Getting a parse error on Webgl build while same project works fine in editor
I'm doing a project on Unity Webgl and getting an error only when I build the project (in the editor it works fine). Basically I'm using a Jsonblob link to assign the parameters to a custom struct I ...
0votes
0answers
23views
ONNX Runtime Web WebGL support when input differs from power of two
I have a custom ONNX model that takes Images of the size [batch_size, 1280, 720, 1] as inputs which I want to run with WebGL on a smartphone. The html file looks like this (I am setting the input Img ...
0votes
0answers
22views
object adds velocity instead of maintaining in opposite direct
I have a group of objects i want to rotate , there is a button which should onclick change from left to right and a stop button which should stop the current group position at its current location , ...
- 1
0votes
1answer
27views
webgl: bufferData freezes my application, how to do it asynchronously
I am working on a web 2d world generation and simulation. I generate a 2d terrain (different cell shapes and colors) using perlin noise and some random function in different web workers. Those workers ...
- 357
0votes
0answers
31views
Why is my mix in my shader not properly mixing in Threejs?
I have been messing with this for awhile and I cannot get the shader to mix properly. Currently it is displaying the two colors that are supposed to be mixed as two separate colors on each hemisphere. ...
- 35
0votes
0answers
31views
Is there a way to get computed matrix in the process of WebGLTile rendering in OpenLayers?
In my project, I work with GeoTiff. I use OpenLayer's WebGLTile to apply some expression to combine bands (e.g. to compute NDVI) with the power of WebGL, and want to save the resulting matrix of the ...
- 31
0votes
1answer
34views
load shaders from next.js
I am using next.js for my web app. I use WebGL to render a 2d scene. I have a fragment and a vertex shader hardcoded as strings in my javascript:
var fragmentShaderSource = [
` #ifdef GL_ES`,
...
- 357
0votes
2answers
50views
Navigation stutters with webGL context active on mobile
I'm developing a site with hero banners made with three.js. The scenes are VERY simple, and the render run at 60fps even on low end devices.
But on mobile I'm experiencing an issue. When a page is ...
- 704
0votes
0answers
27views
threejs vertex and fragment shaders - multiple color sections in the y axis
I'm new to threeJS and I'm trying to give color to a geometry in a very particular way.
To simplify things, the geometry is like a rectangular parallelepiped with a very shallow z axis which we can ...
- 1,472
1vote
1answer
38views
JavaScript object containing multiple Base64 image codes
Project:
Loading screen with Base64 image in Playcanvas (WebGL)
What I try to do:
Change the image when the Website is loaded with other language (index.php?language=xy)
What I already have:
I get ...
- 225
0votes
1answer
36views
WebGL last attributes do not work in Chrome on Windows
I have this code in my vertex shader:
in vec3 geometry;
in vec4 offset; // xyz - offset, w sizeFactor
in vec4 rotationQuad;
in vec2 textureCoord;
in vec2 textureNr;
in highp float faceNumber;
in vec4 ...
- 215
0votes
0answers
18views
WebGL: Converting JSON IFS 3D Model Data to Float32Arrays
I have a project I'm working on that involves rendering 3D models in WebGL, GitHub here. In pulling together several different resources, I've found two different formats for the model data: one with ...
- 41
1vote
0answers
44views
Instantiating AmazonCognitoIdentityProviderClient in Unity (WebGL build) gives the error "Value cannot be null. Parameter name: stream"
I am trying to build a unity project for WebGL. The project includes AWS SDK and the dll's are added into the project as in here https://docs.aws.amazon.com/sdk-for-net/v3/developer-guide/unity-...
amazon-web-services
0votes
0answers
32views
GLSL For loop has "Invalid Condition"
Im trying to get a piece of GLSL code from shadertoy to function in WebGL.
Specifically this shadertoy by iq: https://www.shadertoy.com/view/Xds3zN
Ive implemented the correct uniform objects and it ...
- 1,030
0votes
0answers
23views
Angle between X axis of object and a 3D point on plane with Three.js
I have a plane as shown in the image, there I have an object at point O, having its X,Y,Z axis like in the image and there is another point P on the plane. What I want to find out is the angle between ...
0votes
0answers
32views
How to apply an "unproject" transform in a ThreeJS shader pass
I need to create a custom ThreeJS WebGL ShaderPass to "unproject" a quadrilateral into a rectangle that fills the entire render frame.
Essentially I need to re-implement OpenCV's cv2....
- 535
0votes
0answers
23views
Add Texture to sphere
I need help figuring out how to add textures to my basketball.
What should i add to my vertex and fragment shaders.
Fragment shader
#ifdef GL_FRAGMENT_PRECISION_HIGH
precision highp float;
#...
0votes
1answer
31views
Pixi.js crashes on rendering a 700 by 700 grid
I want to display a 700 by 700 grid. Pixi.js crashes on rendering it. The same code works for 100 by 100 grid.
var app = new PIXI.Application({
width: window.innerWidth,
height: window....
- 17.2k
0votes
0answers
9views
spritesheet with instancing in webgl
I don't quite get how to pass in attribute data for rendering a sprite sheet or texture atlas while instancing. Let's assume WebGl1 (so no texture layers)
Without instancing, I have these uv ...
- 2,804
0votes
1answer
71views
webGL and iOS Build Support Install failed -Unity
I don't know why I am getting this error. how can i solve this ?
(Visual studio 2019 was already installed but I never had access to the others)
0votes
0answers
26views
Threejs Texture Transition Effect
I am new to threejs and trying to create a 360 WebVR experience by using 360 images as texture on to a sphere geometry and I want a transition effect while changing the texture from one image to ...
1vote
0answers
27views
Unity WebGL - Video Player not looping on older macbook
In my project, I have a build of Unity WebGL in which I play MP4 videos loaded from a url using Unity's Video Player. These videos are set to loop through the toggle in the inspector. When tested on ...
- 11
0votes
0answers
51views
AssertionError in WebGL build on Unity 2021.2.8
After I tried to upgrade the project from Unity 2019.4.31 to 2021.2.8, WebGL fails on build.
At first I used the old WebGL template i had, then i tested with the default Unity template but the errors ...
- 11
0votes
1answer
33views
How to properly specify indices for a four-sided pyramid in WebGL?"
I am trying to create a 4-sided pyramid in WebGL where each face is a different color and I believe I'm running into issues with the indices. From my understanding, if I specify an indexed array, ...
- 1
1vote
0answers
20views
Unable to load avatar(.glb) in mobiles
We have our portal https://inzack.com we have to login with Google credentials. After we login, the dashboard will display the avatar(.glb). This is working perfectly from any laptops(web).
If we ...
- 53
-1votes
0answers
18views
Blurry result depending on server the app is served with
When I server the app from this repo with live Server I get a neat
But If I serve it with node const server = http.createServer((req, res) => {...} code in the index.js file, I get this blurred ...
- 3,573