Addresses issue #6587 #6665
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -9,10 +9,12 @@ import './p5.Matrix'; | |
| import './p5.Framebuffer'; | ||
| import { readFileSync } from 'fs'; | ||
| import { join } from 'path'; | ||
| 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) { | ||
| lineDefs += `#define STROKE_CAP_${key} ${val}\n`; | ||
|
|
@@ -32,77 +34,114 @@ defineStrokeJoinEnum('ROUND', 0); | |
| defineStrokeJoinEnum('MITER', 1); | ||
| defineStrokeJoinEnum('BEVEL', 2); | ||
|
|
||
| const getCachedShader= (shaderKey, shaderSource)=>{ | ||
| if(!shaderCache[shaderKey]){ | ||
| shaderCache[shaderKey]=p5.createShader(shaderSource); | ||
|
||
| } | ||
| return shaderCache[shaderKey]; | ||
| }; | ||
|
|
||
| const lightingShader = getCachedShader('lightingShader',readFileSync( | ||
| join(__dirname, '/shaders/lighting.glsl'), | ||
| 'utf-8' | ||
| )); | ||
| const webgl2CompatibilityShader = getCachedShader('webgl2CompatibilityShader',readFileSync( | ||
|
||
| join(__dirname, '/shaders/webgl2Compatibility.glsl'), | ||
| 'utf-8' | ||
| )); | ||
|
|
||
| const defaultShaders = { | ||
| immediateVert: getCachedShader('immediateVert',readFileSync( | ||
| join(__dirname, '/shaders/immediate.vert'), | ||
| 'utf-8' | ||
| )), | ||
| vertexColorVert: getCachedShader('vertexColorVert',readFileSync( | ||
| join(__dirname, '/shaders/vertexColor.vert'), | ||
| 'utf-8' | ||
| )), | ||
| vertexColorFrag: getCachedShader('vertexColorFrag',readFileSync( | ||
| join(__dirname, '/shaders/vertexColor.frag'), | ||
| 'utf-8' | ||
| )), | ||
| normalVert: getCachedShader('normalVert',readFileSync( | ||
| join(__dirname, '/shaders/normal.vert'), 'utf-8' | ||
| )), | ||
| normalFrag: getCachedShader('normalFrag',readFileSync( | ||
| join(__dirname, '/shaders/normal.frag'), 'utf-8' | ||
| )), | ||
| basicFrag: getCachedShader('basicFrag',readFileSync( | ||
| join(__dirname, '/shaders/basic.frag'), 'utf-8' | ||
| )), | ||
| lightVert: getCachedShader('lightVert',lightingShader + readFileSync( | ||
| join(__dirname, '/shaders/light.vert'), 'utf-8' | ||
| )), | ||
| lightTextureFrag:getCachedShader('lightTextureFrag', readFileSync( | ||
| join(__dirname, '/shaders/light_texture.frag'),'utf-8' | ||
| )), | ||
| phongVert: getCachedShader('phongVert',readFileSync( | ||
| join(__dirname, '/shaders/phong.vert'), 'utf-8' | ||
| )), | ||
| phongFrag: getCachedShader('phongFrag', lightingShader + readFileSync( | ||
| join(__dirname, '/shaders/phong.frag'), 'utf-8' | ||
| )), | ||
| fontVert: getCachedShader('fontVert',readFileSync( | ||
| join(__dirname, '/shaders/font.vert'), 'utf-8' | ||
| )), | ||
| fontFrag: getCachedShader('fontFrag',readFileSync( | ||
| join(__dirname, '/shaders/font.frag'), 'utf-8' | ||
| )), | ||
| lineVert: getCachedShader('lineVert',lineDefs + readFileSync( | ||
| join(__dirname, '/shaders/line.vert'), 'utf-8' | ||
| )), | ||
| lineFrag : getCachedShader('lineFrag',lineDefs + readFileSync( | ||
| join(__dirname, '/shaders/line.frag'), 'utf-8' | ||
| )), | ||
| pointVert:getCachedShader('pointVert', readFileSync( | ||
| join(__dirname, '/shaders/point.vert'), 'utf-8' | ||
| )), | ||
| pointFrag:getCachedShader('pointFrag', readFileSync( | ||
| join(__dirname, '/shaders/point.frag'), 'utf-8' | ||
| )), | ||
| imageLightVert:getCachedShader('imageLightVert', readFileSync( | ||
| join(__dirname, '/shaders/imageLight.vert'), 'utf-8' | ||
| )), | ||
| imageLightDiffusedFrag:getCachedShader('imageLightDiffusedFrag', readFileSync( | ||
| join(__dirname, '/shaders/imageLightDiffused.frag'), 'utf-8' | ||
| )), | ||
| imageLightSpecularFrag:getCachedShader('imageLightSpecularFrag', readFileSync( | ||
| join(__dirname, '/shaders/imageLightSpecular.frag'), 'utf-8' | ||
| )), | ||
| cubemapVertexShader:getCachedShader('cubemapVertexShader',readFileSync( | ||
| join(__dirname,'/shaders/cubeVertex.vert'),'utf8' | ||
| )), | ||
| cubemapFragmentShader:getCachedShader('cubemapFragmentShader',readFileSync( | ||
| join(__dirname,'/shaders/cubeFragment.frag'),'utf8' | ||
| )) | ||
| }; | ||
| for (const key in defaultShaders) { | ||
| defaultShaders[key] = webgl2CompatibilityShader + defaultShaders[key]; | ||
| } | ||
|
|
||
| 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')) | ||
| }; | ||
| const filterShaderVert = getCachedShader('filterShaderVert',readFileSync( | ||
| join(__dirname, '/shaders/filters/default.vert'), 'utf-8')); | ||
|
|
||
| /** | ||
| * @module Rendering | ||
|
|
@@ -1840,6 +1879,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 | ||
|
|
@@ -1902,6 +1954,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 | ||
| }); | ||
|
|
@@ -1913,23 +1967,49 @@ p5.RendererGL = class RendererGL extends p5.Renderer { | |
| defaultShaders.imageLightDiffusedFrag | ||
| ); | ||
| } | ||
| // Create a shader for cubemap conversion | ||
| const cubemapShader = this._pInst.createShader( | ||
|
||
| defaultShaders.cubemapVertexShader, | ||
| defaultShaders.cubemapFragmentShader); | ||
|
|
||
| // 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); | ||
|
||
| }); | ||
| } | ||
| // Use the diffusedShader for rendering | ||
| newFramebuffer.draw(() => { | ||
|
||
| this._pInst.shader(this.diffusedShader); | ||
| this.diffusedShader.setUniform('environmentMap', input); | ||
| // Render the cubemap using the stored faces | ||
| for (let i = 0; i < 6; ++i) { | ||
| this._pInst.image(faces[i], 0, 0, width, height); | ||
| } | ||
| }); | ||
| // 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 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 | ||
|
|
@@ -2087,7 +2167,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('environmentMapDiffusedCubemap', diffusedLight); | ||
|
Collaborator
There was a problem hiding this comment. I am not sure but I feel diffusedLight is also a sampler2D texture, could it be passed as a uniform with samplerCube texture?
Member
Author
There was a problem hiding this comment. Here, diffusedLight is obtained from
Collaborator
There was a problem hiding this comment. Oooh...sorry. I overlooked this, previously we had diffusedLight with |
||
| 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] | ||
|
|
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| // Adapted from: https://learnopengl.com/PBR/IBL/Diffuse-irradiance | ||
| IN vec3 localPos; | ||
|
Collaborator
There was a problem hiding this comment. In my opinion I feel for maximum compatibility, we can do this one in GL ES 100 instead of 300? Using attribute instead of IN, using the spacial variable gl_FragColor instead of defining an OUT_COLOR, and using texture2D() instead of texture()? What you feel?
Member
Author
There was a problem hiding this comment. Well I started from that only , and was getting a lot of errors and from Dave's suggestion of using the
Collaborator
There was a problem hiding this comment. Hmmm...It looks like you need to use both webgl-1 and webgl-2 modes on shaders. |
||
|
|
||
| uniform sampler2D equirectangularMap; | ||
|
Collaborator
There was a problem hiding this comment. I think you have hard-coded the value of equirectangularMap to "0" which won't work or its actually a float value. |
||
|
|
||
| const vec2 invAtan = vec2(0.1591, 0.3183); | ||
|
|
||
| vec2 SampleSphericalMap(vec3 v) | ||
| { | ||
| vec2 uv = vec2(atan(v.z, v.x), asin(v.y)); | ||
| uv *= invAtan; | ||
| uv += 0.5; | ||
| return uv; | ||
| } | ||
|
|
||
| void main() | ||
| { | ||
| vec2 uv = SampleSphericalMap(normalize(localPos)); | ||
| vec3 color = texture(equirectangularMap, uv).rgb; | ||
|
||
|
|
||
| OUT_COLOR = vec4(color, 1.0); | ||
| } | ||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think this would need to be not just a
const, but a property onp5.RendererGL, as each instance of a renderer will need its own shaders. We just want the ability to share those shaders within the renderer.