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

0
votes
1answer
30 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
80 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
163 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 ...
5
votes
1answer
1k views

GLSL pack floats into an RGBA texture

I want to compose conventional triangle-based models and particles with a ray-traced scene at a reasonable frame-rate. webGL does not let you write the gl_FragDepth in the fragment shader. You ...
1
vote
2answers
86 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 ...
0
votes
1answer
63 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 ...
1
vote
2answers
292 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 ...
0
votes
1answer
97 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
45 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
31 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
87 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
0answers
34 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 = ...
1
vote
1answer
50 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 ...
6
votes
1answer
205 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
92 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
37 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
746 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 ...
5
votes
1answer
979 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, ...
0
votes
1answer
109 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
134 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. ...
1
vote
1answer
217 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
2answers
166 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 ...
2
votes
1answer
135 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 ...
0
votes
0answers
56 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 ...
3
votes
2answers
570 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 ...
0
votes
2answers
77 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
220 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
121 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 ...
25
votes
10answers
7k views

Browser-based MMOs (WebGL, WebSocket) [closed]

Do you think it is technically possible to write a fully-fledged 3D MMO client with Browser JavaScript - WebGL for graphics, and WebSocket for Networking? Do you think future MMOs (and games ...
1
vote
1answer
228 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 ...
4
votes
3answers
2k views

List of 3D libraries based on WebGL [closed]

Is there a up-to-date list of WebGL libraries or articals with comparison? Until now I heard only three.js and GLGE.
1
vote
1answer
168 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 ...
0
votes
1answer
189 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 ...
5
votes
4answers
3k views

Can't understand these UV texture coordinates (range is NOT 0.0 to 1.0)

Hey, hello guys, I am trying to draw a simple 3D object generated by Google SketchUp 8 Pro onto my WebGL app, the model is a simple cylinder. I opened the exported file and copied the vertices ...
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
394 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
57 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
724 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
0answers
88 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
429 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 ...
9
votes
4answers
2k views

How to implement mouselook in the browser?

I am currently creating a 3D first-person shooter game in the browser using WebGL. How would I implement mouselook/free look for such a game?
1
vote
2answers
261 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. ...
1
vote
1answer
162 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 ...
4
votes
3answers
678 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 ...
0
votes
1answer
786 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, ...
2
votes
1answer
235 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
192 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
392 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
440 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?