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

25
votes
10answers
8k 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 ...
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 ...
12
votes
3answers
4k views

Is there a way to use an arbitrary number of lights in a fragment shader?

Is there a way to pass an arbitrary number of light locations (and colors) for the fragment shader, and loop over them in the shader? If not, then how are multiple lights supposed to be simulated? ...
10
votes
3answers
1k views

Missing features from WebGL and OpenGL ES

I've started using WebGL and am pleased with how easy it is to leverage my OpenGL (and by extension OpenGL ES) experience. However, my understanding is as follows: OpenGL ES is a subset of OpenGL ...
9
votes
4answers
3k 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?
7
votes
2answers
3k views

Why must the transpose value of glUniformMatrix4fv in webgl/OpenGL ES be false?

Why must the transpose value of glUniformMatrix4fv in webgl/OpenGL ES be false? The OpenGL ES spec says that the transpose value must be false or an INVALID_VALUE is generated. Why then have the ...
6
votes
1answer
263 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 ...
5
votes
1answer
777 views

How do I create a blob shadow under a character?

I have a webgl based 2.5D platformer game, and I would like to add a simple blob shadow under the character to help the player with the platforming. How is this normally done? As you can see below, ...
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, ...
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 ...
5
votes
3answers
5k views

How do I load Collada models into a WebGL app? [closed]

I have written some simple apps following the tutorials on http://learningwebgl.com. What is the simplest way to load and display Collada model files, particularly the files available from Google 3D ...
5
votes
1answer
2k 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 ...
4
votes
3answers
906 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 ...
4
votes
1answer
2k views

Rendering 2d sprites into a 3d world?

In opengl how do I render 2d sprites in opengl given that I have a png of the sprite? See images as an example of the effect I'd like to achieve. Also I would like to overlay weapons on the screen ...
4
votes
3answers
3k 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.
4
votes
2answers
745 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 ...
4
votes
1answer
3k views

How to create a perspective field of view matrix?

Hey, hello. I am learning a little of WebGL (OpenGL ES 2.0) through the http://learningwebgl.com tutorials, but it uses a third party library to create the View, Projection and transformation matrices ...
3
votes
2answers
2k views

How to animate a model in WebGL?

I created a human model in Blender, exported the vertices and indices into a JSON file and render the model in a browser using WebGL. Now I created a walk and jump animation in Blender and would like ...
3
votes
2answers
500 views

What is UVIndex and how do I use it on OpenGL?

I am a noob in OpenGL ES 2.0 (for WebGL) and I'm trying to draw a simple model I've made with a 3D tool and exported to .fbx format. I've been able to draw some models that only have: A vertex buffer, ...
3
votes
1answer
2k views

Unity3d or WebGL: Where should I go?

I am interested in making a simple 3D game this summer, and I'd prefer if it were playable in a browser. My choices I am considering are Unity and WebGL. Currently I have no experience in either. But ...
3
votes
2answers
1k 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 ...
3
votes
2answers
470 views

Is there any reason for doing back face culling in software?

I, a newbie, have been doing back face culling in javascript for my WebGL app because I didn't know gl.cullFace() existed. Is there any reason to use software-based culling instead of just passing all ...
3
votes
2answers
154 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 ...
3
votes
2answers
222 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 ...
3
votes
2answers
2k views

Disable V-sync in WebGL?

Normally my app runs at 60 fps, But when I add some simple models it decreases to 40fps. I think v-sync on, which is might be causing it to run slower. Is there any way to disable v-sync in WebGL? ...
3
votes
2answers
575 views

WebGL geometry calculations

I have a dynamic surface in WebGL, that is animated in vertex shader. I want other objects to interact with this surface (for example, an object riding on dynamic terrain). What's the best way to do ...
3
votes
1answer
1k 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 ...
3
votes
2answers
499 views

Does anyone have a sample for drawing a subdivided icosahedron in javascript, that they would be able to share?

Does anyone have a sample for drawing a subdivided icosahedron in javascript, that they would be able to share?
3
votes
1answer
59 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
5answers
2k views

Are there any good html 5 mmo design tutorials? [closed]

Hey all. I got a rather inspired after playing gaia online's zOMG and wanted to revive an old project idea I've had laying around for a few years now. I'm looking to work with html5 (ie canvas, svg ...
2
votes
1answer
315 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 ...
2
votes
1answer
590 views

What are the texture coordinates for a tetrahedron

EDIT This is the WebGL code for initializing the tetrahedron points. You may want to skip to the second code block, because you may be able to answer without this. //Making a tetrahedron with ...
2
votes
1answer
1k views

Separate shaders from HTML file in WebGL

I'm ramping up on WebGL and was wondering what is the best way to specify my vertex and fragment shaders. Looking at some tutorials, the shaders are embedded directly in the HTML. (And referenced via ...
2
votes
2answers
77 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
1answer
276 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
2answers
4k views

Rotate sphere in Javascript / three.js while moving along x/z plane

I have a sphere/ball in three.js which I want to "roll" around on the x/z plane. For the z axis I could simply do this no matter what the current x and y rotation is: sphere.roll_z = ...
2
votes
2answers
993 views

Why is my quaternion camera rotating around strange axes?

I can't get it to work for the life of me. Its rotating the camera in the global coordinate system, or some other random coordinate system, not the camera local coordinate system. WASDEC work ...
2
votes
1answer
866 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 ...
2
votes
2answers
237 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 ...
2
votes
1answer
206 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 ...
2
votes
2answers
924 views

How do I employ an arcball to allow the user to look around the screen?

How do I apply an arcball (using quaternions) along with mouse events, to allow the user to look around the screen using the o3d WebGL framework? This sample uses the arcball for rotating the ...
2
votes
2answers
1k views

How to rotate an object so it stands correctly (back always facing the camera)

I have the following scene: And I have two 3D vectors, the camera position, and the focus position. The focus vector is always behind the monster. I know how to rotate the camera around the focus ...
1
vote
3answers
461 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
2answers
126 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
4answers
3k views

How can I use WebGL to create a tile-based multi-layer scrolling platform game?

I've found WebGL (based on OpenGL) to be a fiendish and unforgiving framework for those learning to write HTML5-based games. Despite the presence of many examples on how to get started, I'm really ...
1
vote
2answers
538 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
1answer
77 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
244 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
418 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
330 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 ...