FAQ: Difference between revisions
start faq |
No edit summary |
||
| Line 1: | Line 1: | ||
= | = Programming = | ||
== What is the recommended way to initialize WebGL? == | |||
== What is the recommended way to implement a rendering loop? == | |||
It is HIGHLY recommended you use ''requestAnimationFrame'' if it is available. [https://cvs.khronos.org/svn/repos/registry/trunk/public/webgl/sdk/demos/common/webgl-utils.js There is a small cross browser wrapper available here]. | |||
<pre> | |||
<html> | |||
<body> | |||
<script type="text/javascript" src="localpath/webgl-utils.js"></script> | |||
<script> | |||
function init() { | |||
canvas = document.getElementById("c"); | |||
... | |||
// render the first frame. | |||
render(); | |||
} | |||
function render() { | |||
// request render to be called for the next frame. | |||
WebGLUtils.requestAnimationFrame(canvas, render); | |||
// get the current animation time. | |||
var currentAnimationTime = WebGLUtils.animationTime(); | |||
... | |||
// render scene | |||
... | |||
} | |||
</script> | |||
<canvas id="c"></canvas> | |||
</body> | |||
</html> | |||
</pre> | |||
== What is the recommended way to handle lost context? == | |||
== Why don't textures work in my vertex shader on browser/machine/os XXX? == | == Why don't textures work in my vertex shader on browser/machine/os XXX? == | ||
| Line 24: | Line 61: | ||
</pre> | </pre> | ||
== Why do I get an error with gl.framebufferTexture2D on certain machines == | == Why do I get an error with gl.framebufferTexture2D on certain machines/browsers? == | ||
There is a bug in many NVidia drivers that requires that textures passed to framebufferTexture2D be renderable. In other words, they either must have all required mips or else must set filtering to not require mips. Since the texture is not renderable without those settings, set the texture parameters before calling framebufferTexture2D | There is a bug in many NVidia drivers that requires that textures passed to framebufferTexture2D be renderable. In other words, they either must have all required mips or else must set filtering to not require mips. Since the texture is not renderable without those settings, set the texture parameters before calling framebufferTexture2D | ||
Revision as of 21:01, 20 December 2010
Programming
What is the recommended way to initialize WebGL?
What is the recommended way to implement a rendering loop?
It is HIGHLY recommended you use requestAnimationFrame if it is available. There is a small cross browser wrapper available here.
<html>
<body>
<script type="text/javascript" src="localpath/webgl-utils.js"></script>
<script>
function init() {
canvas = document.getElementById("c");
...
// render the first frame.
render();
}
function render() {
// request render to be called for the next frame.
WebGLUtils.requestAnimationFrame(canvas, render);
// get the current animation time.
var currentAnimationTime = WebGLUtils.animationTime();
...
// render scene
...
}
</script>
<canvas id="c"></canvas>
</body>
</html>
What is the recommended way to handle lost context?
Why don't textures work in my vertex shader on browser/machine/os XXX?
WebGL conforms to the OpenGL ES 2.0 spec in this regard. Implementations advertise how many textures can be accessed in a vertex shader with
var numTexturesAvailableInVertexShader = gl.getParameter(gl.MAX_VERTEX_TEXTURE_IMAGE_UNITS)
That value is allowed to be 0. In which case your code must take appropriate action.
Why don't my textures render?
WebGL conforms to the OpenGL ES 2.0 spec in this regard. Textures that are non-power-of-two (NPOT) do not render unless texture filtering is set so it does not require mips and texture wrapping is set to CLAMP_TO_EDGE. The default parameters of a texture require mips and are set to wrap so you must set the texture parameters appropriately.
gl.bindTexture(gl.TEXTURE_2D, someNPOTTexture); // Turn off the need for mips. gl.texParameter(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); // Set wrapping to CLAMP_TO_EDGE gl.texParamater(gl.TEXTURE_2D, gl.WRAP_S, gl.CLAMP_TO_EDGE); gl.texParamater(gl.TEXTURE_2D, gl.WRAP_T, gl.CLAMP_TO_EDGE);
Why do I get an error with gl.framebufferTexture2D on certain machines/browsers?
There is a bug in many NVidia drivers that requires that textures passed to framebufferTexture2D be renderable. In other words, they either must have all required mips or else must set filtering to not require mips. Since the texture is not renderable without those settings, set the texture parameters before calling framebufferTexture2D
var fbo gl.createFramebuffer(); gl.bindFramebuffer(gl.FRAMEBUFFER, fbo); var tex gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, tex); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.RGBA, null); // Turn off the need for mips. gl.texParameter(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); // Set wrapping to CLAMP_TO_EDGE gl.texParamater(gl.TEXTURE_2D, gl.WRAP_S, gl.CLAMP_TO_EDGE); gl.texParamater(gl.TEXTURE_2D, gl.WRAP_T, gl.CLAMP_TO_EDGE); gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, tex, 0);