PixelArray to teximage2d


I am using a Float32Array as input to teximaged2d. Basically using this signature-

void texImage2D(GLenum target, GLint level, GLenum internalformat, 
                    GLsizei width, GLsizei height, GLint border, GLenum format, 
                    GLenum type, ArrayBufferView pixels);

My question is-

Can the range of values in ArrayBufferView be outside 0-1. Can I have any arbitrary float values.

I used WebGL Inspector to examine the texture object. I don’t get any errors, and the associated pixel array has correct values.

Now when I use a Sampler2D with this texture in fragment shader, scale and clamp the color vector, I get a black image.

Here’s the snippet in JS to create the texture-

gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, width, height, 0, gl.RGB, gl.FLOAT, pixels);

In the fragment shader-

uniform sampler2D texture_floats;
varying vec2 vTexCoord;

void main(void) {
vec3 color = texture2D(texture_floats, vTexCoord).rgb;
color = 0.0001*color;
for (int i=0; i<3;i++) { 
        if (color[i] < 0.0) {
            color[i] = 0.0; 
        else {
        if (color[i] > 1.0) {
            color[i] = 1.0; }

    gl_FragColor = vec4(color, 1.0);

Can the sampler2D and tetxure2D in fragment shader handle arbitrary floats. Is the output at the end of this line already clamped-

vec3 color = texture2D(texture_floats, vTexCoord).rgb;

Thanks for the help.

You might need to change your webgl initialization for that to work.

gl = canvas.getContext("experimental-webgl", {preserveDrawingBuffer: true});