How to use the webgl-operate.Navigation function in webgl-operate

To help you get started, we’ve selected a few webgl-operate examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github cginternals / webgl-operate / demos / point-cloud / point-cloud.ts View on Github external
this._uViewProjection = this._program.uniform('u_viewProjection');
        this._uLight = this._program.uniform('u_light');


        this._camera = new Camera();
        this._camera.center = vec3.fromValues(0.0, 0.0, 0.0);
        this._camera.up = vec3.fromValues(0.0, 1.0, 0.0);
        this._camera.eye = vec3.fromValues(0.0, 0.0, 5.0);

        this._camera.near = 0.1;
        this._camera.far = 5.0 + Math.sqrt(32.0); // 1² + 1² -> range in that particles are generated ...

        gl.uniform2f(this._program.uniform('u_nearFar'), this._camera.near, this._camera.far);


        this._navigation = new Navigation(callback, mouseEventProvider);
        this._navigation.camera = this._camera;


        // prepare draw binding

        this._defaultFBO.bind();
        this._defaultFBO.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT, true, false);

        gl.viewport(0, 0, this._frameSize[0], this._frameSize[1]);

        gl.enable(gl.CULL_FACE);
        gl.cullFace(gl.BACK);
        gl.enable(gl.DEPTH_TEST);

        // enable alpha to coverage and appropriate blending (if context was initialized with antialiasing enabled)
        if (context.antialias) {
github cginternals / webgl-operate / examples / label3d-example.ts View on Github external
/* Create framebuffers, textures, and render buffers. */

        this._defaultFBO = new DefaultFramebuffer(this._context, 'DefaultFBO');
        this._defaultFBO.initialize();

        /* Create and configure test navigation. */

        this._camera = new Camera();
        this._camera.eye = vec3.fromValues(0.0, 0.0, 1.0);
        this._camera.center = vec3.fromValues(0.0, 0.0, 0.0);
        this._camera.up = vec3.fromValues(0.0, 1.0, 0.0);
        this._camera.near = 0.1;
        this._camera.far = 4.0;

        this._navigation = new Navigation(callback, mouseEventProvider);
        this._navigation.camera = this._camera;

        /* Create and configure label pass. */

        this._labelPass = new LabelRenderPass(context);
        this._labelPass.initialize();
        this._labelPass.camera = this._camera;
        this._labelPass.target = this._defaultFBO;
        this._labelPass.depthMask = false;

        FontFace.fromFile('./data/opensans2048p160d16.fnt', context)
            .then((fontFace) => {
                for (const label of this._labelPass.labels) {
                    label.fontFace = fontFace;
                }
                this._fontFace = fontFace;
github cginternals / webgl-operate / demos / cornell-box / cornellbox.ts View on Github external
auxiliaries.assert(this._context.supportsStandardDerivatives,
                `expected OES_standard_derivatives support`);
            /* tslint:disable-next-line:no-unused-expression */
            this._context.standardDerivatives;
            this._extensions = true;
        }

        this._camera = new Camera();
        this._camera.eye = _gEye;
        this._camera.center = _gCenter;
        this._camera.up = _gUp;
        this._camera.near = 0.1;
        this._camera.far = 4.0;

        // Initialize navigation
        this._navigation = new Navigation(callback, mouseEventProvider);
        this._navigation.camera = this._camera;


        // program
        const vert = new Shader(this._context, gl.VERTEX_SHADER, 'cornell.vert');
        vert.initialize(require('./cornell.vert'));
        const frag = new Shader(this._context, gl.FRAGMENT_SHADER, 'cornell.frag');
        frag.initialize(require(this._context.isWebGL1 ?
            (this._context.supportsTextureFloat ? './cornell1.frag' : './cornell0.frag') :
            './cornell2.frag'));
        this._program = new Program(this._context);
        this._program.initialize([vert, frag], false);

        // attributes
        this._ndcTriangle = new NdcFillingTriangle(this._context);
        const aVertex = this._program.attribute('a_vertex', 0);
github cginternals / webgl-operate / demos / shadow-mapping / shadowmapping.ts View on Github external
this._camera.center = vec3.fromValues(0.0, 0.0, 0.0);
        vec3.normalize(this._camera.up, vec3.fromValues(-1.0, 1.0, 0.0));
        this._camera.eye = vec3.fromValues(6.0, 6.0, 0.0);
        this._camera.near = 3.0;
        this._camera.far = 32.0;

        this._light = new Camera();
        this._light.center = vec3.fromValues(0.0, 0.0, 0.0);
        vec3.normalize(this._light.up, vec3.fromValues(0.0, 1.0, -1.0));
        this._light.eye = vec3.fromValues(0.0, 6.0, 6.0);
        this._light.near = 3.0;
        this._light.far = 16.0;
        this._light.aspect = 1;

        // Setup Navigation
        this._navigation = new Navigation(callback, mouseEventProvider);
        this._navigation.camera = this._camera;

        // Setup Geometry
        this._cube = new Cube(this._context, 'cube');
        this._cube.initialize(0);

        this._plane = new Plane(this._context, 'plane');
        this._plane.initialize(0);

        // Setup ShadowMappingPass
        this._shadowMapping = new ShadowMapping(this._context);
        this._shadowMapping.initialize(
            ShadowMappingRenderer.SHADOWMAP_SIZE,
            ShadowMappingRenderer.BLURRED_SHADOWMAP_SIZE);

        return true;
github cginternals / webgl-operate / examples / tiled-scene-renderer-example.ts View on Github external
camera.near = 1.0;
        camera.far = 8.0;

        /* Test Tiled Renderer */

        const tiledRenderer = new TiledRenderer();
        tiledRenderer.sourceCamera = camera;
        tiledRenderer.sourceViewPort = [2, 2];
        tiledRenderer.tileSize = [1, 1];
        tiledRenderer.tile = 0;
        tiledRenderer.algorithm = TiledRenderer.IterationAlgorithm.HilbertCurve;
        tiledRenderer.update();

        /* Create and configure navigation */

        this._navigation = new Navigation(callback, mouseEventProvider);
        this._camera = tiledRenderer.camera;
        this._navigation.camera = this._camera;


        /* Create and configure forward pass. */

        this._forwardPass = new ForwardSceneRenderPass(context);
        this._forwardPass.initialize();

        this._forwardPass.camera = this._camera;
        this._forwardPass.target = this._framebuffer;

        /* Create scene. */

        this.generateScene();
github cginternals / webgl-operate / demos / gltf-renderer / gltfrenderer.ts View on Github external
this._uSpecularEnvironment = this._program.uniform('u_specularEnvironment');
        this._uBRDFLookupTable = this._program.uniform('u_brdfLUT');

        /* Create and configure camera. */

        this._camera = new Camera();
        this._camera.center = vec3.fromValues(0.0, 0.0, 0.0);
        this._camera.up = vec3.fromValues(0.0, 1.0, 0.0);
        this._camera.eye = vec3.fromValues(0.0, 3.0, 1.0);
        this._camera.near = 0.1;
        this._camera.far = 32.0;

        /* Create and configure navigation */

        this._navigation = new Navigation(callback, mouseEventProvider);
        this._navigation.camera = this._camera;

        /* Create and configure forward pass. */

        this._forwardPass = new ForwardSceneRenderPass(context);
        this._forwardPass.initialize();

        this._forwardPass.camera = this._camera;
        this._forwardPass.target = this._framebuffer;

        this._forwardPass.program = this._program;
        this._forwardPass.updateModelTransform = (matrix: mat4) => {
            gl.uniformMatrix4fv(this._uModel, gl.GL_FALSE, matrix);

            const normalMatrix = mat3.create();
            mat3.normalFromMat4(normalMatrix, matrix);
github cginternals / webgl-operate / examples / envprojections-example.ts View on Github external
this._uViewProjection = this._program.uniform('u_viewProjection');
        this._uViewProjectionInverse = this._program.uniform('u_viewProjectionInverse');
        this._uViewport = this._program.uniform('u_viewport');
        this._uTime = this._program.uniform('u_time');
        this._uMode = this._program.uniform('u_mode');

        // Initialize camera
        this._camera = new Camera();
        this._camera.eye = vec3.fromValues(0.0, 0.5, -1.0);
        this._camera.center = vec3.fromValues(0.0, 0.4, 0.0);
        this._camera.up = vec3.fromValues(0.0, 1.0, 0.0);
        this._camera.near = 0.1;
        this._camera.far = 4.0;

        this._navigation = new Navigation(callback, mouseEventProvider!);
        this._navigation.camera = this._camera;

        gl.uniform2iv(this._uViewport, this._canvasSize);

        return true;
    }
github cginternals / webgl-operate / examples / scene-example.ts View on Github external
this._aMeshVertex = this._program.attribute('a_vertex', 0);
        this._aMeshTexCoord = this._program.attribute('a_texcoord', 1);

        /* Create and configure camera. */

        this._camera = new Camera();
        this._camera.center = vec3.fromValues(0.0, 0.0, 0.0);
        this._camera.up = vec3.fromValues(0.0, 1.0, 0.0);
        this._camera.eye = vec3.fromValues(0.0, 0.0, 3.0);
        this._camera.near = 1.0;
        this._camera.far = 8.0;

        /* Create and configure navigation */

        this._navigation = new Navigation(callback, mouseEventProvider);
        this._navigation.camera = this._camera;

        /* Create and configure forward pass. */

        this._forwardPass = new ForwardSceneRenderPass(context);
        this._forwardPass.initialize();

        this._forwardPass.camera = this._camera;
        this._forwardPass.target = this._framebuffer;

        /* Create scene. */

        this.generateScene();

        this._forwardPass.scene = this._scene;
        this._forwardPass.program = this._program;
github cginternals / webgl-operate / examples / shadowmap-multiframe-example.ts View on Github external
shadowFrag.initialize(require('./data/shadow-multiframe.frag'));

        this._shadowProgram = new Program(context);
        this._shadowProgram.initialize([shadowVert, shadowFrag], false);
        this._shadowProgram.attribute('a_vertex', this._cuboids[0].vertexLocation);
        this._shadowProgram.link();
        this._shadowProgram.bind();

        gl.uniform2f(this._shadowProgram.uniform('u_lightNearFar'), this._light.near, this._light.far);

        this._uModelS = this._shadowProgram.uniform('u_model');
        this._uLightViewProjectionS = this._shadowProgram.uniform('u_lightViewProjection');
        this._uLightPositionS = this._shadowProgram.uniform('u_lightPosition');


        this._navigation = new Navigation(callback, mouseEventProvider);
        this._navigation.camera = this._camera;


        this._accumulate = new AccumulatePass(context);
        this._accumulate.initialize(this._ndcTriangle);
        this._accumulate.precision = this._framePrecision;
        this._accumulate.texture = this._colorRenderTexture;


        this._blit = new BlitPass(this._context);
        this._blit.initialize(this._ndcTriangle);
        this._blit.readBuffer = gl2facade.COLOR_ATTACHMENT0;
        this._blit.drawBuffer = gl.BACK;
        this._blit.target = this._defaultFBO;

        this._shadowPass = new ShadowPass(context);
github cginternals / webgl-operate / examples / cube-example.ts View on Github external
this._program.bind();
            gl.uniform1i(this._program.uniform('u_textured'), true);

            this.invalidate(true);
        });


        this._camera = new Camera();
        this._camera.center = vec3.fromValues(0.0, 0.0, 0.0);
        this._camera.up = vec3.fromValues(0.0, 1.0, 0.0);
        this._camera.eye = vec3.fromValues(0.0, 0.0, 5.0);
        this._camera.near = 1.0;
        this._camera.far = 8.0;


        this._navigation = new Navigation(callback, mouseEventProvider);
        this._navigation.camera = this._camera;

        return true;
    }