Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
this._uFrame = this._program.uniform('u_frame');
this._uRand = this._program.uniform('u_rand');
this._uEye = this._program.uniform('u_eye');
this._uViewport = this._program.uniform('u_viewport');
this._program.bind();
gl.uniform1i(this._program.uniform('u_hsphere'), 0);
gl.uniform1i(this._program.uniform('u_lights'), 1);
this._program.unbind();
this._ndcTriangle.initialize(aVertex);
// CREATE HEMISPHERE PATH SAMPLES and LIGHT AREA SAMPLES
this._hsphereImage = new Texture2D(this._context, 'hsphereImage');
this._lightsImage = new Texture2D(this._context, 'lightsImage');
const points = this.pointsOnSphere(32 * 32);
const samplerSize = Math.floor(Math.sqrt(points.length)); // shader expects 32
const spherePoints = new Float32Array(samplerSize * samplerSize * 3);
for (let i = 0; i < samplerSize * samplerSize; ++i) {
spherePoints[3 * i + 0] = points[i][0];
spherePoints[3 * i + 1] = points[i][1];
spherePoints[3 * i + 2] = points[i][2];
}
// CREATE LIGHT AREA SAMPLES
const lights = this.pointsInLight(light0, light1, 32 * 32);
const lights2 = new Float32Array(lights.length * 3);
let i2 = 0;
for (const light of lights) {
protected generateSphere1Node(parent: SceneNode): SceneNode {
const gl = this._context.gl;
/* Create node and transform */
const node = parent.addNode(new SceneNode('mesh'));
const translate = mat4.fromTranslation(mat4.create(), vec3.fromValues(0.0, 0.0, 0.0));
const scale = mat4.fromScaling(mat4.create(), vec3.fromValues(0.4, 0.4, 0.4));
const transformMatrix = mat4.multiply(mat4.create(), translate, scale);
const transform = new TransformComponent(transformMatrix);
node.addComponent(transform);
/* Create and load texture. */
const texture = new Texture2D(this._context, 'Texture');
texture.initialize(1, 1, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE);
texture.fetch('./data/concrete_floor_02_diff_1k.webp', false).then(() => {
this.invalidate(true);
});
/* Create material */
const material = new SceneExampleMaterial(this._context, 'ExampleMaterial1');
material.texture = texture;
material.textured = true;
/* Create geometry. */
const geometry = new GeosphereGeometry(
this._context,
'mesh',
1.0,
true);
protected generateSphere1Node(parent: SceneNode): SceneNode {
const gl = this._context.gl;
/* Create node and transform */
const node = parent.addNode(new SceneNode('mesh'));
const translate = mat4.fromTranslation(mat4.create(), vec3.fromValues(0.0, 0.0, 0.0));
const scale = mat4.fromScaling(mat4.create(), vec3.fromValues(0.4, 0.4, 0.4));
const transformMatrix = mat4.multiply(mat4.create(), translate, scale);
const transform = new TransformComponent(transformMatrix);
node.addComponent(transform);
/* Create and load texture. */
const texture = new Texture2D(this._context, 'Texture');
texture.initialize(1, 1, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE);
texture.fetch('./data/concrete_floor_02_diff_1k.webp', false).then(() => {
this.invalidate(true);
});
/* Create material */
const material = new SceneExampleMaterial(this._context, 'ExampleMaterial1');
material.texture = texture;
material.textured = true;
/* Create geometry. */
const geometry = new GeosphereGeometry(
this._context,
'mesh',
1.0,
true);
this._hsphereImage.filter(gl.NEAREST, gl.NEAREST);
this._lightsImage.wrap(gl.CLAMP_TO_EDGE, gl.CLAMP_TO_EDGE);
this._lightsImage.filter(gl.NEAREST, gl.NEAREST);
// scene textures for webgl1
if (this._context.isWebGL1) {
this._program.bind();
gl.uniform1i(this._program.uniform('u_vertices'), 2);
gl.uniform1i(this._program.uniform('u_indices'), 3);
gl.uniform1i(this._program.uniform('u_colors'), 4);
this._program.unbind();
this._verticesImage = new Texture2D(this._context, 'verticesImage');
this._indicesImage = new Texture2D(this._context, 'indicesImage');
this._colorsImage = new Texture2D(this._context, 'colorsImage');
this._indicesImage.initialize(indices.length / 4, 1, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE);
this._indicesImage.data(indices);
if (context.supportsTextureFloat) {
this._verticesImage.initialize(vertices.length / 3, 1, gl.RGB, gl.RGB, gl.FLOAT);
this._verticesImage.data(vertices);
this._colorsImage.initialize(colors.length / 3, 1, gl.RGB, gl.RGB, gl.FLOAT);
this._colorsImage.data(colors);
} else {
// no floats => encode float in 3 bytes
this._verticesImage.initialize(vertices.length / 3 * 3, 1, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE);
this._verticesImage.data(this.encodeFloatArrayAndScale(vertices));
this._colorsImage.initialize(colors.length / 3 * 3, 1, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE);
this._colorsImage.data(this.encodeFloatArray(colors));
}
protected onInitialize(context: Context, callback: Invalidate,
mouseEventProvider: MouseEventProvider,
/* keyEventProvider: KeyEventProvider, */
/* touchEventProvider: TouchEventProvider */): boolean {
this._defaultFBO = new DefaultFramebuffer(context, 'DefaultFBO');
this._defaultFBO.initialize();
this._defaultFBO.bind();
const gl = context.gl;
const gl2facade = context.gl2facade;
this._colorRenderTexture = new Texture2D(this._context, 'ColorRenderTexture');
this._depthRenderbuffer = new Renderbuffer(this._context, 'DepthRenderbuffer');
this._intermediateFBO = new Framebuffer(this._context, 'IntermediateFBO');
this._blit = new BlitPass(this._context);
this._blit.initialize();
this._blit.readBuffer = gl2facade.COLOR_ATTACHMENT0;
this._blit.drawBuffer = gl.BACK;
this._blit.target = this._defaultFBO;
this._blit.framebuffer = this._intermediateFBO;
const frameSize = this._frameSize[0] > 0 && this._frameSize[1] > 0 ?
[this._frameSize[0] * this._ssaaFactor, this._frameSize[1] * this._ssaaFactor] : [1, 1];
this._colorRenderTexture.initialize(frameSize[0], frameSize[1],
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]
this._albedoTexture.initialize(1, 1, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE);
this._albedoTexture.wrap(gl.REPEAT, gl.REPEAT);
this._albedoTexture.filter(gl.LINEAR, gl.LINEAR_MIPMAP_LINEAR);
this._albedoTexture.maxAnisotropy(Texture2D.MAX_ANISOTROPY);
this._promises.push(
this._albedoTexture.fetch('./data/imagebasedlighting/Metal_001_basecolor.png', false));
this._roughnessTexture = new Texture2D(context, 'RoughnessTexture');
this._roughnessTexture.initialize(1, 1, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE);
this._roughnessTexture.wrap(gl.REPEAT, gl.REPEAT);
this._roughnessTexture.filter(gl.LINEAR, gl.LINEAR_MIPMAP_LINEAR);
this._roughnessTexture.maxAnisotropy(Texture2D.MAX_ANISOTROPY);
this._promises.push(
this._roughnessTexture.fetch('./data/imagebasedlighting/Metal_001_roughness.png', false));
this._metallicTexture = new Texture2D(context, 'MetallicTexture');
this._metallicTexture.initialize(1, 1, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE);
this._metallicTexture.wrap(gl.REPEAT, gl.REPEAT);
this._metallicTexture.filter(gl.LINEAR, gl.LINEAR_MIPMAP_LINEAR);
this._metallicTexture.maxAnisotropy(Texture2D.MAX_ANISOTROPY);
this._promises.push(
this._metallicTexture.fetch('./data/imagebasedlighting/Metal_001_metallic.png', false));
this._normalTexture = new Texture2D(context, 'NormalTexture');
this._normalTexture.initialize(1, 1, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE);
this._normalTexture.wrap(gl.REPEAT, gl.REPEAT);
this._normalTexture.filter(gl.LINEAR, gl.LINEAR_MIPMAP_LINEAR);
this._normalTexture.maxAnisotropy(Texture2D.MAX_ANISOTROPY);
this._promises.push(
this._normalTexture.fetch('./data/imagebasedlighting/Metal_001_normal.png', false));
this._brdfLUT = new Texture2D(context, 'BRDFLookUpTable');
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');
this._texture.initialize(1, 1, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE);
this._texture.wrap(gl.REPEAT, gl.REPEAT);
this._texture.filter(gl.LINEAR, gl.LINEAR_MIPMAP_LINEAR);
this._texture.maxAnisotropy(Texture2D.MAX_ANISOTROPY);
this._texture.fetch('./data/blue_painted_planks_diff_1k_modified.webp', false).then(() => {
const gl = context.gl;
this._program.bind();
gl.uniform1i(this._program.uniform('u_textured'), true);
this.invalidate(true);
});
this._camera = new Camera();
const identity = mat4.identity(mat4.create());
gl.uniformMatrix4fv(this._program.uniform('u_model'), gl.FALSE, identity);
gl.uniform1i(this._program.uniform('u_albedoTexture'), 0);
gl.uniform1i(this._program.uniform('u_roughnessTexture'), 1);
gl.uniform1i(this._program.uniform('u_metallicTexture'), 2);
gl.uniform1i(this._program.uniform('u_normalTexture'), 3);
gl.uniform1i(this._program.uniform('u_cubemap'), 4);
gl.uniform1i(this._program.uniform('u_brdfLUT'), 5);
gl.uniform1i(this._program.uniform('u_textured'), false);
/**
* Textures taken from https://3dtextures.me/2018/11/19/metal-001/ and modified
*/
this._albedoTexture = new Texture2D(context, 'AlbedoTexture');
this._albedoTexture.initialize(1, 1, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE);
this._albedoTexture.wrap(gl.REPEAT, gl.REPEAT);
this._albedoTexture.filter(gl.LINEAR, gl.LINEAR_MIPMAP_LINEAR);
this._albedoTexture.maxAnisotropy(Texture2D.MAX_ANISOTROPY);
this._promises.push(
this._albedoTexture.fetch('./data/imagebasedlighting/Metal_001_basecolor.png', false));
this._roughnessTexture = new Texture2D(context, 'RoughnessTexture');
this._roughnessTexture.initialize(1, 1, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE);
this._roughnessTexture.wrap(gl.REPEAT, gl.REPEAT);
this._roughnessTexture.filter(gl.LINEAR, gl.LINEAR_MIPMAP_LINEAR);
this._roughnessTexture.maxAnisotropy(Texture2D.MAX_ANISOTROPY);
this._promises.push(
this._roughnessTexture.fetch('./data/imagebasedlighting/Metal_001_roughness.png', false));
this._metallicTexture = new Texture2D(context, 'MetallicTexture');
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');
this._texture.initialize(1, 1, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE);
this._texture.wrap(gl.REPEAT, gl.REPEAT);
this._texture.filter(gl.LINEAR, gl.LINEAR_MIPMAP_LINEAR);
this._texture.maxAnisotropy(Texture2D.MAX_ANISOTROPY);
this._texture.fetch('./data/blue_painted_planks_diff_1k_modified.webp', false).then(() => {
const gl = context.gl;
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);