https://github.com/anuraghazra/webgl.js
Yet Another WebGL Library For Personal Use
https://github.com/anuraghazra/webgl.js
3d-engine webgl
Last synced: 9 months ago
JSON representation
Yet Another WebGL Library For Personal Use
- Host: GitHub
- URL: https://github.com/anuraghazra/webgl.js
- Owner: anuraghazra
- Created: 2018-09-07T16:07:21.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2019-11-03T12:43:00.000Z (about 6 years ago)
- Last Synced: 2025-02-14T05:30:18.507Z (10 months ago)
- Topics: 3d-engine, webgl
- Language: JavaScript
- Homepage: https://anuraghazra.github.io/WebGL.js/
- Size: 26.1 MB
- Stars: 3
- Watchers: 2
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# WebGL.js
## Yet Another WebGL Library For Personal Use
Honestly WebGL Am Not That Good At WebGL. I Just Started Learning WebGL From Past 4 Months, So I Took A Step To `Make WebGL Easy` For Me And End Up With This Library, I Know I Know Its Not The Best But It Will Do The Work.
## Really Simple Example
```javascript
window.onload = function () {
let wgl = new WebGL('#c', window.innerWidth, window.innerHeight);
wgl.init({
shaders: {
modular: {
type: 'URL',
path: '../../assets/shaders/',
vert: 'modular.vs.glsl',
frag: 'modular.fs.glsl',
},
},
assets: {
tile: '../../assets/textures/tiles.jpg',
tilespec: '../../assets/textures/tiles_spec.jpg',
},
onDone: onDone
});
function onDone() {
wgl.enable3DDepth();
let program = wgl.createProgram(wgl.shaders.modular.vert, wgl.shaders.modular.frag);
wgl.useShader(program);
wgl.camera({
pos: [0, -20, 0],
world: program.uniforms.uWorld,
view: program.uniforms.uView,
proj: program.uniforms.uProj,
});
// Load Models
let cube = new WebGL.Model(wgl, {
material: {
useTexture: 1,
shadeless : 0,
diffuse: wgl.assets.tile,
specular: wgl.assets.tilespec,
diff_color: [1.0, 1.0, 1.0],
spec_color: [1.0, 1.0, 1.0],
},
pos: [0, 0, 0],
program: program,
data: WebGL.createBox({})
});
let torus = new WebGL.Model(wgl, {
material : {
useTexture: 1,
shadeless : 0,
diffuse: wgl.assets.tile,
specular: wgl.assets.tilespec,
},
pos: [-5, 0, 0],
program: program,
data: WebGL.createTorus(3,1,30,30)
});
let dlight = new WebGL.SunLight(program, 0, {
direction : [0, -20, -10.0],
ambient : [0.5, 0.5, 0.5],
diffuse : [1, 1, 1],
specular : [1.0, 1.0, 1.0],
});
let plight = new WebGL.PointLight(program, 0, {
pos : [-4.0, -2.0, 2.0],
ambient : [0, 0, 0],
diffuse : [1.0, 0.0, 1.0],
specular : [1.0, 0.0, 0.0],
mesh : WebGL.createSphere({radius : 0.1})
});
function animate(time) {
wgl.background();
wgl.setVariable(program.uniforms.uEyeView, wgl.cam.position)
wgl.setVariable(program.uniforms.uView, wgl.uView);
plight.setPosition([-5, Math.cos(0.5*time/1000)*5,0]);
plight.render();
cube.render();
torus.render();
wgl.cam.doMovement(wgl.uView, time);
requestAnimationFrame(animate);
}
animate();
}
}
```