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
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 ...
user avatar
  • 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 ...
user avatar
  • 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 ...
user avatar
  • 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 ...
user avatar
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 ...
user avatar
  • 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 ...
user avatar
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....
user avatar
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 ...
user avatar
-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. ...
user avatar
  • 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 ...
user avatar
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". ...
user avatar
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 ...
user avatar
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 ...
user avatar
-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..
user avatar
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 ...
user avatar
  • 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 ...
user avatar
  • 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 ...
user avatar
  • 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 ...
user avatar
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 ...
user avatar
  • 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 ...
user avatar
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 ...
user avatar
  • 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 ...
user avatar
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 ...
user avatar
  • 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, ...
user avatar
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 ...
user avatar
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 ...
user avatar
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 , ...
user avatar
  • 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 ...
user avatar
  • 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. ...
user avatar
  • 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 ...
user avatar
  • 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`, ...
user avatar
  • 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 ...
user avatar
  • 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 ...
user avatar
  • 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 ...
user avatar
  • 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 ...
user avatar
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 ...
user avatar
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-...
user avatar
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 ...
user avatar
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 ...
user avatar
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....
user avatar
  • 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; #...
user avatar
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....
user avatar
  • 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 ...
user avatar
  • 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)
user avatar
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 ...
user avatar
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 ...
user avatar
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 ...
user avatar
  • 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, ...
user avatar
  • 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 ...
user avatar
  • 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 ...
user avatar

15 30 50 per page
1
2 3 4 5
126