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
0answers
39 views
Adding rivers to procedural generated terrain [on hold]
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
0answers
58 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
37 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
41 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
58 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
0answers
64 views
Making a web game [closed]
newbie here,
I am going to start developing my first web based game. I am planing to create an isometric game (2.5D) what are your suggestions on game engines/frameworks to use? should I create it ...
1
vote
1answer
67 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
0answers
35 views
Threejs skinned skeletal mesh animation flicker..using SpeedBlendCharacter
so I've been playing around with the character controller from this URL, which I got from digging around on the internet :)
http://www.realitymeltdown.com/WebGL3/character-controller.html
it runs ...
0
votes
1answer
43 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
87 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
106 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
177 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
79 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
68 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
41 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
101 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
143 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
60 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
37 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
213 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
129 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
40 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
806 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
112 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
149 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
148 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
208 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
68 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
79 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
256 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
137 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
181 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
242 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
67 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
456 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
0answers
58 views
Rotation of a car? [duplicate]
I am working on a game. I want to rotate enemies car so that they face the player car and move to approach it. I tried couples of techniques and algorithm but did not get fruitful results. I want to ...
-1
votes
1answer
814 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
677 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
95 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
490 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
313 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
708 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
244 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
195 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
401 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
472 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?
0
votes
1answer
263 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 ...
1
vote
1answer
297 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 ...
5
votes
1answer
1k views
What's the difference between Canvas and WebGL?
I'm thinking about using CAAT as a part of a HTML5 game engine. One of it's features is the ability to render to Canvas and WebGL without changing anything in the client code. That is a good thing, ...
