Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[enhancement] Isolate ProgramData from Program for allow reuse GL Program instance #139

Closed
wants to merge 8 commits into from
Closed

[enhancement] Isolate ProgramData from Program for allow reuse GL Program instance #139

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
988377a
feat: ProgramData as store for program info
eXponenta May 20, 2022
cb719b0
fix: fix missed helpers function, fields
eXponenta May 20, 2022
119800d
feat: update performance example
eXponenta May 20, 2022
f7247df
fix: move compile in constructor.
eXponenta May 20, 2022
b48be34
fix: major mistake after migration
eXponenta May 21, 2022
e8dd125
fix: delete instead remove
eXponenta May 27, 2022
045ea36
Fix: store cache to different context
eXponenta Jun 1, 2022
45ca046
fix: set usage to 0
eXponenta Jun 9, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 21 additions & 8 deletions examples/high-mesh-count.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,11 +42,13 @@
precision highp float;

varying vec3 vNormal;

uniform vec3 uColor;

void main() {
vec3 normal = normalize(vNormal);
float lighting = dot(normal, normalize(vec3(-0.3, 0.8, 0.6)));
gl_FragColor.rgb = vec3(0.2, 0.8, 1.0) + lighting * 0.1;
gl_FragColor.rgb = uColor + lighting * 0.1;
gl_FragColor.a = 1.0;
}
`;
Expand All @@ -71,14 +73,25 @@
// Create base geometry
const cubeGeometry = new Box(gl);

// Using the shader from the base primitive example
const program = new Program(gl, {
vertex,
fragment,
});

// mesh container
let meshes = [];

const colorPrograms = {};
const getColorProgram = () => {
const color = [
((Math.random() * 10) | 0) / 10,
((Math.random() * 10) | 0) / 10,
((Math.random() * 10) | 0) / 10,
];

const key = color.join(',');

return colorPrograms[key] || (colorPrograms[key] = new Program(gl, {
vertex,
fragment,
uniforms: { uColor: { value: color } }
}));
};

window.setMeshCount = function setMeshCount(count) {

Expand All @@ -91,7 +104,7 @@

// create our meshes according to input
for (let i = 0; i < count; ++i){
let mesh = new Mesh(gl, {geometry: cubeGeometry, program});
let mesh = new Mesh(gl, {geometry: cubeGeometry, program: getColorProgram()});

// position meshes in a random position between -100 / +100 in each dimension
mesh.position.set(
Expand Down
121 changes: 45 additions & 76 deletions src/core/Program.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@
// TODO: upload identity matrix if null ?
// TODO: sampler Cube

import { ProgramData } from "./ProgramData.js";

let ID = 1;

// cache of typed arrays used to flatten uniform arrays
Expand Down Expand Up @@ -47,68 +49,34 @@ export class Program {
else this.setBlendFunc(this.gl.SRC_ALPHA, this.gl.ONE_MINUS_SRC_ALPHA);
}

// compile vertex shader and log errors
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertex);
gl.compileShader(vertexShader);
if (gl.getShaderInfoLog(vertexShader) !== '') {
console.warn(`${gl.getShaderInfoLog(vertexShader)}\nVertex Shader\n${addLineNumbers(vertex)}`);
}
this.programData = ProgramData.create(gl, { vertex, fragment });
}

// compile fragment shader and log errors
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragment);
gl.compileShader(fragmentShader);
if (gl.getShaderInfoLog(fragmentShader) !== '') {
console.warn(`${gl.getShaderInfoLog(fragmentShader)}\nFragment Shader\n${addLineNumbers(fragment)}`);
}
/**
* Only for backward compatibility
* Internally we not should use this
*/
get uniformLocations() {
return this.programData.uniformLocations;
}

// compile program and log errors
this.program = gl.createProgram();
gl.attachShader(this.program, vertexShader);
gl.attachShader(this.program, fragmentShader);
gl.linkProgram(this.program);
if (!gl.getProgramParameter(this.program, gl.LINK_STATUS)) {
return console.warn(gl.getProgramInfoLog(this.program));
}
get attributeLocations() {
// we need this because Geometry use it
return this.programData.attributeLocations;
}

// Remove shader once linked
gl.deleteShader(vertexShader);
gl.deleteShader(fragmentShader);

// Get active uniform locations
this.uniformLocations = new Map();
let numUniforms = gl.getProgramParameter(this.program, gl.ACTIVE_UNIFORMS);
for (let uIndex = 0; uIndex < numUniforms; uIndex++) {
let uniform = gl.getActiveUniform(this.program, uIndex);
this.uniformLocations.set(uniform, gl.getUniformLocation(this.program, uniform.name));

// split uniforms' names to separate array and struct declarations
const split = uniform.name.match(/(\w+)/g);

uniform.uniformName = split[0];

if (split.length === 3) {
uniform.isStructArray = true;
uniform.structIndex = Number(split[1]);
uniform.structProperty = split[2];
} else if (split.length === 2 && isNaN(Number(split[1]))) {
uniform.isStruct = true;
uniform.structProperty = split[1];
}
}
get attributeOrder() {
// we need this because a Geometry use it
return this.programData.attributeOrder;
}

// Get active attribute locations
this.attributeLocations = new Map();
const locations = [];
const numAttribs = gl.getProgramParameter(this.program, gl.ACTIVE_ATTRIBUTES);
for (let aIndex = 0; aIndex < numAttribs; aIndex++) {
const attribute = gl.getActiveAttrib(this.program, aIndex);
const location = gl.getAttribLocation(this.program, attribute.name);
locations[location] = attribute.name;
this.attributeLocations.set(attribute, location);
}
this.attributeOrder = locations.join('');
/**
* WebGLProgram instance, can be shared
* Only for backward compatibility
* Internally we not should use this
*/
get program() {
return this.programData.program;
}

setBlendFunc(src, dst, srcAlpha, dstAlpha) {
Expand Down Expand Up @@ -145,20 +113,28 @@ export class Program {

use({ flipFaces = false } = {}) {
let textureUnit = -1;
const programActive = this.gl.renderer.state.currentProgram === this.id;

/**
* @type {WebGL2RenderingContext}
*/
const gl = this.gl;
const uniforms = this.uniforms;
const programData = this.programData;
const uniformLocations = this.programData.uniformLocations;
const programActive = gl.renderer.state.currentProgram === programData.id;

// Avoid gl call if program already in use
if (!programActive) {
this.gl.useProgram(this.program);
this.gl.renderer.state.currentProgram = this.id;
gl.useProgram(programData.program);
gl.renderer.state.currentProgram = programData.id;
}

// Set only the active uniforms found in the shader
this.uniformLocations.forEach((location, activeUniform) => {
uniformLocations.forEach((location, activeUniform) => {
let name = activeUniform.uniformName;

// get supplied uniform
let uniform = this.uniforms[name];
let uniform = uniforms[name];

// For structs, get the specific property instead of the entire object
if (activeUniform.isStruct) {
Expand All @@ -183,7 +159,7 @@ export class Program {

// Check if texture needs to be updated
uniform.value.update(textureUnit);
return setUniform(this.gl, activeUniform.type, location, textureUnit);
return setUniform(gl, activeUniform.type, location, textureUnit);
}

// For texture arrays, set uniform as an array of texture units instead of just one
Expand All @@ -195,18 +171,19 @@ export class Program {
textureUnits.push(textureUnit);
});

return setUniform(this.gl, activeUniform.type, location, textureUnits);
return setUniform(gl, activeUniform.type, location, textureUnits);
}

setUniform(this.gl, activeUniform.type, location, uniform.value);
setUniform(gl, activeUniform.type, location, uniform.value);
});

this.applyState();
if (flipFaces) this.gl.renderer.setFrontFace(this.frontFace === this.gl.CCW ? this.gl.CW : this.gl.CCW);
if (flipFaces) gl.renderer.setFrontFace(this.frontFace === gl.CCW ? gl.CW : gl.CCW);
}

remove() {
this.gl.deleteProgram(this.program);
this.programData && this.programData.remove();
this.programData = null;
}
}

Expand Down Expand Up @@ -263,14 +240,6 @@ function setUniform(gl, type, location, value) {
}
}

function addLineNumbers(string) {
let lines = string.split('\n');
for (let i = 0; i < lines.length; i++) {
lines[i] = i + 1 + ': ' + lines[i];
}
return lines.join('\n');
}

function flatten(a) {
const arrayLen = a.length;
const valueLen = a[0].length;
Expand Down
Loading