Ползунки с плавающей точкой HTML5 и Javascript

Question

Я учусь, как сделать перспективный рендеринг, используя точки обзора и проекционные матрицы в WebGL. Я создал ползунки для изменения векторов "глаз", "вверх" и "вверх" в каждом из трех измерений, чтобы изменить фактические значения, однако ползунок скользит только по целым числам. Как мне заставить его перемещаться через все реалы между границами?

var gl;
var canvas;
var program;
var points = [];
var colors = [];
var numVertices = 18;

var near;
var far;
var fovy;
var aspect;
var VMatrixLoc, PMatrixLoc;
var vs_ViewMatrix, vs_ProjMatrix;

var eyePt;
var atPt;
var upVec;

var faceColors = [
    [ 0.0, 0.0, 0.0, 1.0 ],  // black
    [ 1.0, 0.0, 0.0, 1.0 ],  // red
    [ 1.0, 1.0, 0.0, 1.0 ],  // yellow
    [ 0.0, 1.0, 0.0, 1.0 ],  // green
    [ 0.0, 0.0, 1.0, 1.0 ],  // blue
    [ 1.0, 0.0, 1.0, 1.0 ],  // magenta
    [ 0.0, 1.0, 1.0, 1.0 ],  // cyan
    [ 1.0, 1.0, 1.0, 1.0 ]   // white
];

window.onload = function init()
{
    canvas = document.getElementById("gl-canvas");

    gl = WebGLUtils.setupWebGL(canvas);
    if (!gl){ alert("not available."); }

    buildTriangles();

    gl.viewport(0, 0, canvas.height, canvas.width);
    gl.clearColor(1, 1, 1, 1);
    gl.enable(gl.DEPTH_TEST);

    program = initShaders(gl, "vertex-shader", "fragment-shader");
    gl.useProgram(program);

    loadVerts(program);
    loadColors(program);

    eyex = document.getElementById("eyesliderx");
    eyey = document.getElementById("eyeslidery");
    eyez = document.getElementById("eyesliderz");
    atx = document.getElementById ("atsliderx" );
    aty = document.getElementById ("atslidery" );
    atz = document.getElementById ("atsliderz" );
    upx = document.getElementById ("upsliderx" );
    upy = document.getElementById ("upslidery" );
    upz = document.getElementById ("upsliderz" );

    render();
}

function loadVerts(program)
{
    // Load the vertices for the triangles and enable the attribute vPosition
    var vBuffer = gl.createBuffer();
    gl.bindBuffer( gl.ARRAY_BUFFER, vBuffer );
    gl.bufferData( gl.ARRAY_BUFFER, flatten(points), gl.STATIC_DRAW );

    var vPosition = gl.getAttribLocation( program, "vPosition" );
    gl.vertexAttribPointer( vPosition, 4, gl.FLOAT, false, 0, 0 );
    gl.enableVertexAttribArray( vPosition );
}

function loadColors(program)
{
    // Load the colors for the triangles and enable the attribute vColor
    var cBuffer = gl.createBuffer();
    gl.bindBuffer( gl.ARRAY_BUFFER, cBuffer );
    gl.bufferData( gl.ARRAY_BUFFER, flatten(colors), gl.STATIC_DRAW );

    var vColor = gl.getAttribLocation( program, "vColor" );
    gl.vertexAttribPointer( vColor, 4, gl.FLOAT, false, 0, 0 );
    gl.enableVertexAttribArray( vColor );
}

function buildTriangles()
{
    var verts = [
        vec4( 0.75,  1.0, -4.0, 1.0),
        vec4( 0.25, -1.0, -4.0, 1.0),
        vec4( 1.25, -1.0, -4.0, 1.0),

        vec4( 0.75,  1.0, -2.0, 1.0),
        vec4( 0.25, -1.0, -2.0, 1.0),
        vec4( 1.25, -1.0, -2.0, 1.0),

        vec4( 0.75,  1.0,  0.0, 1.0),
        vec4( 0.25, -1.0,  0.0, 1.0),
        vec4( 1.25, -1.0,  0.0, 1.0),

        vec4(-0.75,  1.0, -4.0, 1.0),
        vec4(-0.25, -1.0, -4.0, 1.0),
        vec4(-1.25, -1.0, -4.0, 1.0),

        vec4(-0.75,  1.0, -2.0, 1.0),
        vec4(-0.25, -1.0, -2.0, 1.0),
        vec4(-1.25, -1.0, -2.0, 1.0),

        vec4(-0.75,  1.0,  0.0, 1.0),
        vec4(-0.25, -1.0,  0.0, 1.0),
        vec4(-1.25, -1.0,  0.0, 1.0)
    ];

    for (var i = 0; i < verts.length; ++i)
    {
        points.push(verts[i]);
        colors.push(faceColors[i%3]);
    }
}

function setViewProjection()
{
    VMatrixLoc = gl.getUniformLocation(program, "vs_ViewMatrix");
    PMatrixLoc = gl.getUniformLocation(program, "vs_ProjMatrix");

    if (!VMatrixLoc || !PMatrixLoc){ console.log("failed"); }

    eyePt = vec3(eyex.value, eyey.value, eyez.value);
    atPt = vec3(atx.value, aty.value, atz.value);
    upVec = vec3(upx.value, upy.value, upz.value);

    vs_ViewMatrix = lookAt(eyePt, atPt, upVec);

    fovy = 50;
    aspect = canvas.width/canvas.height;
    near = 1;
    far = 100;
    vs_ProjMatrix = perspective(fovy, aspect, near, far);

    gl.uniformMatrix4fv(VMatrixLoc, false, flatten(vs_ViewMatrix));
    gl.uniformMatrix4fv(PMatrixLoc, false, flatten(vs_ProjMatrix));
}

function render()
{
    gl.clear( gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
    gl.clearColor(0.0, 0.0, 0.0, 0.1);

    setViewProjection();

    gl.drawArrays( gl.TRIANGLES, 0, numVertices );
    requestAnimFrame( render );
};

Вот мой HTML-код:

<!DOCTYPE html>
<html>
<script id="vertex-shader" type="x-shader/x-vertex">
attribute  vec4 vPosition;
attribute  vec4 vColor;
varying    vec4 fColor;

uniform    vec3 theta;
vec3 angles = radians( theta );
vec3 c = cos( angles );
vec3 s = sin( angles );
mat4 rx = mat4( 1.0,  0.0,  0.0, 0.0,
                0.0,  c.x,  s.x, 0.0,
                0.0, -s.x,  c.x, 0.0,
                0.0,  0.0,  0.0, 1.0 );

mat4 ry = mat4( c.y, 0.0, -s.y, 0.0,
                0.0, 1.0,  0.0, 0.0,
                s.y, 0.0,  c.y, 0.0,
                0.0, 0.0,  0.0, 1.0 );


mat4 rz = mat4( c.z,  s.z, 0.0, 0.0,
               -s.z,  c.z, 0.0, 0.0,
                0.0,  0.0, 1.0, 0.0,
                0.0,  0.0, 0.0, 1.0 );

uniform    mat4 vs_ViewMatrix;
uniform    mat4 vs_ProjMatrix;
void main()
{       
    fColor = vColor;
    gl_Position = vs_ProjMatrix * vs_ViewMatrix * vPosition;
}

</script>
<script id="fragment-shader" type="x-shader/x-fragment">

precision mediump float;

varying vec4 fColor;

void main()
{
    gl_FragColor = fColor;
}
</script>

<script type="text/javascript" src="../Blowhorn/webgl-utils.js"></script>
<script type="text/javascript" src="../Blowhorn/initShaders.js"></script>
<script type="text/javascript" src="../Blowhorn/MV.js"></script>
<script type="text/javascript" src="perspective.js"></script>

<body>
<canvas id="gl-canvas" width="512" height="512">
Oops ... your browser doesn't support the HTML5 canvas element
</canvas>

<br/>
//tried making values floats but still does not have intended effect
<input id="eyesliderx" type="range" min="-5.0"   max="5.0"   value="0.0" 
class="slider">
<input id="eyeslidery" type="range" min="-5"   max="5"   value="0" 
class="slider">
<input id="eyesliderz" type="range" min="-5"   max="5"   value="5" 
class="slider">
<input id="atsliderx"  type="range" min="-5"   max="5"   value="0" 
class="slider">
<input id="atslidery"  type="range" min="-5"   max="5"   value="0" 
class="slider">
<input id="atsliderz"  type="range" min="-100" max="100" value="0" 
class="slider">
<input id="upsliderx"  type="range" min="-1"   max="1"   value="0" 
class="slider">
<input id="upslidery"  type="range" min="-1"   max="1"   value="1" 
class="slider">
<input id="upsliderz"  type="range" min="-1"   max="1"   value="0" 
class="slider">
<button id="reset">Reset</button>

</body>
</html>