tdl

KO | EN

gitlite — search

#python #react #typescript #golang #android #machine-learning #deep-learning #linux #macos #kubernetes #awesome-list #pytorch #ios #mcp

(★ 287)

A low-level WebGL library

File Explorer

Download Latest Version (.zip)

- - sometexture.png
- example-requirejs.html
- example-requirejs.js
- example.html
- example2.html
- line.html
- picking.html
- require.js
- base-rs.js
- base.js
- buffers.js
- clock.js
- error.jpg
- fast.js
- fps.js
- framebuffers.js
- fullscreen.js
- io.js
- loader.js
- log.js
- math.js
- misc.js
- models.js
- particles.js
- primitives.js
- programs.js
- quaternions.js
- screenshot.js
- shader.js
- string.js
- sync.js
- textures.js
- webgl.js
.gitignore
bower.json
docs.md
Gruntfile.js
jsdoc.conf.json
package.json
README.md

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

TDL
===

Please check out [TWGL](http://twgljs.org). It's arguably the spiritual successor to TDL.

TDL is a **low-level** library for WebGL apps. It currently focuses on speed of rendering rather than ease of use.

Some [terse docs can be found at here](docs.md)

Note: By **low-level** I mean TDL doesn't currently provide any 3D knowledge. 
There are almost no built in shaders. There is no scene graph. There are just some objects for wrapping WebGL
shaders and helping to easily associate vertex data with attributes and update uniforms.

Example: Assuming a shaders like this.

In WebGL you'd do this

// At init time:
    var program = UtilToCompileShaders("vshader", "fshader");
    var positionLoc = gl.getAttribLocation(program, "position");
    var texcoordLoc = gl.getAttribLocation(program, "texcoord");
    var worldMatLoc = gl.getUniformLocation(program, "u_worldMatrix");
    var projectionMatLoc = gl.getUniformLocation(program, "u_projectionMatrix");
    var textureLoc = gl.getUniformLocation(program, "u_texture");

var positions = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, positions);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positionData), gl.STATIC_DRAW);
    
    var tecoords = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, texcoords);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(texcoordData), gl.STATIC_DRAW);
    
    var texture = gl.createTexture();
    gl.bindTexture(gl.TEXTURE_2D, texture);
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, someImage);

// At draw time
    gl.bindBuffer(gl.ARRAY_BUFFER, positions);
    gl.enableVertexAttribArray(programLoc);
    gl.vertexAttribPointer(programLoc, 3, gl.FLOAT, false, 0, 0);
    
    gl.bindBuffer(gl.ARRAY_BUFFER, positions);
    gl.enableVertexAttribArray(texcoordLoc);
    gl.vertexAttribPointer(tecoordLoc, 2, gl.FLOAT, false, 0, 0);
    
    gl.useProgram(program);
    gl.uniformMatrix4f(projectionMatLoc, false, projectionMatrix);
    
    for (var i = 0; i < 3; ++i)
    {
        gl.uniformMatrix4f(worldMatLoc, false, computeWorldMatrix(i));
        gl.drawArrays(gl.TRIANGLES, 0, num);
    }
    
In TDL that would be shortened to

// At init time.
    var program = tdl.programs.loadProgramFromScriptTags("vshader", "fshader");
    var arrays = {
      position: new tdl.primitives.AttribBuffer(3, positionData),
      texcoord: new tdl.primitives.AttribBuffer(2, texcoordData),
    };
    var textures = {
      u_texture: new tdl.textures.loadTexture(someImage),
    }
    var model = new tdl.models.Model(program, arrays, textures);
  
    
    // At Draw time
    var sharedUniforms = {
      u_projectionMatrix: projectionMatrix,
    };
    var perObjectUniforms = {
      u_worldMatrix: worldMatrix,
    };
    
    model.drawPrep(sharedUniforms);
    
    for (var i = 0; i < 3; ++i)
    {
        perObjectUnifirms.u_worldMatrix = computeWorldMatrix(i);
        model.draw(perObjectuniforms);
    }

tdl

File Explorer

Today's picks

Was this content helpful?

Recent Feedback

tdl

File Explorer

Today's picks

Was this content helpful?

Recent Feedback

Download README