How to use webgl-operate - 10 common examples
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.
cginternals / webgl-operate / demos / shadow-mapping / shadowmapping.ts View on Github 
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);initialize(element: HTMLCanvasElement | string): boolean {
const alpha2coverage = auxiliaries.GETparameter('alpha2coverage');
this._canvas = new Canvas(element, {
antialias: alpha2coverage === undefined ? false : JSON.parse(alpha2coverage!),
});
this._canvas.controller.multiFrameNumber = 1;
this._canvas.framePrecision = Wizard.Precision.byte;
this._canvas.frameScale = [1.0, 1.0];
this._renderer = new PointCloudRenderer();
this._canvas.renderer = this._renderer;
const input = document.getElementById('input-file')! as HTMLInputElement;
// const label = document.getElementById('label-file')! as HTMLLabelElement;
input.addEventListener('change', () => {
importPointsFromCSV(input.files!).then(result => console.log(result));
});initialize(element: HTMLCanvasElement | string): boolean {
const alpha2coverage = auxiliaries.GETparameter('alpha2coverage');
this._canvas = new Canvas(element, {
antialias: alpha2coverage === undefined ? false : JSON.parse(alpha2coverage!),
});
this._canvas.controller.multiFrameNumber = 1;
this._canvas.framePrecision = Wizard.Precision.byte;
this._canvas.frameScale = [1.0, 1.0];
this._renderer = new PointCloudRenderer();
this._canvas.renderer = this._renderer;
const input = document.getElementById('input-file')! as HTMLInputElement;
// const label = document.getElementById('label-file')! as HTMLLabelElement;
input.addEventListener('change', () => {
importPointsFromCSV(input.files!).then(result => console.log(result));
});
return true;
}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;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]);protected setupScene(): void {
// test interpolation
this._labelLAB = new Position2DLabel(new Text(`| should be violet |`), Label.Type.Static);
// generated color
this._labelGenerated1 = new Position2DLabel(new Text(`| generated 0 |`), Label.Type.Dynamic);
this._labelGenerated2 = new Position2DLabel(new Text(`| generated 1 |`), Label.Type.Dynamic);
this._labelGenerated3 = new Position2DLabel(new Text(`| generated 2 |`), Label.Type.Dynamic);
this._labelGenerated4 = new Position2DLabel(new Text(`| generated 3 |`), Label.Type.Dynamic);
// color scale linear
this._labelLinear1 = new Position2DLabel(new Text(`| linear 0 |`), Label.Type.Dynamic);
this._labelLinear2 = new Position2DLabel(new Text(`| linear 1 |`), Label.Type.Dynamic);
this._labelLinear3 = new Position2DLabel(new Text(`| linear 2 |`), Label.Type.Dynamic);
this._labelLinear4 = new Position2DLabel(new Text(`| linear 3 |`), Label.Type.Dynamic);
this._labelLinear5 = new Position2DLabel(new Text(`| linear 4 |`), Label.Type.Dynamic);
this._labelLinear6 = new Position2DLabel(new Text(`| linear 5 |`), Label.Type.Dynamic);
this._labelLinear7 = new Position2DLabel(new Text(`| linear 6 |`), Label.Type.Dynamic);
this._labelLinear8 = new Position2DLabel(new Text(`| linear 7 |`), Label.Type.Dynamic);
// color scale nearest
this._labelNearest1 = new Position2DLabel(new Text(`| nearest 0 |`), Label.Type.Dynamic);
this._labelNearest2 = new Position2DLabel(new Text(`| nearest 1 |`), Label.Type.Dynamic);// color scale linear
this._labelLinear1 = new Position2DLabel(new Text(`| linear 0 |`), Label.Type.Dynamic);
this._labelLinear2 = new Position2DLabel(new Text(`| linear 1 |`), Label.Type.Dynamic);
this._labelLinear3 = new Position2DLabel(new Text(`| linear 2 |`), Label.Type.Dynamic);
this._labelLinear4 = new Position2DLabel(new Text(`| linear 3 |`), Label.Type.Dynamic);
this._labelLinear5 = new Position2DLabel(new Text(`| linear 4 |`), Label.Type.Dynamic);
this._labelLinear6 = new Position2DLabel(new Text(`| linear 5 |`), Label.Type.Dynamic);
this._labelLinear7 = new Position2DLabel(new Text(`| linear 6 |`), Label.Type.Dynamic);
this._labelLinear8 = new Position2DLabel(new Text(`| linear 7 |`), Label.Type.Dynamic);
// color scale nearest
this._labelNearest1 = new Position2DLabel(new Text(`| nearest 0 |`), Label.Type.Dynamic);
this._labelNearest2 = new Position2DLabel(new Text(`| nearest 1 |`), Label.Type.Dynamic);
this._labelNearest3 = new Position2DLabel(new Text(`| nearest 2 |`), Label.Type.Dynamic);
this._labelNearest4 = new Position2DLabel(new Text(`| nearest 3 |`), Label.Type.Dynamic);
this._labelNearest5 = new Position2DLabel(new Text(`| nearest 4 |`), Label.Type.Dynamic);
this._labelNearest6 = new Position2DLabel(new Text(`| nearest 5 |`), Label.Type.Dynamic);
this._labelNearest7 = new Position2DLabel(new Text(`| nearest 6 |`), Label.Type.Dynamic);
this._labelNearest8 = new Position2DLabel(new Text(`| nearest 7 |`), Label.Type.Dynamic);
const generatedLabels = [
this._labelGenerated1, this._labelGenerated2, this._labelGenerated3, this._labelGenerated4]
const linearLabels = [
this._labelLinear1, this._labelLinear2, this._labelLinear3, this._labelLinear4, this._labelLinear5,
this._labelLinear6, this._labelLinear7, this._labelLinear8];
const nearestLabels = [
this._labelNearest1, this._labelNearest2, this._labelNearest3, this._labelNearest4, this._labelNearest5,
this._labelNearest6, this._labelNearest7, this._labelNearest8];
this._labelPass.labels = [this._labelLAB, ...generatedLabels, ...linearLabels, ...nearestLabels];this._labelLinear1 = new Position2DLabel(new Text(`| linear 0 |`), Label.Type.Dynamic);
this._labelLinear2 = new Position2DLabel(new Text(`| linear 1 |`), Label.Type.Dynamic);
this._labelLinear3 = new Position2DLabel(new Text(`| linear 2 |`), Label.Type.Dynamic);
this._labelLinear4 = new Position2DLabel(new Text(`| linear 3 |`), Label.Type.Dynamic);
this._labelLinear5 = new Position2DLabel(new Text(`| linear 4 |`), Label.Type.Dynamic);
this._labelLinear6 = new Position2DLabel(new Text(`| linear 5 |`), Label.Type.Dynamic);
this._labelLinear7 = new Position2DLabel(new Text(`| linear 6 |`), Label.Type.Dynamic);
this._labelLinear8 = new Position2DLabel(new Text(`| linear 7 |`), Label.Type.Dynamic);
// color scale nearest
this._labelNearest1 = new Position2DLabel(new Text(`| nearest 0 |`), Label.Type.Dynamic);
this._labelNearest2 = new Position2DLabel(new Text(`| nearest 1 |`), Label.Type.Dynamic);
this._labelNearest3 = new Position2DLabel(new Text(`| nearest 2 |`), Label.Type.Dynamic);
this._labelNearest4 = new Position2DLabel(new Text(`| nearest 3 |`), Label.Type.Dynamic);
this._labelNearest5 = new Position2DLabel(new Text(`| nearest 4 |`), Label.Type.Dynamic);
this._labelNearest6 = new Position2DLabel(new Text(`| nearest 5 |`), Label.Type.Dynamic);
this._labelNearest7 = new Position2DLabel(new Text(`| nearest 6 |`), Label.Type.Dynamic);
this._labelNearest8 = new Position2DLabel(new Text(`| nearest 7 |`), Label.Type.Dynamic);
const generatedLabels = [
this._labelGenerated1, this._labelGenerated2, this._labelGenerated3, this._labelGenerated4]
const linearLabels = [
this._labelLinear1, this._labelLinear2, this._labelLinear3, this._labelLinear4, this._labelLinear5,
this._labelLinear6, this._labelLinear7, this._labelLinear8];
const nearestLabels = [
this._labelNearest1, this._labelNearest2, this._labelNearest3, this._labelNearest4, this._labelNearest5,
this._labelNearest6, this._labelNearest7, this._labelNearest8];
this._labelPass.labels = [this._labelLAB, ...generatedLabels, ...linearLabels, ...nearestLabels];this._labelGenerated3 = new Position2DLabel(new Text(`| generated 2 |`), Label.Type.Dynamic);
this._labelGenerated4 = new Position2DLabel(new Text(`| generated 3 |`), Label.Type.Dynamic);
// color scale linear
this._labelLinear1 = new Position2DLabel(new Text(`| linear 0 |`), Label.Type.Dynamic);
this._labelLinear2 = new Position2DLabel(new Text(`| linear 1 |`), Label.Type.Dynamic);
this._labelLinear3 = new Position2DLabel(new Text(`| linear 2 |`), Label.Type.Dynamic);
this._labelLinear4 = new Position2DLabel(new Text(`| linear 3 |`), Label.Type.Dynamic);
this._labelLinear5 = new Position2DLabel(new Text(`| linear 4 |`), Label.Type.Dynamic);
this._labelLinear6 = new Position2DLabel(new Text(`| linear 5 |`), Label.Type.Dynamic);
this._labelLinear7 = new Position2DLabel(new Text(`| linear 6 |`), Label.Type.Dynamic);
this._labelLinear8 = new Position2DLabel(new Text(`| linear 7 |`), Label.Type.Dynamic);
// color scale nearest
this._labelNearest1 = new Position2DLabel(new Text(`| nearest 0 |`), Label.Type.Dynamic);
this._labelNearest2 = new Position2DLabel(new Text(`| nearest 1 |`), Label.Type.Dynamic);
this._labelNearest3 = new Position2DLabel(new Text(`| nearest 2 |`), Label.Type.Dynamic);
this._labelNearest4 = new Position2DLabel(new Text(`| nearest 3 |`), Label.Type.Dynamic);
this._labelNearest5 = new Position2DLabel(new Text(`| nearest 4 |`), Label.Type.Dynamic);
this._labelNearest6 = new Position2DLabel(new Text(`| nearest 5 |`), Label.Type.Dynamic);
this._labelNearest7 = new Position2DLabel(new Text(`| nearest 6 |`), Label.Type.Dynamic);
this._labelNearest8 = new Position2DLabel(new Text(`| nearest 7 |`), Label.Type.Dynamic);
const generatedLabels = [
this._labelGenerated1, this._labelGenerated2, this._labelGenerated3, this._labelGenerated4]
const linearLabels = [
this._labelLinear1, this._labelLinear2, this._labelLinear3, this._labelLinear4, this._labelLinear5,
this._labelLinear6, this._labelLinear7, this._labelLinear8];
const nearestLabels = [
this._labelNearest1, this._labelNearest2, this._labelNearest3, this._labelNearest4, this._labelNearest5,this._labelLAB = new Position2DLabel(new Text(`| should be violet |`), Label.Type.Static);
// generated color
this._labelGenerated1 = new Position2DLabel(new Text(`| generated 0 |`), Label.Type.Dynamic);
this._labelGenerated2 = new Position2DLabel(new Text(`| generated 1 |`), Label.Type.Dynamic);
this._labelGenerated3 = new Position2DLabel(new Text(`| generated 2 |`), Label.Type.Dynamic);
this._labelGenerated4 = new Position2DLabel(new Text(`| generated 3 |`), Label.Type.Dynamic);
// color scale linear
this._labelLinear1 = new Position2DLabel(new Text(`| linear 0 |`), Label.Type.Dynamic);
this._labelLinear2 = new Position2DLabel(new Text(`| linear 1 |`), Label.Type.Dynamic);
this._labelLinear3 = new Position2DLabel(new Text(`| linear 2 |`), Label.Type.Dynamic);
this._labelLinear4 = new Position2DLabel(new Text(`| linear 3 |`), Label.Type.Dynamic);
this._labelLinear5 = new Position2DLabel(new Text(`| linear 4 |`), Label.Type.Dynamic);
this._labelLinear6 = new Position2DLabel(new Text(`| linear 5 |`), Label.Type.Dynamic);
this._labelLinear7 = new Position2DLabel(new Text(`| linear 6 |`), Label.Type.Dynamic);
this._labelLinear8 = new Position2DLabel(new Text(`| linear 7 |`), Label.Type.Dynamic);
// color scale nearest
this._labelNearest1 = new Position2DLabel(new Text(`| nearest 0 |`), Label.Type.Dynamic);
this._labelNearest2 = new Position2DLabel(new Text(`| nearest 1 |`), Label.Type.Dynamic);
this._labelNearest3 = new Position2DLabel(new Text(`| nearest 2 |`), Label.Type.Dynamic);
this._labelNearest4 = new Position2DLabel(new Text(`| nearest 3 |`), Label.Type.Dynamic);
this._labelNearest5 = new Position2DLabel(new Text(`| nearest 4 |`), Label.Type.Dynamic);
this._labelNearest6 = new Position2DLabel(new Text(`| nearest 5 |`), Label.Type.Dynamic);
this._labelNearest7 = new Position2DLabel(new Text(`| nearest 6 |`), Label.Type.Dynamic);
this._labelNearest8 = new Position2DLabel(new Text(`| nearest 7 |`), Label.Type.Dynamic);
const generatedLabels = [
this._labelGenerated1, this._labelGenerated2, this._labelGenerated3, this._labelGenerated4]webgl-operate
A TypeScript based WebGL rendering framework.
Package Health Score
66 / 100Popular webgl-operate functions
- webgl-operate.Buffer
- webgl-operate.Camera
- webgl-operate.Canvas
- webgl-operate.CuboidGeometry
- webgl-operate.DefaultFramebuffer
- webgl-operate.GeometryComponent
- webgl-operate.GeosphereGeometry
- webgl-operate.Label.devicePixelRatio
- webgl-operate.Label.Type
- webgl-operate.Navigation
- webgl-operate.Position2DLabel
- webgl-operate.Program
- webgl-operate.SceneNode
- webgl-operate.Shader
- webgl-operate.Text
- webgl-operate.Texture2D
- webgl-operate.TransformComponent
- webgl-operate.vec3.create
- webgl-operate.vec3.fromValues
- webgl-operate.Wizard.Precision