@maptalks/fusiongl

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&claygl

install

headless-gl

npm install --global --production windows-build-tools

npm install -global gl

fusion.gl

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);
        }
    });

integrated

//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