AdSense:

litegl.js

litegl.js
детальнее:

It helps simplifying working with WebGL without having to handle all the low-level calls but without losing any freedom.

Some features are:

  • Easy context creation
  • Classes for:
    • Meshes and Buffers: Fill a buffer easily and upload it to the GPU
    • Textures: load, fill, clone, copy (even blur) for TEXTURE_2D and TEXTURE_CUBE_MAP
    • Shaders: compile from string, from file, insert preprocessor macros, extracts all the uniform locations
    • FrameBufferObjects: to render to a texture, to multiple textures, to depth texture.
  • Some basic primitive shapes (plane, cube, sphere, cylinder, hemisphere).
  • OBJ parser and encoder (easy to add new ones)
  • Loaders for Images and Meshes from URL (uses a placeholder till its loaded)
  • Uses typed-arrays for everything (uses glMatrix for all operations)
  • No garbage generated (reuses containers)
  • Basic Raytracing (for ray-sphere and ray-plane collision)
  • Events system
  • Cross-browser input handling for mouse, keyboard and gamepad
  • Supports multiple WebGL contexts
  • Supports WebGL1 and WebGL2
  • Octree class

It is a fork from LightGL.js by Evan Wallace, but some major changes have been made. Some of the main differences:

  • Matrices have been replaced by glMatrix
  • Meshes are forced to be stored in ArrayBuffer formats
  • Meshes support range rendering with offset
  • Removed fixed pipeline behaviour
  • Better event handling (mouse position, mouse wheel, dragging)
  • Textures expanded to support Arraybuffers and Cubemaps
  • Events system to trigger events from any object
  • Support for multiple WebGL contexts in the same page

This library has been used in several projects like Rendeer.js or Canvas2DtoWebGL.

For a list of similar libraries check this list

Demos

Demos are included in the Examples folder but you can check them in this website.

Usage

Include the library and dependencies

<script src="js/gl-matrix-min.js"></script>
<script src="js/litegl.js"></script>

Create the context

var gl = GL.create({width:800, height:600});

Attach to DOM

document.getElementById("mycontainer").appendChild( gl.canvas )

Get user input

gl.captureMouse();
gl.onmousedown = function(e) { ... }

gl.captureKeys();
gl.onkey = function(e) { ... }

Compile shader

var shader = new GL.Shader( vertex_shader_code, fragment_shader_code );

Create Mesh

var mesh = new GL.Mesh({vertices:[-1,-1,0, 1,-1,0, 0,1,0], coords:[0,0, 1,0, 0.5,1]});

Load a texture

var texture = GL.Texture.fromURL("image.jpg", { minFilter: gl.LINEAR_MIPMAP_LINEAR });

Render

gl.ondraw = function() {
	texture.bind(0);
	var my_uniforms = { u_texture: 0, u_color: [1,1,1,1] };
	shader.uniforms( my_uniforms ).draw( mesh );
}

gl.animate(); //calls the requestAnimFrame constantly, which will call ondraw

For better understanding of all the features and how to use them check the guides folder.

- is a library that wraps WebGL to make it more user-friendly by creating classes for managing different items like Buffer, Mesh, Texture, Shader and other common aspects of any WebGL applications.
20
Загрузка...

Нет товаров