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

learn more… | top users | synonyms

1
vote
1answer
3k views

How to draw a circle with WebGL using GL_POINTS [closed]

I'm trying to draw a circle using simple vertices points and a big gl_PointSize value. I found this example and try to reproduce it on WebGL with no success.
1
vote
2answers
584 views

How is JS source protected in Chrome games?

I was playing a space arcade shooter https://moonbreakers.com/ and tried to see some of the JS and shader code. However, I was unable to find anything but some server communication code. Game code is ...
1
vote
2answers
52 views

Applicaton.ExternalEval(String script)

I was wondering, if Application.ExternalEval(String script); in Unity3D can return something. Like:String playerName = Application.ExternalEval("prompt("Please enter your name", "player1")"); Thank ...
1
vote
1answer
73 views

How are CSS and WebGL coordinates related? [closed]

I'd like to build a simple framework which rendering combines web page DOM elements with WebGL, such that they're manipulable in the same coordinate space. How does the plain CSS coordinate system ...
1
vote
1answer
126 views

Why does everything appear backwards when using orthographic projection?

I may not be calculating my orthographic projection matrix properly. What can I do to ensure that my scene renders correctly when using orthographic projection? The rendering order appears to be ...
1
vote
1answer
323 views

WebGL immediate mode

I know that WebGL is based on OpenGL ES 2.0 and that glBegin and glEnd have been removed and replaced with vertex buffer objects. I understand that VBOs are faster and use less code but is there a ...
1
vote
1answer
564 views

WebGL: Texture appears as black

I have a simple WebGL canvas, where I'm attempting to render a texture on a square. When working with textures as local files, all is fine. But when I try to load a texture from the web, I get a black ...
1
vote
2answers
360 views

What kind of physics to choose for our arcade 3D MMO?

We're creating an action MMO using Three.js (WebGL) with an arcadish feel, and implementing physics for it has been a pain in the butt. Our game has a terrain where the character will walk on, and in ...
1
vote
1answer
106 views

Techniques for drawing lines, with mouse, on 3D objects in WebGL or OpenGL?

Can anyone point me to techniques for drawing lines, with the mouse, on 3D objects in WebGL or OpenGL? Here's the effect I'm looking for, using WebGL: http://www.spacegoo.com/cadillac/ I can imagine ...
1
vote
1answer
248 views

GPU skinning algorithm incorrectly distorts mesh

I've been trying to implement a GPU-based matrix palette skinning algorithm with WebGL, but the rendering appears incorrect even though I can't find evident conceptual problems in the underlying ...
1
vote
1answer
672 views

How to draw many identical quads in WebGL efficiently?

I have recently been trying to develop a more basic one of those 'falling sand'/'powder game' style games (See here) the past few months, and after prototyping on a plain canvas, then trying PIXI.js, ...
1
vote
2answers
618 views

Ward model implementation: specular component too weak

I'm trying to implement the Ward shading model, the anisotropic, computationally efficient version: This is how I made it: float alphaX=0.5, alphaY=0.5; // asinotropic roughness float ...
1
vote
1answer
450 views

How to manage frustum culling

I have a spherical clipmap based planet terrain. The entire planet is made from a ring geometry of 1 unit which the vertex shader moves to cover the entire planet of 6 million unit radius. But the ...
1
vote
1answer
706 views

Problem when animating MD5 model (GPU Skinning)

I'm trying to implement a GPU skinning version of the md5mesh.js by @tojiro (demo with CPU skinning) in WebGL (live demo of the project here, use WASD to move the camera around). The main concept is ...
1
vote
1answer
170 views

How do I draw a multi-object mesh at once?

This is a very elementary question. At the moment I am drawing lots of faces separately by setting a location uniform separately for each one of them. This is very slow. As I understand it, the ...
1
vote
1answer
1k views

WebGL rendering performance and frustum culling

When I render five boxes in WebGL with one texture for all of them, the app runs at 60 FPS, nice. But when I render 70 boxes the performance decreases to ~40fps... but only 5 of the boxes are visible. ...
1
vote
1answer
264 views

Can you have shader variables that vary per primitive?

A shader normally has values that vary per-vertex and values that vary per-fragment. Can you have values that vary only per primitive, such as per-triangle or per-quad?
1
vote
1answer
61 views

WebGL half float equivelant?

I'm trying to find a half float for the purposes of doing math in a fragment shader, not trying to have a half float texture. Is there an equivalent of the half float data type in WebGL? I know you ...
1
vote
0answers
27 views

WebGL Multiple Lights, Blending, and Render Order

I am trying to do simple forward rendering for multiple lights using additive blending in WebGL. Following advice from this SO and this one, I simply turn on blending using glBlendFunc(GL_ONE, GL_ONE) ...
1
vote
0answers
38 views

Array of script class references in inspector

I'm trying to remove the Reflection part of ones of my scripts so it works in WebGL, however I am having some trouble. Basically I need a way to store references to classes in an Inspector array so ...
1
vote
0answers
58 views

WebGL stereo on Linux

Is there any way for us to use frame-sequential stereo with WebGL without having to boot into Windows and use the DirectX hack?
1
vote
0answers
204 views

Adding rivers to procedural generated terrain [closed]

I have an heightmap generated using libnoise (c++). I am loading it from the babylon.js framework (3dWebGL). I have my heightmap image file and also a river position image file, also generated using ...
1
vote
0answers
330 views

How can I reduce draw calls when using glBufferSubData and DYNAMIC_DRAW?

At first I had the problem where I had about 150 rectangles rendered every tick. I only used STATIC_DRAW and glBufferData. I added support for DYNAMIC_DRAW and glBufferSubData and now I have a very ...
1
vote
1answer
269 views

Custom lookAt function goes wild

I have written a custom lookAt function based on a lot of posts from all over the net, and it works very nice... except when a rotation (which is stored in a quaternion) crosses some 'threshold'. ...
1
vote
1answer
553 views

How can I restrict the rotation of an object to a subset of axes using quaternions?

I've got a question about quaternions in my WebGL application. How can I rotate an object only around two axes? For example, how can I exclude/nullify rotation about the Y axis? The problem is that ...
1
vote
0answers
80 views

Textures occasionally rendering twice on a particular face [closed]

I am learning how to render 3D objects using webgl (no third-party libraries). I am currently facing a very confusing situation however, where my textures are rendering apparently twice over a ...
1
vote
0answers
148 views

Is there an out-of-the-box way to create a custom non-convex polygon in three.js?

Does Three.js offer an out-of-the-box way to create custom non-convex polygon, or do I have to use THREE.Geometry and set faces manually? I'm guessing that ShapeGeometry has something to do with this, ...
1
vote
0answers
557 views

shader-based particle systems [closed]

I have a classic particle system where each particle is represented by a quad and, each time step, I move each particle. My target is webGL which means I don't have instancing, attribute divisors nor ...
1
vote
2answers
468 views

Omni-directional light shadow mapping with cubemaps in WebGL

First of all I must say, that I have read a lot of posts describing an usage of cubemaps, but I'm still confused about how to use them. My goal is to achieve a simple omni-directional (point) light ...
0
votes
2answers
5k views

Best physics engine for OpenGL ES (different implementations)? [closed]

Can you recommend a good physics engine which is easily portable between WebGL and other OpenGL ES implementations like in Android and iPhone? I don't want a game engine. Only the physics part.
0
votes
1answer
160 views

WebGL (three.js) - rendering object behind camera far plane

I need to have one object that is always visible/rendered (a lens flare, to be exact). I don't want to set the camera far plane to the maximum possible distance between camera and the sun (performance ...
0
votes
1answer
121 views

bug in webgl phong shader: lighting rotates with object

I'm working on a simple phong shader in webgl, and I think I'm getting close but something is still wrong. Dead give away: if I have a billboard and have it roll (so it spins like a wheel), the part ...
0
votes
1answer
157 views

Why are some of my normals facing away from the camera?

I'm trying to use WebGL to render some simple models, and I'm running into issues where pixels near the edge of my model are passing normals to my fragment shader that point away from the camera. This ...
0
votes
2answers
127 views

Need to know the origin and coordinates for 2d texture and 2d/3d vertices in webgl

Long story short, I know my coordinates are off and I believe my indices might be off. I'm trying to render a simple 2d rectangle with a texture in webgl here's the code I have for the vbo/ibo: ...
0
votes
1answer
222 views

3d immersive Virtual Conference meeting environment development on the web (3d website)-Help required [closed]

I want to develop 3d immersive virtual collaborative conference meeting environment on the web i.e an immersive virtual environment for our university Teachers to attend and address conference ...
0
votes
1answer
82 views

JavaScript THREE.js webgl spotlight rendering

I'm playing with webgl/JavaScript/THREE and a spotlight. And I see unexpected results. And I don't understand what's going on, and I'm hoping you can point me in the right direction. In my particular ...
0
votes
2answers
316 views

Three.js: Lighting not calculating correctly on THREE.Geometry objects

I have a three.js (REVISION: '68') issue with the lighting of THREE.Geometry objects: I'm using the THREE.Geometry class to build up objects using vertices and faces, then I computeFaceNormals() ...
0
votes
1answer
71 views

Compress 16 bit raw data in webgl

I have a 3D volume where every voxel is 16 bits. Is there anyway I can use some kind of compression to store the data so I can use less video ram? Webgl supported different compressiosn if you enable ...
0
votes
1answer
59 views

How can I make a flapper game that scales to multiple aspect ratios?

So I've never made a game before besides a basic 4:3 aspect ratio flapper, so bare with me. Recently I had this wild idea that I wanted to make this complected (for a 2d) game in cca. Unfortunately ...
0
votes
1answer
119 views

Backface culling without light leaking through

I want to be able to see through walls, so to do this I used planes for the walls, and enabled backface culling. However with shadow mapping I have a lot of light leaking through: I read that using ...
0
votes
1answer
1k views

Is HTML5/WebGL performance unreliable on low-end Android tablets and phones?

I've developed a couple of WebGL games, and am trying them out on Android. I found that they run very slowly on my tablet, however. For example, a game with 10 sprites or so runs as 5fps. I tried ...
0
votes
1answer
126 views

WebGL wrong scaling of rectangle

I'm working with this tutorial http://www.html5rocks.com/en/tutorials/webgl/webgl_transforms/ and my result is, that the rectangle moves in the direction of it's scaling values, and also scales at ...
0
votes
1answer
211 views

Strange quaternion camera streching in WebGL

So after a lot of researching about quaternions I almost got the quaternion camera working. Almost, cause it rotates in a proper way only in a vertical axis. Other rotations stretches and deforms the ...
0
votes
1answer
423 views

(WebGL) Point light per-fragment issue

I'm using an FPS-like camera, this is the code: CAMERA mat4.identity(mat.mvMatrix); mat4.rotate(mat.mvMatrix,degToRad(-camera.pitch),[1,0,0]); ...
0
votes
1answer
527 views

First person camera world matrix issue (in THREE.js and webGL)

I'm trying to create a Portal-like effect in webGL using THREE.js. I have two scenes connected by a pair of portals. The view of the 2nd scene in rendered inside the 1st portal using stencils and ...
0
votes
1answer
106 views

How would one outline an alpha transparency layer in javscript and/or php? [duplicate]

I simply want an outline/edge detection of the character/item/object that is selected or doing something. I'm seeing lots of versions of this question for different languages, but I would appreciate ...
0
votes
1answer
404 views

best way of rendering more 3D models in three.js that not slow down page?

I am in the way of creating a 3D web game using threeJS library. This is a multi-player game that players are 3D human models in game, and I need to add a human 3D model for each player that enters ...
0
votes
1answer
1k views

How can I implement 3D textures using webgl?

I went through the google I/O video but did not get exactly how to do it. If somebody could point me to a simple 3D texture implementation using webgl, it would be helpful. i basically have a volume, ...
0
votes
3answers
2k views

How do I create menu with text in OpenGL?

How would I go about creating a menu system with fonts in OpenGL? I want to make a dungeon crawler and will need a menu for inventory and stats for the weapons. I can draw a world made out of blocks ...
0
votes
0answers
43 views

How to properly use large texture that is not power of 2?

I'm making a 2D game, rendered using WebGL (using ANGLE, which means that on Windows DirectX is actually used). This is desktop-only game, but would be great to be compatible with integrated graphics ...