WebGL is a Javascript API for rendering interactive 3D / 2D graphics on the HTML5 canvas element. It is based on OpenGL ES 2.0.
0
votes
0answers
28 views
Web-Based Traffic Simulation based on Discrete Event SImulation + AI
I'm working on the application of 2D web-based traffic simulation. I am looking for a library that is suitable for my application.
I'm making an application based on discrete event simulation, each ...
0
votes
1answer
49 views
One draw call with one big mesh VS many draw calls with many little meshes
I have read that in order to optimize WebGL application, one should reduce an amount of draw calls. But does it mean that computing a one big mesh from all single meshes on CPU by modifying vertices ...
0
votes
1answer
215 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 ...
2
votes
2answers
61 views
Linking one uniform variable to many shaders
Let's say, that I have 3 programs, and in each of those programs there is a view matrix uniform, which should be the same in all those programs.
Right now, when my camera moves, I need to re-upload ...
2
votes
2answers
121 views
Strange if-else branching behavior in a fragment shader
In my fragment shader I have passed an uniform int uLightType variable, which indicates what type of light is in usage right now. The problem is that if-else branching does not work correctly - the ...
1
vote
1answer
114 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 ...
1
vote
0answers
79 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 ...
2
votes
1answer
104 views
10% idle time in WebGL
I'm using requestAnimationFrame to handle my frame rate in a WebGL game, and running through the Chrome profile shows that a solid 10% of the time is spent in (idle). Why is that? How can I reduce ...
-2
votes
1answer
52 views
List of GLSL ES built-in variables
I am writing an article on WebGL and three.js, I'm trying to search all the built-in variables available in the vertex and fragment shader.
I've found many sites mentioning some, for example:
...
1
vote
0answers
88 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 ...
0
votes
1answer
66 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 ...
1
vote
1answer
93 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 ...
0
votes
1answer
46 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 ...
1
vote
1answer
100 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
2answers
112 views
How to use blender files in your own engine?
It is not trivial to use your own shader on blender, so I've created a good-looking webgl shader. Now, what do I need to use the things I made in blender on it? An obvious first idea would be to parse ...
1
vote
1answer
187 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 ...
0
votes
1answer
87 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
86 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]);
...
1
vote
1answer
71 views
UV Texture coordinates out of [0,1] (WebGL)
I'm creating a 3D game with WebGL and i'm using Wavefront Objects as a base model format.
I recently found some models, their texture coordinates of which are out of the typical [0,1] range and i ...
3
votes
2answers
136 views
Loading chunks of the terrain relative to the player's position
I'm making a small voxel-based multiplayer WebGL game with a Node.JS server which handles player positions and sends terrain chunk data to the clients. This is an example of how I'm currently sending ...
0
votes
1answer
213 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 ...
1
vote
1answer
63 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 ...
0
votes
0answers
42 views
Is it possible or not to share a geometry among many meshes and applied a different shaderMaterial for each?
I instanciate one PlaneGeometry, then I instanciate 200 meshes sharing this geometry and with their own instance of a given shaderMaterial. Here is a simplified version of the code :
...
var geom = ...
6
votes
1answer
230 views
Should the Oj lobe of a Lafortune shader cause the light to be displaced?
I implemented the Lafortune shader in WebGL, and my biggest concern is about this formula:
Explanation
Kd/Ks is the material diffuse/specular color, Ļd/Ļs is the light diffuse/specular ...
1
vote
1answer
163 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, ...
0
votes
1answer
59 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 ...
13
votes
2answers
894 views
How can I simulate a limited (256) color palette in OpenGL?
On Twitter, I found this screenshot of a game in development:
The image on top seems to be without any color limitation. But the two other pictures at the bottom have a 256 color palette.
I want ...
0
votes
1answer
114 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 ...
2
votes
1answer
175 views
How can I render a single object that uses multiple textures?
I'm looking for a technique to render an object with multiple texture sources. One texture is static, the other is generated dynamically (it's a render target). For example, say I was rendering a TV. ...
2
votes
1answer
154 views
Color bleed on voxel edges when using anti-aliasing
My Minecraft-like game uses a texture containing four block IDs in each pixel (RGBA). These IDs are used in the shader to determine what color each whole block should be.
I'm having an issue with ...
0
votes
0answers
31 views
Strauss model : no specular component [duplicate]
I implemented the Strauss model with the metalness, transparency and smoothness parameters, taking the formulas from the book "Programming vertex geometry and pixel shaders", this is how I implemented ...
1
vote
2answers
244 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 ...
0
votes
0answers
93 views
How can I compute spotlight attenuation when I only have a spotlight cutoff angle?
I am trying to compute the spot light attenuation, though I don't have a spotCosCutoff (cosine of the spotlight cutoff angle) predefined variable in the shader so I have to compute it myself. This is ...
0
votes
2answers
82 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
298 views
Having a problem with texturing vertices in WebGL, think parameters are off in the image?
I'm having a problem texturing a simple rectangle in my WebGL program, I have the parameters set as follows:
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, textureImage);
I'm ...
0
votes
1answer
155 views
WebGL CORS error loading simple texture in Chrome
Here's my code:
function loadTexture() {
textureImage = new Image();
textureImage.onload = function() {
setupTexture();
}
textureImage.src = "jumper2.png";
}
function ...
1
vote
1answer
195 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
263 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
0answers
69 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 ...
4
votes
2answers
526 views
blending with the foreground but not the background
I want to draw some very-semi-transparent objects on top of my scene and have them blend nicely with the other pixels in the scene, but not blend with the background; if I draw a semi-transparent ...
0
votes
1answer
939 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.
3
votes
2answers
806 views
scaling point sprites with distance
How can you scale a point sprite by its distance from the camera?
GLSL fragment shader: gl_PointSize = size / gl_Position.w; seems along the right tracks; for any given scene all sprites seem nicely ...
1
vote
0answers
101 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, ...
3
votes
1answer
653 views
Proper way to maintain Vertex Buffer Objects
I've started learning WebGL, currently I'm building a 2D lighting system, but there is some confusion going on inside my head.
How the lighting works is based on this tutorial ...
1
vote
3answers
346 views
Can Simple Direct Media Layer be used with WebGL?
I have read that on desktop OpenGL + SDL is a great way to learn. In looking at WebGL I couldn't find a Web version of SDL. On their site I see bindings for all sorts of languages, but no JavaScript. ...
4
votes
3answers
748 views
why is it faster to draw lots of small arrays than one big array?
This application on-line here has interesting performance characteristics:
Sorting the rectangles to be drawn so it keeps having to change colour is faster than sorting the rectangles by their colour ...
2
votes
1answer
260 views
mat3x4 in webGL shaders
I am porting the IQM bone animation format to Javascript and have run into a problem...
The vertex shader is failing to compile and the only error message I get out is 'mat3x4' : syntax error on the ...
-4
votes
2answers
197 views
enemy shooting towards FPS [closed]
WELL first of all I want you to see my game (its deployed on heroku cloud) :
http://still-escarpment-3701.herokuapp.com
(It takes almost 10 sec to load so please wait for couple of sec)
I have ...
1
vote
0answers
421 views
shader-based particle systems
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 ...
-5
votes
1answer
499 views
How can I create a WebGL camera based on quaternions?
I am trying to create a WebGL camera based on quaternions. I looked at many tutorials, and none is as simple as it could be or it was not working. How can I create such a camera?
