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
61
votes
2answers
15k views

Rendering meshes with multiple indices

I have some vertex data. Positions, normals, texture coordinates. I probably loaded it from a .obj file or some other format. Maybe I'm drawing a cube. But each piece of vertex data has its own index. ...
22
votes
3answers
39k views

Drawing a line with three.js dynamically

This is what I'd like to achieve (a modifiable polygon where the red circles are vertices) and I'd like to build the polygon dynamically. When initiating the geometry as var geometry = new THREE....
160
votes
8answers
57k views

Learning WebGL and three.js [closed]

I'm new and starting to learn about 3D computer graphics in web browsers. I'm interested in making 3D games in a browser. For anyone who has learned both WebGL and three.js... Is knowledge of WebGL ...
19
votes
1answer
15k views

Canvas toDataURL() returns blank image

I'm using glfx.js to edit my image but when I'm trying to get that image's data using the toDataURL() function I get a blank image (width the same size as the original image). The strange thing is ...
3
votes
1answer
851 views

How does the calculation of the light model work in a shader program?

I am trying to read up this tutorial: https://aerotwist.com/tutorials/an-introduction-to-shaders-part-2/ but I am not able to follow up. Basically the code creates a directional light by using ...
18
votes
4answers
28k views

How to get object in WebGL 3d space from a mouse click coordinate

I'm building a boardgame in WebGL. The board can be rotated/zoomed. I need a way to translate a click on the canvas element (x,y) into the relevant point in 3D space (x, y, z). The ultimate result is ...
44
votes
9answers
42k views

Thickness of lines using THREE.LineBasicMaterial

I am using the code below to create hundreds of lines in my three.js scene edgeGeometry[i] = new THREE.Geometry(); edgeGeometry[i].vertices[0] = v(x1,y1,z1); edgeGeometry[i].vertices[1] = v(x2,y2,z2);...
5
votes
3answers
10k views

Drawing many shapes in WebGL

I was reading tutorials from here. <script class = "WebGL"> var gl; function initGL() { // Get A WebGL context var canvas = document.getElementById("canvas"); gl = getWebGLContext(canvas);...
32
votes
1answer
23k views

Multiple transparent textures on the same mesh face in Three.js

Is it possible to lay multiple textures on top of each other on the same face in Three.js so that the alpha blending is done GPU accelerated in webGL? The textures are (or should be) applied to the ...
71
votes
5answers
37k views

Javascript Typed Arrays and Endianness

I'm using WebGL to render a binary encoded mesh file. The binary file is written out in big-endian format (I can verify this by opening the file in a hex editor, or viewing the network traffic using ...
9
votes
2answers
5k views

Emulating palette based graphics in WebGL v.s. Canvas 2D

Currently, I'm using 2D canvas context to draw an image generated (from pixel to pixel, but refreshed as a whole buffer in once after a generated frame) from JavaScript at about a 25fps rate. The ...
12
votes
2answers
20k views

How to get the absolute position of a vertex in three.js?

As far as I know var point = object.geometry.vertices[i]; will return with the relative position for the x, y and z of the point inside the geometry of the object. How to get the absolute position, ...
10
votes
1answer
8k views

What is the logic of binding buffers in webgl?

I sometimes find myself struggling between declaring the buffers (with createBuffer/bindBuffer/bufferdata) in different order and rebinding them in other parts of the code, usually in the draw loop. ...
24
votes
7answers
23k views

Three.js / WebGL - transparent planes hiding other planes behind them

When you have two planes in Three.js / WebGL and one or both of them are transparent, sometimes the plane behind will be hidden by the transparent plane above. Why is this?
72
votes
6answers
85k views

How to stop a requestAnimationFrame recursion/loop?

I'm using Three.js with the WebGL renderer to make a game which fullscreens when a play link is clicked. For animation, I use requestAnimationFrame. I initiate it like this: self.animate = function()...

15 30 50 per page
1
2 3 4 5
54