Computer Graphics Stack Exchange
Computer Graphics Stack Exchange

Questions tagged [webgl]

WebGL extends the capability of the HTML canvas element to allow it to render accelerated 3D graphics in any compatible web browser.

WebGL is OpenGL ES 2.0 graphics for web pages. It extends the capability of the HTML canvas element to allow it to render accelerated 3D graphics in any compatible web browser.

WebGL is based on OpenGL ES 2.0 and is driven via a JavaScript API. It does not require the use of plug-ins. Official specifications and additional information can be found at Khronos.

Engines:

There are also many different webGL based 3D engines available:

Getting started with webGL:

Start with WebGLFundamentals.org.

Other resources include LearningWebGL. LearningWebGL has basic tutorials.

If you don't want to learn WebGL and you just want to use a library that makes it easy to display 3d three.js is the most popular 3d library and there are plenty of Three.js tutorials and examples here - LearningThreeJS.

85 questions
9
votes
0 answers

WebGL packing/unpacking functions that can roundtrip all typical 32-bit floats

I have a WebGL circuit simulator. One of the problems it has is that, due to using quite a lot of intermediate float textures as it simulates, it doesn't work on various mobile devices. They only support byte textures. My intended solution to this…
Craig Gidney
  • 191
  • 3
5
votes
1 answer

Problems rendering a plane via `drawElements`

I am generating plane vertices where the y values are generated by a heightmap (noise) algorithm. This is how I produce my vertex array: for (let row = 0; row < noise.length; row++) { for (let col = 0; col < noise[0].length; col++) { …
チーズパン
  • 27
  • 2
  • 14
5
votes
1 answer

Unable to render a Waveront model in WebGL2

I am following the WebGL2Fundametals tutorial. Using some sample (cube) data I was able to successfully call gl.drawElements(); using index, normal and geometry data. This are my fragment and vertex shaders: Fragment shader: #version 300 es …
チーズパン
  • 27
  • 2
  • 14
5
votes
1 answer

Bitpacking into buffers with webgl (shadertoy)

I'm working on a webgl pixel shader which is writing to a 16 bit floating point buffer (each color channel r,g,b,a is a 16 bit floating point number). I'm trying to figure out if there are any decent ways to pack the following info into those 16…
Alan Wolfe
  • 7,801
  • 3
  • 30
  • 76
3
votes
1 answer

Does WebGL 2 support linear depth texture sampling?

With WebGL 1 we can use WEBGL_draw_buffers extension which lets us use a texture as the depth attachment on the frame buffer. And we can chose to use LINEAR or NEAREST as the filtering…
zoran404
  • 153
  • 9
2
votes
2 answers

What is the technique to generate an oblique 3d cone?

Oblique meaning not a regular cone; its apex makes an angle to the base. An alternate way of visualizing this: consider a sphere centered at the origin. The sphere traces a circle on the XY-plane. Now consider a point A anywhere on the sphere, and…
deostroll
  • 121
  • 3
2
votes
0 answers

Is it worth caching uniform values?

Consider something like the following for webgl (untested but should work): const lookup = new Map(); const isEqual3fv = (v1, v2) => { return v1[0] === v2[0] && v1[1] === v2[1] && v1[2] === v2[2]; } const setUniform3fv = (location, value) => { …
davidkomer
  • 121
  • 1
2
votes
0 answers

WebGL- moving an object in the line of sight

I defined my Model-View Matrix defining a function lookAt that represents the eye of the camera, the position of the object that I'm representing and the "up" vector of the camera. How can I move the object in the line of sight of the camera? Any…
B.junior
  • 41
  • 1
  • 6
1
vote
1 answer

How to load a model in .json in three.js

I need to load a model "somemodel.json" into my "movie.js".Can someone tell me where i am going wrong.I followed the steps given here. index.html Test …
Sri Sanketh Uppalapati
  • 111
  • 1
  • 3
0
votes
0 answers

Advice on Implementing View-Dependent LOD and Progressive Rendering for Real-Time Visualization

I'm working on a project that involves real-time visualization of large datasets to create detailed surfaces from heightmap representations. As I'm relatively new to the field of real-time rendering, I'm exploring techniques to improve performance…
mattoro
  • 1
0
votes
1 answer

Let GPU write to itself

As someone who is trying to dive into WebGL for parallelizing simulations, or Machine Learning, or typical IIR filters I've come to realize that for everything that I want to do requires the GPU to update itself and send "gossip" signals to the…
Harry Svensson
  • 103
  • 4