kiwi.fusion
a virtual webgl running context which can mix thirdly webgl library's gl commands togother,include three.js,claygl and so on.
example
3D
vao
texture
three
claygl
three&claygl
Install
npm install kiwi.gl or
npm install --save-dev kiwi.gl
Examples
get htmlelement's webgl context
//get htmlcanvaselement
const canvas = document.getElementById('mapCanvas');
//get webgl context
const gl = canvas.getContext('webgl',{
alpha:false,
depth:true,
stencil:true,
antialias:false,
premultipliedAlpha:true,
preserveDrawingBuffer:false,
failIfMajorPerformanceCaveat:false
});Debug
kiwi.gl counld be debugged with VSCODE and NODE.
windows:
npm install --global --production windows-build-tools
npm install -global gl
osx:
npm install -global gl
use kiwi.gl with threejs
// use virtual glCanvas instead of real canvas element
const glCanvas1 = new kiwi.gl.GLCanvas(gl);
// init 3d scene by threejs
const camera = new THREE.PerspectiveCamera(70, 800 / 600, 0.01, 10);
camera.position.z = 1;
scene = new THREE.Scene();
geometry = new THREE.BoxGeometry(0.2, 0.2, 0.2);
material = new THREE.MeshNormalMaterial();
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
renderer = new THREE.WebGLRenderer({
canvas: glCanvas1,
context: glCanvas1.getContext()
});
renderer.setSize(800, 600);
renderer.render(scene, camera);
function animate() {
requestAnimationFrame(animate);
mesh.rotation.x += 0.01;
mesh.rotation.y += 0.02;
renderer.render(scene, camera);
}
animate();
use kiwi.gl with claygl
// use virtual glCanvas instead of real canvas element
const glCanvas2 = new kiwi.gl.GLCanvas(gl);
// vertex shader source
const vertexShader = `
attribute vec3 position: POSITION;
attribute vec3 normal: NORMAL;
uniform mat4 worldViewProjection : WORLDVIEWPROJECTION;
varying vec3 v_Normal;
void main() {
gl_Position = worldViewProjection * vec4(position, 1.0);
v_Normal = normal;
}`;
// fragment shader source
const fragmentShader = `
varying vec3 v_Normal;
void main() {
gl_FragColor = vec4(v_Normal, 1.0);
}`;
var app = clay.application.create(glCanvas2, {
init: function (app) {
// Create a orthographic camera
this._camera = app.createCamera([0, 2, 5], [0, 0, 0]);
// Create a empty geometry and set the triangle vertices
this._cube = app.createCube({shader: new clay.Shader(vertexShader, fragmentShader)});
},
loop: function (app) {
this._cube.rotation.rotateY(app.frameTime / 1000);
}
});
mixture
notice
The tests are not finished yet, all comments welcome！