WebGL is a Javascript API for rendering interactive 3D / 2D graphics on the HTML5 canvas element. It is based on OpenGL ES 2.0.
1
vote
1answer
31 views
(Three.js) - What object3D properties are required to make rayCaster.intersectObjects() work?
FYI, i am trying to do something almost identical to the following:
Merging geometry/mesh without losing benefits
I essentially have a list of Three.object3D's. These objects are "merged" together ...
1
vote
0answers
40 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
votes
0answers
91 views
Best real-time method for fast glass rendering (like cups, vases, sculptures etc.) in WebGL
I am looking to use the best method available for fast rendering glass architectural features (like cups, vases, sculptures) in WebGL. I am not interested in writing a full ray-tracer.
I was ...
3
votes
1answer
53 views
Confused about Max Vertex Uniform Vector limit
While coding my WebGL app I've encountered an interesting phenomena:
On my first PC (with GPU Radeon HD 5850), BrowserLeaks (link) tells me that in my browser - Google Chrome Version 36.0.1985.143m ...
2
votes
1answer
359 views
Orthographic Camera and Raycasting in Three.js
I'm working on a test project porting a simple game from iOS to Javascript. I've got the orthographic camera working and it can view the objects in the scene and move up and down the tower of meshes ...
0
votes
0answers
42 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
83 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
344 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
67 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
159 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
197 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
114 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 ...
3
votes
2answers
136 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
66 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
142 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
102 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
128 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
54 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
132 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
115 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
225 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
105 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
129 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
117 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
185 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
302 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
71 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
1answer
62 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
244 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
266 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
69 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
1k 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
127 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
220 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
175 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
321 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
123 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
88 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
376 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
172 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
218 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
314 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
71 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
649 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
1k 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
998 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
111 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
865 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
387 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. ...
