Skip to content

Addresses issue #6587 #6665

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

Draft
Garima3110 wants to merge 37 commits into
base: main
Choose a base branch
from
Draft

Addresses issue #6587 #6665

Changes from 1 commit
Commits
Show all changes
37 commits
Select commit Hold shift + click to select a range
227fe69
Extending p5.texture for cubemap textures
Garima3110 Dec 24, 2023
8e2d05c
Merge remote-tracking branch 'upstream/main' into cubeMap
Garima3110 Dec 25, 2023
317d915
Merge remote-tracking branch 'upstream/main' into cubeMap
Garima3110 Dec 28, 2023
917de2f
Added vertex and fragment shaders for cubemaps
Garima3110 Dec 28, 2023
5139c0a
Updated src/webgl/shaders/lighting.glsl file for cubemaps
Garima3110 Dec 28, 2023
45e33d5
Storing the diffuse irradiance in a cubemap texture
Garima3110 Dec 28, 2023
1d54fad
Added caching mechanism for shaders
Garima3110 Dec 29, 2023
1ff8702
Updated caching for some shaders
Garima3110 Dec 29, 2023
6cd7856
Updated p5.Texture.js
Garima3110 Dec 29, 2023
4401ebd
Updated cubeVertex and cubeFragment shaders
Garima3110 Dec 29, 2023
37751d9
renamed cubemap shader files
Garima3110 Dec 29, 2023
93b8b50
Updated p5.RendererGL.js
Garima3110 Dec 29, 2023
66dc0dc
Updated p5.Texture.js
Garima3110 Dec 29, 2023
cffda69
Updated lighting.glsl
Garima3110 Dec 29, 2023
751b16a
Added TEXTURE_CUBE
Garima3110 Dec 29, 2023
29e7a14
Added gl.SAMPLER_CUBE uniform type to p5.Shader.js
Garima3110 Dec 29, 2023
7981fdc
Merge remote-tracking branch 'upstream/main' into cubeMap
Garima3110 Dec 31, 2023
e7cd392
Minor changes in SAMPLER_CUBE uniform type
Garima3110 Dec 31, 2023
f30af0e
Minor updates on caching shaders
Garima3110 Dec 31, 2023
d51c4a8
Merge branch 'processing:main' into cubeMap
Garima3110 Jan 4, 2024
38bcaab
Merge branch 'processing:main' into cubeMap
Garima3110 Jan 8, 2024
2558755
Merge remote-tracking branch 'upstream/main' into cubeMap
Garima3110 Jan 13, 2024
773198a
Updated RendererGL.js
Garima3110 Jan 13, 2024
bbc7c72
Merge remote-tracking branch 'upstream/main' into cubeMap
Garima3110 Jan 15, 2024
ffd9097
Reordered some code in p5.RendererGL.js
Garima3110 Jan 16, 2024
cc77e7e
Minor fixes
Garima3110 Jan 20, 2024
518b0f0
Merge remote-tracking branch 'upstream/main' into cubeMap
Garima3110 Jan 20, 2024
c124738
Fragment shader error fixed
Garima3110 Jan 23, 2024
38e6e84
Merge remote-tracking branch 'upstream/main' into cubeMap
Garima3110 Jan 23, 2024
a585ef5
Minor updates
Garima3110 Jan 23, 2024
f118a3b
some fixes
Garima3110 Jan 24, 2024
2da03d1
Merge branch 'processing:main' into cubeMap
Garima3110 Jan 29, 2024
5961be8
Minor changes
Garima3110 Mar 30, 2024
4515c09
Some changes with cubemap implementation
Garima3110 Jun 20, 2024
be6d27f
Minor changes
Garima3110 Jun 24, 2024
6dc9916
fix
Garima3110 Jun 24, 2024
3133e80
Merge branch 'processing:main' into cubeMap
Garima3110 Nov 2, 2024
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
Prev Previous commit
Next Next commit
Minor updates on caching shaders
  • Loading branch information
@Garima3110
Garima3110 committed Dec 31, 2023
commit f30af0e4ee2de8e0cd4b0f5869175b0169aec22b
119 changes: 69 additions & 50 deletions src/webgl/p5.RendererGL.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@ import { CubemapTexture, MipmapTexture } from './p5.Texture';

const STROKE_CAP_ENUM = {};
const STROKE_JOIN_ENUM = {};
const shaderCache = {}; //Shader cache object

let lineDefs = '';
const defineStrokeCapEnum = function (key, val) {
Expand All @@ -34,87 +33,98 @@ defineStrokeJoinEnum('ROUND', 0);
defineStrokeJoinEnum('MITER', 1);
defineStrokeJoinEnum('BEVEL', 2);

const getCachedShader= (shaderKey, shaderSource)=>{
if(!shaderCache[shaderKey]){
shaderCache[shaderKey]=p5.createShader(shaderSource);
this._pInst.shaderCache={};
Copy link
Contributor

@davepagurek davepagurek Jan 12, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this is probably the cause, over here, this is undefined. If you want it to be initialized on a RendererGL instance, I think moving this line to the RendererGL constructor would work.

p5.RendererGL.prototype.getCachedShader = function (
shaderKey, vertexShaderSource, fragmentShaderSource) {
if (!this._pInst.shaderCache) {
this._pInst.shaderCache = {}; //ensures a unique shaderCache for each instance of p5.RendererGL
}
return shaderCache[shaderKey];
if (!this._pInst.shaderCache[shaderKey]) {
const vertexShader = this._pInst.createShader(
this._pInst.VERTEX_SHADER, vertexShaderSource);
const fragmentShader = this._pInst.createShader(
this._pInst.FRAGMENT_SHADER, fragmentShaderSource);

this._pInst.shaderCache[shaderKey] = this._pInst.createShaderProgram(
vertexShader, fragmentShader);
}
return this._pInst.shaderCache[shaderKey];
};

const lightingShader = getCachedShader('lightingShader',readFileSync(
const lightingShader = p5.RendererGL.prototype.getCachedShader('lightingShader',readFileSync(
Copy link
Contributor

@davepagurek davepagurek Jan 14, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think right now this is creating p5.Shader instances where before it was just loading shader source code. We still need to load the source code here, but we can't actually instantiate a p5.Shader until we have a p5 instance. Right now, you're calling the method directly on the class itself rather than an instance of the class, so this will be undefined.

I think the spot to call the getCachedShader method is inside of instance method like getDefaultFillShader().

join(__dirname, '/shaders/lighting.glsl'),
'utf-8'
));
const webgl2CompatibilityShader = getCachedShader('webgl2CompatibilityShader',readFileSync(
const webgl2CompatibilityShader = readFileSync(
join(__dirname, '/shaders/webgl2Compatibility.glsl'),
'utf-8'
));
);

const defaultShaders = {
immediateVert: getCachedShader('immediateVert',readFileSync(
immediateVert: p5.RendererGL.prototype.getCachedShader('immediateVert',readFileSync(
join(__dirname, '/shaders/immediate.vert'),
'utf-8'
)),
vertexColorVert: getCachedShader('vertexColorVert',readFileSync(
vertexColorVert: p5.RendererGL.prototype.getCachedShader('vertexColorVert',readFileSync(
join(__dirname, '/shaders/vertexColor.vert'),
'utf-8'
)),
vertexColorFrag: getCachedShader('vertexColorFrag',readFileSync(
vertexColorFrag: p5.RendererGL.prototype.getCachedShader('vertexColorFrag',readFileSync(
join(__dirname, '/shaders/vertexColor.frag'),
'utf-8'
)),
normalVert: getCachedShader('normalVert',readFileSync(
normalVert: p5.RendererGL.prototype.getCachedShader('normalVert',readFileSync(
join(__dirname, '/shaders/normal.vert'), 'utf-8'
)),
normalFrag: getCachedShader('normalFrag',readFileSync(
normalFrag: p5.RendererGL.prototype.getCachedShader('normalFrag',readFileSync(
join(__dirname, '/shaders/normal.frag'), 'utf-8'
)),
basicFrag: getCachedShader('basicFrag',readFileSync(
basicFrag: p5.RendererGL.prototype.getCachedShader('basicFrag',readFileSync(
join(__dirname, '/shaders/basic.frag'), 'utf-8'
)),
lightVert: getCachedShader('lightVert',lightingShader + readFileSync(
lightVert: p5.RendererGL.prototype.getCachedShader('lightVert',lightingShader + readFileSync(
join(__dirname, '/shaders/light.vert'), 'utf-8'
)),
lightTextureFrag:getCachedShader('lightTextureFrag', readFileSync(
lightTextureFrag:p5.RendererGL.prototype.getCachedShader('lightTextureFrag', readFileSync(
join(__dirname, '/shaders/light_texture.frag'),'utf-8'
)),
phongVert: getCachedShader('phongVert',readFileSync(
phongVert: p5.RendererGL.prototype.getCachedShader('phongVert',readFileSync(
join(__dirname, '/shaders/phong.vert'), 'utf-8'
)),
phongFrag: getCachedShader('phongFrag', lightingShader + readFileSync(
phongFrag: p5.RendererGL.prototype.getCachedShader('phongFrag', lightingShader + readFileSync(
join(__dirname, '/shaders/phong.frag'), 'utf-8'
)),
fontVert: getCachedShader('fontVert',readFileSync(
fontVert: p5.RendererGL.prototype.getCachedShader('fontVert',readFileSync(
join(__dirname, '/shaders/font.vert'), 'utf-8'
)),
fontFrag: getCachedShader('fontFrag',readFileSync(
fontFrag: p5.RendererGL.prototype.getCachedShader('fontFrag',readFileSync(
join(__dirname, '/shaders/font.frag'), 'utf-8'
)),
lineVert: getCachedShader('lineVert',lineDefs + readFileSync(
lineVert: p5.RendererGL.prototype.getCachedShader('lineVert',lineDefs + readFileSync(
join(__dirname, '/shaders/line.vert'), 'utf-8'
)),
lineFrag : getCachedShader('lineFrag',lineDefs + readFileSync(
lineFrag : p5.RendererGL.prototype.getCachedShader('lineFrag',lineDefs + readFileSync(
join(__dirname, '/shaders/line.frag'), 'utf-8'
)),
pointVert:getCachedShader('pointVert', readFileSync(
pointVert:p5.RendererGL.prototype.getCachedShader('pointVert', readFileSync(
join(__dirname, '/shaders/point.vert'), 'utf-8'
)),
pointFrag:getCachedShader('pointFrag', readFileSync(
pointFrag:p5.RendererGL.prototype.getCachedShader('pointFrag', readFileSync(
join(__dirname, '/shaders/point.frag'), 'utf-8'
)),
imageLightVert:getCachedShader('imageLightVert', readFileSync(
imageLightVert:p5.RendererGL.prototype.getCachedShader('imageLightVert', readFileSync(
join(__dirname, '/shaders/imageLight.vert'), 'utf-8'
)),
imageLightDiffusedFrag:getCachedShader('imageLightDiffusedFrag', readFileSync(
imageLightDiffusedFrag:p5.RendererGL.prototype.getCachedShader('imageLightDiffusedFrag', readFileSync(
join(__dirname, '/shaders/imageLightDiffused.frag'), 'utf-8'
)),
imageLightSpecularFrag:getCachedShader('imageLightSpecularFrag', readFileSync(
imageLightSpecularFrag:p5.RendererGL.prototype.getCachedShader('imageLightSpecularFrag', readFileSync(
join(__dirname, '/shaders/imageLightSpecular.frag'), 'utf-8'
)),
cubemapVertexShader:getCachedShader('cubemapVertexShader',readFileSync(
cubemapVertexShader:p5.RendererGL.prototype.getCachedShader('cubemapVertexShader',readFileSync(
join(__dirname,'/shaders/cubeVertex.vert'),'utf8'
)),
cubemapFragmentShader:getCachedShader('cubemapFragmentShader',readFileSync(
cubemapFragmentShader:p5.RendererGL.prototype.getCachedShader('cubemapFragmentShader',readFileSync(
join(__dirname,'/shaders/cubeFragment.frag'),'utf8'
))
};
Expand All @@ -123,25 +133,35 @@ for (const key in defaultShaders) {
}

const filterShaderFrags = {
[constants.GRAY]:getCachedShader(constants.GRAY,
readFileSync(join(__dirname, '/shaders/filters/gray.frag'), 'utf-8')),
[constants.ERODE]:getCachedShader(constants.ERODE,
readFileSync(join(__dirname, '/shaders/filters/erode.frag'), 'utf-8')),
[constants.DILATE]:getCachedShader(constants.DILATE,
readFileSync(join(__dirname, '/shaders/filters/dilate.frag'), 'utf-8')),
[constants.BLUR]:getCachedShader(constants.BLUR,
readFileSync(join(__dirname, '/shaders/filters/blur.frag'), 'utf-8')),
[constants.POSTERIZE]:getCachedShader(constants.POSTERIZE,
readFileSync(join(__dirname, '/shaders/filters/posterize.frag'), 'utf-8')),
[constants.OPAQUE]:getCachedShader(constants.OPAQUE,
readFileSync(join(__dirname, '/shaders/filters/opaque.frag'), 'utf-8')),
[constants.INVERT]:getCachedShader(constants.INVERT,
readFileSync(join(__dirname, '/shaders/filters/invert.frag'), 'utf-8')),
[constants.THRESHOLD]:getCachedShader(constants.THRESHOLD,
readFileSync(join(__dirname, '/shaders/filters/threshold.frag'), 'utf-8'))
[constants.GRAY]:p5.RendererGL.prototype.getCachedShader(
constants.GRAY,readFileSync(join(
__dirname, '/shaders/filters/gray.frag'), 'utf-8')),
[constants.ERODE]:p5.RendererGL.prototype.getCachedShader(
constants.ERODE,readFileSync(join(
__dirname, '/shaders/filters/erode.frag'), 'utf-8')),
[constants.DILATE]:p5.RendererGL.prototype.getCachedShader(
constants.DILATE,readFileSync(join(
__dirname, '/shaders/filters/dilate.frag'), 'utf-8')),
[constants.BLUR]:p5.RendererGL.prototype.getCachedShader(
constants.BLUR,readFileSync(join(
__dirname, '/shaders/filters/blur.frag'), 'utf-8')),
[constants.POSTERIZE]:p5.RendererGL.prototype.getCachedShader(
constants.POSTERIZE,readFileSync(join(
__dirname, '/shaders/filters/posterize.frag'), 'utf-8')),
[constants.OPAQUE]:p5.RendererGL.prototype.getCachedShader(
constants.OPAQUE,readFileSync(join(
__dirname, '/shaders/filters/opaque.frag'), 'utf-8')),
[constants.INVERT]:p5.RendererGL.prototype.getCachedShader(
constants.INVERT,readFileSync(join(
__dirname, '/shaders/filters/invert.frag'), 'utf-8')),
[constants.THRESHOLD]:p5.RendererGL.prototype.getCachedShader(
constants.THRESHOLD,readFileSync(join(
__dirname, '/shaders/filters/threshold.frag'), 'utf-8'))
};
const filterShaderVert = getCachedShader('filterShaderVert',readFileSync(
join(__dirname, '/shaders/filters/default.vert'), 'utf-8'));

const filterShaderVert = p5.RendererGL.prototype.getCachedShader(
'filterShaderVert',readFileSync(join(
__dirname, '/shaders/filters/default.vert'), 'utf-8'));

/**
* @module Rendering
Expand Down Expand Up @@ -599,6 +619,7 @@ p5.RendererGL = class RendererGL extends p5.Renderer {
this._defaultNormalShader = undefined;
this._defaultColorShader = undefined;
this._defaultPointShader = undefined;
this._defaultCubemapShader=undefined;

this.userFillShader = undefined;
this.userStrokeShader = undefined;
Expand Down Expand Up @@ -1968,9 +1989,7 @@ p5.RendererGL = class RendererGL extends p5.Renderer {
);
}
// Create a shader for cubemap conversion
const cubemapShader = this._pInst.createShader(
defaultShaders.cubemapVertexShader,
defaultShaders.cubemapFragmentShader);
const cubemapShader = this._getCubemapShader();

// Render each face of the cubemap
for (let i = 0; i < 6; ++i) {
Expand Down