How to use the webgl-operate.Program 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 / shadow-mapping / shadowmapping.ts View on Github external
this._shadowProgram = new Program(this._context);
        const result = this._shadowProgram.initialize([shadowVert, shadowFrag]);
        console.log(result);

        this._uShadowViewMatrix = this._shadowProgram.uniform('u_lightViewMatrix');
        this._uShadowProjectionMatrix = this._shadowProgram.uniform('u_lightProjectionMatrix');
        this._uShadowFarPlane = this._shadowProgram.uniform('u_lightFarPlane');

        // Setup Shadow Mapping Program
        const meshVert = new Shader(this._context, gl.VERTEX_SHADER, 'mesh.vert');
        meshVert.initialize(require('./mesh.vert'));
        const meshFrag = new Shader(this._context, gl.FRAGMENT_SHADER, 'mesh.frag');
        meshFrag.initialize(require('./mesh.frag'));

        this._meshProgram = new Program(this._context);
        this._meshProgram.initialize([meshVert, meshFrag]);

        this._uMeshViewMatrix = this._meshProgram.uniform('u_lightViewMatrix');
        this._uMeshProjectionMatrix = this._meshProgram.uniform('u_lightProjectionMatrix');
        this._uMeshFarPlane = this._meshProgram.uniform('u_lightFarPlane');
        this._uCameraViewProjectionMatrix = this._meshProgram.uniform('u_cameraViewProjectionMatrix');
        this._uMeshDepthTexture = this._meshProgram.uniform('u_depthTexture');

        // Setup Cameras
        this._camera = new Camera();
        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;
github cginternals / webgl-operate / demos / shadow-mapping / shadowmapping.ts View on Github external
protected onInitialize(context: Context, callback: Invalidate, mouseEventProvider: MouseEventProvider): boolean {
        const gl = this._context.gl;

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

        // Setup Shadow Program
        const shadowVert = new Shader(this._context, gl.VERTEX_SHADER, 'shadow.vert');
        shadowVert.initialize(require('./shadow.vert'));
        const shadowFrag = new Shader(this._context, gl.FRAGMENT_SHADER, 'shadow.frag');
        shadowFrag.initialize(require('./shadow.frag'));

        this._shadowProgram = new Program(this._context);
        const result = this._shadowProgram.initialize([shadowVert, shadowFrag]);
        console.log(result);

        this._uShadowViewMatrix = this._shadowProgram.uniform('u_lightViewMatrix');
        this._uShadowProjectionMatrix = this._shadowProgram.uniform('u_lightProjectionMatrix');
        this._uShadowFarPlane = this._shadowProgram.uniform('u_lightFarPlane');

        // Setup Shadow Mapping Program
        const meshVert = new Shader(this._context, gl.VERTEX_SHADER, 'mesh.vert');
        meshVert.initialize(require('./mesh.vert'));
        const meshFrag = new Shader(this._context, gl.FRAGMENT_SHADER, 'mesh.frag');
        meshFrag.initialize(require('./mesh.frag'));

        this._meshProgram = new Program(this._context);
        this._meshProgram.initialize([meshVert, meshFrag]);
github cginternals / webgl-operate / examples / envprojections-example.ts View on Github external
const gl = this._context.gl;

        this._ndcTriangle = new NdcFillingTriangle(this._context, 'NdcFillingTriangle');
        this._ndcTriangle.initialize();

        this.fetchTextures();

        // Initialize program and uniforms
        const vert = new Shader(this._context, gl.VERTEX_SHADER, 'ndcvertices');
        vert.initialize(require('./data/env-projections.vert'));

        const frag = new Shader(this._context, gl.FRAGMENT_SHADER, 'env-projections');
        frag.initialize(require('./data/env-projections.frag'));

        this._program = new Program(this._context, 'EnvProjectionsProgram');
        this._program.initialize([vert, frag], false);

        this._program.attribute('a_vertex', this._ndcTriangle.vertexLocation);
        this._program.link();

        this._program.bind();
        gl.uniform1i(this._program.uniform('u_cubemap'), 0);
        gl.uniform1i(this._program.uniform('u_equirectmap'), 1);
        gl.uniform1i(this._program.uniform('u_spheremap'), 2);
        gl.uniform1iv(this._program.uniform('u_polarmap'), [3, 4]);

        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');
github cginternals / webgl-operate / examples / triangle-example.ts View on Github external
this._defaultFBO.bind();

        const gl = context.gl;

        this._buffer = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, this._buffer);
        gl.bufferData(gl.ARRAY_BUFFER, this._triangle, gl.STATIC_DRAW);


        const vert = new Shader(context, gl.VERTEX_SHADER, 'mesh.vert');
        vert.initialize(require('./data/mesh.vert'));
        const frag = new Shader(context, gl.FRAGMENT_SHADER, 'mesh.frag');
        frag.initialize(require('./data/mesh.frag'));


        this._program = new Program(context, 'TriangleProgram');
        this._program.initialize([vert, frag], false);

        this._program.link();
        this._program.bind();

        this._vertexLocation = this._program.attribute('a_vertex', this._vertexLocation);
        this._uvCoordLocation = this._program.attribute('a_texCoord', this._uvCoordLocation);


        gl.vertexAttribPointer(
            this._vertexLocation,   // Attribute Location
            3,                      // Number of elements per attribute
            gl.FLOAT,               // Type of elements
            gl.FALSE,
            5 * Float32Array.BYTES_PER_ELEMENT, // Size of an individual vertex
            0, // Offset from the beginning of a single vertex to this attribute
github cginternals / webgl-operate / demos / cubescape / cubescape.ts View on Github external
this._patches.initialize(64, 16, internalFormatAndType[0], gl.RGB, internalFormatAndType[1]);
        this._patches.wrap(gl.REPEAT, gl.REPEAT);
        this._patches.filter(gl.NEAREST, gl.NEAREST);
        this._patches.fetch('/demos/data/cubescape-patches.png');

        // init cube geometry
        this._geometry = new CubeGeometry(this._context, 'cubes'); // TODO not 16 every time
        this._geometry.initialize();

        // init program
        const vert = new Shader(this._context, gl.VERTEX_SHADER, 'cube.vert');
        vert.initialize(require('./cube.vert'));
        const frag = new Shader(this._context, gl.FRAGMENT_SHADER, 'cube.frag');
        frag.initialize(require('./cube.frag'));

        this._program = new Program(this._context);
        this._program.initialize([vert, frag], false);
        this._program.attribute('a_vertex', this._geometry.vertexLocation);
        this._program.attribute('a_instances', this._geometry.instanceLocation);
        this._program.link();

        this._uViewProjection = this._program.uniform('u_viewProjection');

        // init camera
        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;

        this._navigation = new Navigation(callback, mouseEventProvider);
github cginternals / webgl-operate / examples / scene-example.ts View on Github external
mouseEventProvider: MouseEventProvider,
        /* keyEventProvider: KeyEventProvider, */
        /* touchEventProvider: TouchEventProvider */): boolean {

        const gl = this._context.gl;

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

        /* Create mesh rendering program. */
        const vert = new Shader(this._context, gl.VERTEX_SHADER, 'mesh.vert');
        vert.initialize(require('./data/mesh.vert'));
        const frag = new Shader(this._context, gl.FRAGMENT_SHADER, 'mesh.frag');
        frag.initialize(require('./data/mesh.frag'));

        this._program = new Program(this._context, 'MeshProgram');
        this._program.initialize([vert, frag], false);

        this._aMeshVertex = this._program.attribute('a_vertex', 0);
        this._aMeshTexCoord = this._program.attribute('a_texCoord', 1);
        this._program.link();

        this._uViewProjection = this._program.uniform('u_viewProjection');
        this._uModel = this._program.uniform('u_model');

        this._uTexture = this._program.uniform('u_texture');
        this._uTextured = this._program.uniform('u_textured');

        this._aMeshVertex = this._program.attribute('a_vertex', 0);
        this._aMeshTexCoord = this._program.attribute('a_texcoord', 1);

        /* Create and configure camera. */
github cginternals / webgl-operate / examples / shadowmap-example.ts View on Github external
this._light = new Camera();
        this._light.center = vec3.fromValues(0.0, 0.0, 0.0);
        this._light.up = vec3.fromValues(0.0, 1.0, 0.0);
        this._light.eye = vec3.fromValues(-3.0, 5.0, 4.0);
        this._light.near = 3.0;
        this._light.far = 20.0;


        const vert = new Shader(context, gl.VERTEX_SHADER, 'mesh-shadowed.vert');
        vert.initialize(require('./data/mesh-shadowed.vert'));
        const frag = new Shader(context, gl.FRAGMENT_SHADER, 'mesh-shadowed.frag');
        frag.initialize(require('./data/mesh-shadowed.frag'));

        this._program = new Program(context, 'MeshShadowedProgram');
        this._program.initialize([vert, frag], false);

        this._program.attribute('a_vertex', this._cuboids[0].vertexLocation);
        this._program.attribute('a_texCoord', this._cuboids[0].uvCoordLocation);
        this._program.link();
        this._program.bind();

        gl.uniform2f(this._program.uniform('u_lightNearFar'), this._light.near, this._light.far);
        gl.uniformMatrix4fv(this._program.uniform('u_lightViewProjection'), false, this._light.viewProjection);
        gl.uniform3fv(this._program.uniform('u_lightPosition'), this._light.eye);

        gl.uniform1i(this._program.uniform('u_shadowMap'), 0);

        this._uViewProjection = this._program.uniform('u_viewProjection');
        this._uModel = this._program.uniform('u_model');
github cginternals / webgl-operate / examples / shadowmap-example.ts View on Github external
gl.uniformMatrix4fv(this._program.uniform('u_lightViewProjection'), false, this._light.viewProjection);
        gl.uniform3fv(this._program.uniform('u_lightPosition'), this._light.eye);

        gl.uniform1i(this._program.uniform('u_shadowMap'), 0);

        this._uViewProjection = this._program.uniform('u_viewProjection');
        this._uModel = this._program.uniform('u_model');

        this._uColored = this._program.uniform('u_colored');

        const shadowVert = new Shader(context, gl.VERTEX_SHADER, 'shadow.vert');
        shadowVert.initialize(require('./data/shadow.vert'));
        const shadowFrag = new Shader(context, gl.FRAGMENT_SHADER, 'shadow.frag');
        shadowFrag.initialize(require('./data/shadow.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);
        gl.uniformMatrix4fv(this._shadowProgram.uniform('u_lightViewProjection'), false, this._light.viewProjection);
        gl.uniform3fv(this._shadowProgram.uniform('u_lightPosition'), this._light.eye);

        this._uModelS = this._shadowProgram.uniform('u_model');


        this._navigation = new Navigation(callback, mouseEventProvider);
        this._navigation.camera = this._camera;
github cginternals / webgl-operate / demos / point-cloud / point-cloud.ts View on Github external
this._instancesVBO = new Buffer(context, 'instancesVBO');
        this._instancesVBO.initialize(gl.ARRAY_BUFFER);
        this._instancesVBO.attribEnable(this._positionLocation, 3, gl.FLOAT, false
            , 3 * floatSize, 0, true, false);
        gl2facade.vertexAttribDivisor(this._positionLocation, 1);
        this._instancesVBO.data(positions, gl.DYNAMIC_DRAW);


        const vert = new Shader(context, gl.VERTEX_SHADER, 'particle.vert');
        vert.initialize(require('./particle.vert'));
        const frag = new Shader(context, gl.FRAGMENT_SHADER, 'particle.frag');
        frag.initialize(require('./particle.frag'));


        this._program = new Program(context, 'ParticleProgram');
        this._program.initialize([vert, frag], false);

        this._program.attribute('a_uv', this._uvLocation);
        this._program.attribute('a_position', this._positionLocation);
        this._program.link();
        this._program.bind();


        this._uView = this._program.uniform('u_view');
        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);
github cginternals / webgl-operate / examples / tiled-rendering-example.ts View on Github external
this._context.isWebGL2 ? gl.RGBA8 : gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE);
        this._depthRenderbuffer.initialize(frameSize[0], frameSize[1], gl.DEPTH_COMPONENT16);
        this._intermediateFBO.initialize([[gl2facade.COLOR_ATTACHMENT0, this._colorRenderTexture]
            , [gl.DEPTH_ATTACHMENT, this._depthRenderbuffer]]);

        this._cuboid = new CuboidGeometry(context, 'Cuboid', true, [5.0, 5.0, 5.0]);
        this._cuboid.initialize();


        const vert = new Shader(context, gl.VERTEX_SHADER, 'mesh.vert');
        vert.initialize(require('./data/mesh.vert'));
        const frag = new Shader(context, gl.FRAGMENT_SHADER, 'mesh.frag');
        frag.initialize(require('./data/mesh.frag'));


        this._program = new Program(context, 'CubeProgram');
        this._program.initialize([vert, frag], false);

        this._program.attribute('a_vertex', this._cuboid.vertexLocation);
        this._program.attribute('a_texCoord', this._cuboid.uvCoordLocation);
        this._program.link();
        this._program.bind();


        this._uViewProjection = this._program.uniform('u_viewProjection');
        const identity = mat4.identity(mat4.create());
        gl.uniformMatrix4fv(this._program.uniform('u_model'), gl.FALSE, identity);
        gl.uniform1i(this._program.uniform('u_texture'), 0);
        gl.uniform1i(this._program.uniform('u_textured'), false);


        this._texture = new Texture2D(context, 'Texture');