How to use the webgl-operate.Shader 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
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]);

        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);
github cginternals / webgl-operate / examples / scene-example.ts View on Github external
protected onInitialize(context: Context, callback: Invalidate,
        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');
github cginternals / webgl-operate / demos / cornell-box / cornellbox.ts View on Github external
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);
        this._program.link();

        // uniforms
        this._uTransform = this._program.uniform('u_transform');
        this._uFrame = this._program.uniform('u_frame');
        this._uRand = this._program.uniform('u_rand');
        this._uEye = this._program.uniform('u_eye');
github cginternals / webgl-operate / examples / triangle-example.ts View on Github external
/* touchEventProvider: TouchEventProvider */): boolean {

        this._defaultFBO = new DefaultFramebuffer(context, 'DefaultFBO');
        this._defaultFBO.initialize();
        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
github cginternals / webgl-operate / examples / canvassize-example.ts View on Github external
/* touchEventProvider: TouchEventProvider */): boolean {

        /* Create framebuffers, textures, and render buffers. */

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

        /* Create and configure canvas-size test pattern pass. */

        const gl = this._context.gl;

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

        const vert = new Shader(this._context, gl.VERTEX_SHADER, 'ndcvertices (in-line)');
        vert.initialize(CanvasSizeRenderer.SHADER_SOURCE_VERT);
        const frag = new Shader(this._context, gl.FRAGMENT_SHADER, 'pattern (in-line)');
        frag.initialize(CanvasSizeRenderer.SHADER_SOURCE_FRAG);

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

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

        return true;
    }
github cginternals / webgl-operate / examples / envprojections-example.ts View on Github external
this._defaultFBO = new DefaultFramebuffer(this._context, 'DefaultFBO');
        this._defaultFBO.initialize();
        this._defaultFBO.bind();

        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');
github cginternals / webgl-operate / demos / point-cloud / point-cloud.ts View on Github external
this._numPointsAllocated = 1e6;
        this._numPointsToRender = 1e5;


        const positions = new Float32Array(3 * this._numPointsAllocated);
        positions.forEach((value, index, array) => array[index] = Math.random());

        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');
github cginternals / webgl-operate / examples / shadowmap-multiframe-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;


        this._colorRenderTexture = new Texture2D(this._context, 'ColorRenderTexture');
        this._depthRenderbuffer = new Renderbuffer(this._context, 'DepthRenderbuffer');
        this._intermediateFBO = new Framebuffer(this._context, 'IntermediateFBO');

        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-multiframe.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.uniform1i(this._program.uniform('u_shadowMap'), 0);

        this._uViewProjection = this._program.uniform('u_viewProjection');
        this._uModel = this._program.uniform('u_model');
        this._uLightViewProjection = this._program.uniform('u_lightViewProjection');
github cginternals / webgl-operate / examples / imagebasedlighting-example.ts View on Github external
this.showSpinner();
        this._isLoaded = false;

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

        const gl = context.gl;

        this._sphere = new GeosphereGeometry(context, 'Sphere');
        this._sphere.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, 'imagebasedlighting.frag');
        frag.initialize(require('./data/imagebasedlighting.frag'));

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

        this._program.attribute('a_vertex', this._sphere.vertexLocation);
        this._program.attribute('a_texCoord', this._sphere.texCoordLocation);
        this._program.link();
        this._program.bind();

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

        const identity = mat4.identity(mat4.create());
        gl.uniformMatrix4fv(this._program.uniform('u_model'), gl.FALSE, identity);
        gl.uniform1i(this._program.uniform('u_albedoTexture'), 0);
github cginternals / webgl-operate / examples / shadowmap-example.ts View on Github external
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');

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