Skip to main content
Search type Search syntax
Tags [tag]
Exact "words here"
Author user:1234
user:me (yours)
Score score:3 (3+)
score:0 (none)
Answers answers:3 (3+)
answers:0 (none)
isaccepted:yes
hasaccepted:no
inquestion:1234
Views views:250
Code code:"if (foo != bar)"
Sections title:apples
body:"apples oranges"
URL url:"*.example.com"
Saves in:saves
Status closed:yes
duplicate:no
migrated:no
wiki:no
Types is:question
is:answer
Exclude -[tag]
-apples
For more details on advanced search visit our help page
Results tagged with
Search options answers only not deleted user 79

WebGL is a Javascript API for rendering interactive 3D / 2D graphics on the HTML5 canvas element. It is based on OpenGL ES 2.0.

2 votes

How to rotate something around a fixed point WebGL

One way is using a matrIx stack https://webglfundamentals.org/webgl/lessons/webgl-2d-matrix-stack.html Basically you need to translate the object so it's center point is at the origin, rotate, then translate …
gman's user avatar
  • 850
3 votes

Which UVs to use when I have more UVs coordinates than vertices Obj

You are using the wrong UV coordinates and yes, it's normal to have more UVs than positions. Consider a cube. A cube has 8 positions but for correct normals it needs either 3 normals per position sin …
gman's user avatar
  • 850
3 votes
Accepted

WebGL: Texture appears as black

You need to set the texture parameters for non-power of 2 textures. Adding these 2 lines fixed the issue gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); gl.texParameteri …
gman's user avatar
  • 850
2 votes

How can I center a WebGL window in Unity?

gameContainer", "Build/dist.json"); </script> </head> <body> <div id="gameContainer"></div> </body> </html> Then you pick Edit->Project Settings->Player from the menus and under the WebGL
gman's user avatar
  • 850
5 votes

How can I implement 3D textures using webgl?

Here's the GLSL function slightly fixed from the Google I/O talk #define FILTER_LUT true vec4 sampleAs3DTexture(sampler2D tex, vec3 texCoord, float size) { float sliceSize = 1.0 / size; …
gman's user avatar
  • 850
0 votes

Missing features from WebGL and OpenGL ES

One way to look at it is WebGL is OpenGL ES 2.0 and OpenGL ES 2.0 is OpenGL with all the legacy cruft removed. … WebGL/OpenGL ES 2.0 is basic vertex and fragment shaders. …
gman's user avatar
  • 850
1 vote

Unstable sampled color in GLSL shader

Being that it's WebGL it seems like it would be easy to post a simple example. Make a texture using canvas2d. Put a red block and and a blue block in the texture. …
gman's user avatar
  • 850
1 vote

Rendering a 2D tree in WebGL

And then you can still draw out of order As for "orthographic projection" neither WebGL nor OpenGL require any kind of projection. … Projection is a term left over from the old fixed function pipeline that is not part of modern OpenGL or WebGL. …
gman's user avatar
  • 850
2 votes
Accepted

unity webgl scale page on different sizes of internet browsers on pc or phone

gameContainer", "Build/dist.json"); </script> </head> <body> <div id="gameContainer"></div> </body> </html> Then you pick Edit->Project Settings->Player from the menus and under the WebGL
gman's user avatar
  • 850
2 votes

How to copy text from an InputField to the clipboard in WebGL?

On copy ask the inputfield to copy then pass unity's clipboard back to the browser Here's some code and a working example https://github.com/greggman/unity-webgl-copy-and-paste …
gman's user avatar
  • 850
2 votes
Accepted

"RENDER WARNING: there is no texture bound to the unit 0" When not Rendering Texture

sampler2D tex; uniform vec4 u_color; void main() { vec4 t_color = texture2D(tex, gl_PointCoord.xy); gl_FragColor = u_color * t_color; } `; const gl = document.querySelector('canvas').getContext('webgl
gman's user avatar
  • 850
2 votes
Accepted

Unpacking Sprite Sheet Into 2D Texture Array

(gl.TEXTURE_2D_ARRAY, tex); const levels = 7; const width = 128; const height = 128; const depth = 8; gl.texStorage3D(gl.TEXTURE_2D_ARRAY, levels, gl.RGBA8, width, height, depth); // Tell WebGL … the size of one row gl.pixelStorei(gl.UNPACK_ROW_LENGTH, img.width); for (let d = 0; d < depth; ++d) { const xoff = d % 4 * width; const yoff = (d / 4 | 0) * height; // Tell WebGL where …
gman's user avatar
  • 850
0 votes

Noisy edges, smoothing out edges between faces via fragment shader

I'm sure that "could" be solved with some image algorithm but if it was me I'd probably solve it with textures. I'd make hexagonal textures, put them all in a texture atlas, then for each hexagon I'd …
gman's user avatar
  • 850
4 votes
Accepted

Efficient Dynamic Memory Management

deleteBuffer will delete the buffer in WebGL (and OpenGL) but I'm just curious, is there any reason not to just reuse the same buffer just put new data in it? (eg. have a pool of buffers?) …
gman's user avatar
  • 850
2 votes
Accepted

What are "free vertex indices" in WebGL 2 and how do they relate to geometry shaders?

I'm just guessing it's using gl_VertexID to generate vertices in the shader. Example: function main() { const gl = document.querySelector("canvas").getContext("webgl2", { alpha: false }); if …
gman's user avatar
  • 850