@maptalks-incubator/fusiongl v0.1.0
fusion.gl
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&clayglinstall
headless-gl
npm install --global --production windows-build-tools
npm install -global gl
> fusion.gl
```javascript
npm install fusion.gl
example
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 });
use fusion.gl with threejs
// use virtual glCanvas instead of real canvas element const glCanvas1 = new fusion.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 fusion.gl with claygl
// use virtual glCanvas instead of real canvas element const glCanvas2 = new fusion.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); } });
![2](https://user-images.githubusercontent.com/5127112/39559113-6dd81604-4ec6-11e8-9ae2-8cf514e3a06e.png)
>integrated
```javascript
//get htmlcanvaselement
const canvas = document.getElementById('mapCanvas');
//get webgl context
//create virtual glCanvas with same webgl context
const gl = canvas.getContext('webgl',{
alpha:false,
depth:true,
stencil:true,
antialias:false,
premultipliedAlpha:true,
preserveDrawingBuffer:false,
failIfMajorPerformanceCaveat:false
});
The tests are not yet finished, and all comments are welcome
5 years ago