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

Show file tree
Hide file tree
Changes from 25 commits
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
265 changes: 185 additions & 80 deletions src/webgl/p5.RendererGL.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,11 @@ import './p5.Matrix';
import './p5.Framebuffer';
import { readFileSync } from 'fs';
import { join } from 'path';
import { MipmapTexture } from './p5.Texture';
import { CubemapTexture, MipmapTexture } from './p5.Texture';

const STROKE_CAP_ENUM = {};
const STROKE_JOIN_ENUM = {};

let lineDefs = '';
const defineStrokeCapEnum = function (key, val) {
lineDefs += `#define STROKE_CAP_${key} ${val}\n`;
Expand All @@ -32,77 +33,7 @@ defineStrokeJoinEnum('ROUND', 0);
defineStrokeJoinEnum('MITER', 1);
defineStrokeJoinEnum('BEVEL', 2);

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

const defaultShaders = {
immediateVert: readFileSync(
join(__dirname, '/shaders/immediate.vert'),
'utf-8'
),
vertexColorVert: readFileSync(
join(__dirname, '/shaders/vertexColor.vert'),
'utf-8'
),
vertexColorFrag: readFileSync(
join(__dirname, '/shaders/vertexColor.frag'),
'utf-8'
),
normalVert: readFileSync(join(__dirname, '/shaders/normal.vert'), 'utf-8'),
normalFrag: readFileSync(join(__dirname, '/shaders/normal.frag'), 'utf-8'),
basicFrag: readFileSync(join(__dirname, '/shaders/basic.frag'), 'utf-8'),
lightVert:
lightingShader +
readFileSync(join(__dirname, '/shaders/light.vert'), 'utf-8'),
lightTextureFrag: readFileSync(
join(__dirname, '/shaders/light_texture.frag'),
'utf-8'
),
phongVert: readFileSync(join(__dirname, '/shaders/phong.vert'), 'utf-8'),
phongFrag:
lightingShader +
readFileSync(join(__dirname, '/shaders/phong.frag'), 'utf-8'),
fontVert: readFileSync(join(__dirname, '/shaders/font.vert'), 'utf-8'),
fontFrag: readFileSync(join(__dirname, '/shaders/font.frag'), 'utf-8'),
lineVert:
lineDefs + readFileSync(join(__dirname, '/shaders/line.vert'), 'utf-8'),
lineFrag:
lineDefs + readFileSync(join(__dirname, '/shaders/line.frag'), 'utf-8'),
pointVert: readFileSync(join(__dirname, '/shaders/point.vert'), 'utf-8'),
pointFrag: readFileSync(join(__dirname, '/shaders/point.frag'), 'utf-8'),
imageLightVert: readFileSync(join(__dirname, '/shaders/imageLight.vert'), 'utf-8'),
imageLightDiffusedFrag: readFileSync(join(__dirname, '/shaders/imageLightDiffused.frag'), 'utf-8'),
imageLightSpecularFrag: readFileSync(join(__dirname, '/shaders/imageLightSpecular.frag'), 'utf-8')
};
for (const key in defaultShaders) {
defaultShaders[key] = webgl2CompatibilityShader + defaultShaders[key];
}

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

/**
* @module Rendering
Expand Down Expand Up @@ -444,6 +375,24 @@ p5.RendererGL = class RendererGL extends p5.Renderer {
this.GL = this.drawingContext;
this._pInst._setProperty('drawingContext', this.drawingContext);

this._pInst.shaderCache={};
this.getCachedShader =
function (shaderKey, vertexShaderSource, fragmentShaderSource) {
if (!this._pInst.shaderCache) {
this._pInst.shaderCache = {}; // ensures a unique shaderCache for each instance of p5.RendererGL
}
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];
};

// erasing
this._isErasing = false;

Expand Down Expand Up @@ -564,6 +513,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 @@ -830,6 +780,122 @@ p5.RendererGL = class RendererGL extends p5.Renderer {
this._pInst,
!isPGraphics
);


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

defaultShaders = {
immediateVert: renderer.getCachedShader('immediateVert',readFileSync(
Copy link
Contributor

@davepagurek davepagurek Jan 19, 2024

Choose a reason for hiding this comment

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

One issue with this current structure is that we're calling getCachedShader in the in _resetContext`, so on load, it will try to make a bunch of shaders.

We maybe want to keep the shader source code in objects outside the constructor as it was before, and then we only call getCachedShader when we need to use the shader. e.g.:

  _getCubemapShader() {
    return this.getCachedShader(
      'defaultCubemapShader', 
      this._webGL2CompatibilityPrefix('vert', 'mediump') +
        defaultShaders.cubemapVertexShader,
      this._webGL2CompatibilityPrefix('frag', 'mediump') +
        defaultShaders.cubemapFragmentShader
    )
  }

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

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

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



this._pInst._setProperty('_renderer', renderer);
renderer.resize(w, h);
renderer._applyDefaults();
Expand Down Expand Up @@ -1846,6 +1912,19 @@ p5.RendererGL = class RendererGL extends p5.Renderer {
return this._defaultFontShader;
}

_getCubemapShader() {
if (!this._defaultCubemapShader) {
this._defaultCubemapShader = new p5.Shader(
this,
this._webGL2CompatibilityPrefix('vert', 'mediump') +
defaultShaders.cubemapVertexShader,
this._webGL2CompatibilityPrefix('frag', 'mediump') +
defaultShaders.cubemapFragmentShader
);
}
return this._defaultCubemapShader;
}

_webGL2CompatibilityPrefix(
shaderType,
floatPrecision
Expand Down Expand Up @@ -1908,6 +1987,8 @@ p5.RendererGL = class RendererGL extends p5.Renderer {
let smallWidth = 200;
let width = smallWidth;
let height = Math.floor(smallWidth * (input.height / input.width));
let cubemapTexture;
const faces = [];
newFramebuffer = this._pInst.createFramebuffer({
width, height, density: 1
});
Expand All @@ -1919,23 +2000,47 @@ p5.RendererGL = class RendererGL extends p5.Renderer {
defaultShaders.imageLightDiffusedFrag
);
}
// Create a shader for cubemap conversion
const cubemapShader = this._getCubemapShader();

// Render each face of the cubemap
for (let i = 0; i < 6; ++i) {
newFramebuffer.draw(() => {
cubemapShader.use();
cubemapShader.setUniform('equirectangularMap', input);
cubemapShader.setUniform('projection', captureProjection);
cubemapShader.setUniform('view', captureViews[i]);

this._pInst.noStroke();
this._pInst.rectMode(constants.CENTER);
this._pInst.noLights();
this._pInst.rect(0, 0, width, height);

// Capture the rendered face and store it in the faces array
faces[i] = this._pInst.get(0, 0, width, height);
Copy link
Contributor

@davepagurek davepagurek Jan 21, 2024

Choose a reason for hiding this comment

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

Also probably not the source of the error, but we might need to put this outside of the draw(...) block, and use faces[i] = newFramebuffer.get() instead of this._pInst.get(...).

});
}
// Use the diffusedShader for rendering
newFramebuffer.draw(() => {
Copy link
Contributor

@davepagurek davepagurek Jan 21, 2024

Choose a reason for hiding this comment

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

Probably not the cause of the error you're seeing, but I think we probably no longer need this newFramebuffer.draw(...) block since we are no longer using this framebuffer as the texture. (I think that means we actually need to call newFramebuffer.free() here to avoid a small memory leak?)

this._pInst.shader(this.diffusedShader);
this.diffusedShader.setUniform('environmentMap', input);
this._pInst.noStroke();
this._pInst.rectMode(constants.CENTER);
this._pInst.noLights();
this._pInst.rect(0, 0, width, height);
// Render the cubemap using the stored faces
for (let i = 0; i < 6; ++i) {
this._pInst.image(faces[i], 0, 0, width, height);
}
});
this.diffusedTextures.set(input, newFramebuffer);
return newFramebuffer;
// Initialize CubemapTexture class with faces
cubemapTexture=new CubemapTexture(this._pInst,faces, {});
cubemapTexture.init(faces);
this.diffusedTextures.set(input, cubemapTexture);
return cubemapTexture;
}

/*
* used in imageLight,
* To create a texture from the input non blurry image, if it doesn't already exist
* Creating 8 different levels of textures according to different
* sizes and atoring them in `levels` array
* sizes and storing them in `levels` array
* Creating a new Mipmap texture with that `levels` array
* Storing the texture for input image in map called `specularTextures`
* maps the input p5.Image to a p5.MipmapTexture
Expand Down Expand Up @@ -2112,7 +2217,7 @@ p5.RendererGL = class RendererGL extends p5.Renderer {
// this.activeImageLight has image as a key
// look up the texture from the diffusedTexture map
let diffusedLight = this.getDiffusedTexture(this.activeImageLight);
shader.setUniform('environmentMapDiffused', diffusedLight);
shader.setUniform('environmentMapDiffusedCubemap', diffusedLight);
Copy link
Collaborator

@perminder-17 perminder-17 Jun 23, 2024

Choose a reason for hiding this comment

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

I am not sure but I feel diffusedLight is also a sampler2D texture, could it be passed as a uniform with samplerCube texture?

Copy link
Member Author

@Garima3110 Garima3110 Jun 24, 2024

Choose a reason for hiding this comment

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

Here, diffusedLight is obtained from getDiffusedTexture, which returns a CubemapTexture object. Since environmentMapDiffusedCubemap in the shader expects a cubemap texture (samplerCube), so I think diffusedLight is being correctly assigned to the environmentMapDiffusedCubemap uniform in the shader, which is of type samplerCube.

Copy link
Collaborator

@perminder-17 perminder-17 Jun 24, 2024

Choose a reason for hiding this comment

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

Oooh...sorry. I overlooked this, previously we had diffusedLight with sampler2D texture so I got confused. I see you have updated getDiffusedTexture()

let specularLight = this.getSpecularTexture(this.activeImageLight);
// In p5js the range of shininess is >= 1,
// Therefore roughness range will be ([0,1]*8)*20 or [0, 160]
Expand Down
3 changes: 2 additions & 1 deletion src/webgl/p5.Shader.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -225,7 +225,7 @@ p5.Shader = class {
uniform.name = uniformName;
uniform.type = uniformInfo.type;
uniform._cachedData = undefined;
if (uniform.type === gl.SAMPLER_2D) {
if (uniform.type === gl.SAMPLER_2D || uniform.type === gl.SAMPLER_CUBE) {
uniform.samplerIndex = samplerIndex;
samplerIndex++;
this.samplers.push(uniform);
Expand Down Expand Up @@ -540,6 +540,7 @@ p5.Shader = class {
}
break;
case gl.SAMPLER_2D:
case gl.SAMPLER_CUBE:
gl.activeTexture(gl.TEXTURE0 + uniform.samplerIndex);
uniform.texture =
data instanceof p5.Texture ? data : this._renderer.getTexture(data);
Expand Down
Loading