Permalink
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
128 lines (110 sloc) 3.75 KB
<head>
<meta charset="UTF-8"></meta>
<style>
body{
background-color:black;
margin:0;
padding:0;
}
</style>
</head>
<body>
<script src="../build/glwrap.js"></script>
<script>
// glwrap in action...
// initializing a webgl context
let canvas = document.createElement("canvas");
let gl = canvas.getContext("webgl", {antialias:0});
document.body.appendChild(canvas);
let camera = new glwrap.Camera();
camera.localPos.set(0,0,5);
let scene = new glwrap.Scene();
scene.addTransform(camera);
// initializing objects to draw with.
let texture = new glwrap.Texture2D('./textures/cobblestone.png');
let program = new glwrap.ShaderProgram(
`
precision mediump float;
attribute vec3 position;
attribute vec2 uv;
attribute vec3 normal;
uniform mat4 modelMatrix;
uniform mat4 viewProjectionMatrix;
varying vec3 v_position;
varying vec2 v_uv;
varying vec3 v_normal;
void main(){
v_position = position;
v_uv = vec2(uv.x, 1.0-uv.y);
v_normal = normal;
gl_Position = viewProjectionMatrix * modelMatrix * vec4( position, 1.0 );
}
`,
`
precision mediump float;
uniform sampler2D colorTex;
varying vec3 v_position;
varying vec2 v_uv;
varying vec3 v_normal;
void main(){
vec4 color = texture2D(colorTex, v_uv);
gl_FragColor = vec4( color.rgb * (v_normal*0.5+0.5), 1.0 );
}
`,
{
"colorTex":{ type:'t2d', value:texture }
}
);
let objMesh = new glwrap.Mesh();
objMesh.loadOBJ("meshes/cube.obj");
let obj = new glwrap.Transform(objMesh, program);
obj.onupdate = function(){
this.localPos.y = Math.sin(Date.now()/1000);
this.matrixNeedsUpdate = true;
}
let obj1 = new glwrap.Transform(objMesh, program);
obj1.setParent(obj);
obj1.localPos.x = 2;
obj1.localScale.set(0.5,0.5,0.5);
obj1.onupdate = function(){
this.localRot.rotateX(0.01);
this.matrixNeedsUpdate = true;
}
scene.addTransform(obj);
scene.addTransform(obj1);
gl.clearColor(0.0, 0.5, 0.5, 1.0);
function resize(){
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
window.addEventListener('resize', resize);
window.addEventListener('mousemove', onMouseMove);
let cursorVec = new glwrap.Vec3();
let mouseX = 0;
let mouseY = 0;
function onMouseMove(e){
mouseX = e.clientX;
mouseY = e.clientY;
}
let cursorCube = new glwrap.Transform(objMesh, program);
cursorCube.localScale.set(0.1,0.1,0.1);
cursorCube.onupdate = function(){
cursorVec.x = mouseX;
cursorVec.y = mouseY;
cursorVec.z = -1;
camera.screenToWorld( cursorVec );
this.localPos.copy(cursorVec);
this.localRot.rotateX(0.01);
this.localRot.rotateZ(0.01);
this.matrixNeedsUpdate = true;
};
scene.addTransform(cursorCube);
function mainloop(){
requestAnimationFrame(mainloop);
scene.update();
scene.draw(gl);
}
resize();
mainloop();
</script>
</body>