p5
Version:
[](https://www.npmjs.com/package/p5)
2,130 lines • 109 kB
JavaScript
import { ad as WEBGL, ab as WEBGL2, L as LIGHTEST, D as DARKEST, S as SUBTRACT, R as REPLACE, E as EXCLUSION, a as SCREEN, M as MULTIPLY, b as REMOVE, A as ADD, B as BLEND, c as TRIANGLES, K as TRIANGLE_FAN, n as CORNER, U as UNSIGNED_BYTE, g as LINEAR, aG as LINEAR_MIPMAP, a7 as TEXTURE, F as FLOAT, d as UNSIGNED_INT, H as HALF_FLOAT } from '../constants-DwbuOBz3.js';
import { R as Renderer3D, o as readPixelWebGL, q as readPixelsWebGL, M as MipmapTexture, h as getWebGLShaderAttributes, g as getWebGLUniformMetadata, s as setWebGLUniformValue, e as setWebGLTextureParams, j as populateGLSLHooks, u as checkWebGLCapabilities } from '../rendering-C5SM-3b6.js';
import { getStrokeDefs } from './enums.js';
import { Shader } from './p5.Shader.js';
import { R as RGB, h as RGBA } from '../creating_reading-Be7_6X4p.js';
import { I as Image } from '../p5.Renderer-N-APumjv.js';
import { g as glslBackend } from '../strands_glslBackend-DMhOnoGl.js';
import '../strands/ir_types.js';
import { getShaderHookTypes } from './shaderHookUtils.js';
import { f as filterBaseVert, a as filterBaseFrag, w as webgl2CompatibilityShader } from '../webgl2Compatibility-DA7DLMuq.js';
import '../dom/p5.Element.js';
import '../dom/p5.File.js';
import '../io/p5.XML.js';
import 'colorjs.io/fn';
import '../color/color_spaces/hsb.js';
import '../dom/p5.MediaElement.js';
import '../shape/2d_primitives.js';
import '../core/helpers.js';
import '../shape/attributes.js';
import '../shape/curves.js';
import '../shape/vertex.js';
import '../color/setting.js';
import 'omggif';
import '../io/csv.js';
import '../io/utilities.js';
import '../image/pixels.js';
import '../image/filters.js';
import '../core/transform.js';
import './GeometryBuilder.js';
import '../math/p5.Matrix.js';
import '../math/Matrices/Matrix.js';
import '../math/p5.Vector.js';
import '../math/Matrices/MatrixInterface.js';
import './p5.Geometry.js';
import './p5.DataArray.js';
import './p5.Quat.js';
import './ShapeBuilder.js';
import 'libtess';
import './p5.RenderBuffer.js';
import './GeometryBufferCache.js';
import '../image/const.js';
import '../shape/custom_shapes.js';
import '../type/textCore.js';
import '../core/States.js';
import '../core/filterShaders.js';
import '../math/trigonometry.js';
import '../strands/ir_dag.js';
import '../strands/strands_FES.js';
import '../ir_builders-CMXkjMoV.js';
import '../strands/ir_cfg.js';
import '../strands/strands_builtins.js';
var lightingShader = "#define PI 3.141592\n\nprecision highp float;\nprecision highp int;\n\nuniform mat4 uViewMatrix;\nuniform mat3 uCameraNormalMatrix;\n\nuniform bool uUseLighting;\n\nuniform int uDirectionalLightCount;\nuniform vec3 uLightingDirection[5];\nuniform vec3 uDirectionalDiffuseColors[5];\nuniform vec3 uDirectionalSpecularColors[5];\n\nuniform int uPointLightCount;\nuniform vec3 uPointLightLocation[5];\nuniform vec3 uPointLightDiffuseColors[5];\t\nuniform vec3 uPointLightSpecularColors[5];\n\nuniform int uSpotLightCount;\nuniform float uSpotLightAngle[5];\nuniform float uSpotLightConc[5];\nuniform vec3 uSpotLightDiffuseColors[5];\nuniform vec3 uSpotLightSpecularColors[5];\nuniform vec3 uSpotLightLocation[5];\nuniform vec3 uSpotLightDirection[5];\n\nuniform bool uSpecular;\nuniform float uShininess;\nuniform float uMetallic;\n\nuniform float uConstantAttenuation;\nuniform float uLinearAttenuation;\nuniform float uQuadraticAttenuation;\n\n// setting from _setImageLightUniforms()\n// boolean to initiate the calculateImageDiffuse and calculateImageSpecular\nuniform bool uUseImageLight;\n// texture for use in calculateImageDiffuse\nuniform sampler2D environmentMapDiffused;\n// texture for use in calculateImageSpecular\nuniform sampler2D environmentMapSpecular;\n\nconst float specularFactor = 2.0;\nconst float diffuseFactor = 0.73;\n\nstruct LightResult {\n float specular;\n float diffuse;\n};\n\nfloat _phongSpecular(\n vec3 lightDirection,\n vec3 viewDirection,\n vec3 surfaceNormal,\n float shininess) {\n\n vec3 R = reflect(lightDirection, surfaceNormal);\n return pow(max(0.0, dot(R, viewDirection)), shininess);\n}\n\nfloat _lambertDiffuse(vec3 lightDirection, vec3 surfaceNormal) {\n return max(0.0, dot(-lightDirection, surfaceNormal));\n}\n\nLightResult _light(vec3 viewDirection, vec3 normal, vec3 lightVector, float shininess, float metallic) {\n\n vec3 lightDir = normalize(lightVector);\n\n //compute our diffuse & specular terms\n LightResult lr;\n float specularIntensity = mix(1.0, 0.4, metallic);\n float diffuseIntensity = mix(1.0, 0.1, metallic);\n if (uSpecular)\n lr.specular = (_phongSpecular(lightDir, viewDirection, normal, shininess)) * specularIntensity;\n lr.diffuse = _lambertDiffuse(lightDir, normal) * diffuseIntensity;\n return lr;\n}\n\n// converts the range of \"value\" from [min1 to max1] to [min2 to max2]\nfloat map(float value, float min1, float max1, float min2, float max2) {\n return min2 + (value - min1) * (max2 - min2) / (max1 - min1);\n}\n\nvec2 mapTextureToNormal( vec3 v ){\n // x = r sin(phi) cos(theta) \n // y = r cos(phi) \n // z = r sin(phi) sin(theta)\n float phi = acos( v.y );\n // if phi is 0, then there are no x, z components\n float theta = 0.0;\n // else \n theta = acos(v.x / sin(phi));\n float sinTheta = v.z / sin(phi);\n if (sinTheta < 0.0) {\n // Turn it into -theta, but in the 0-2PI range\n theta = 2.0 * PI - theta;\n }\n theta = theta / (2.0 * 3.14159);\n phi = phi / 3.14159 ;\n \n vec2 angles = vec2( fract(theta + 0.25), 1.0 - phi );\n return angles;\n}\n\n\nvec3 calculateImageDiffuse(vec3 vNormal, vec3 vViewPosition, float metallic){\n // make 2 seperate builds \n vec3 worldCameraPosition = vec3(0.0, 0.0, 0.0); // hardcoded world camera position\n vec3 worldNormal = normalize(vNormal * uCameraNormalMatrix);\n vec2 newTexCoor = mapTextureToNormal( worldNormal );\n vec4 texture = TEXTURE( environmentMapDiffused, newTexCoor );\n // this is to make the darker sections more dark\n // png and jpg usually flatten the brightness so it is to reverse that\n return mix(smoothstep(vec3(0.0), vec3(1.0), texture.xyz), vec3(0.0), metallic);\n}\n\nvec3 calculateImageSpecular(vec3 vNormal, vec3 vViewPosition, float shininess, float metallic){\n vec3 worldCameraPosition = vec3(0.0, 0.0, 0.0);\n vec3 worldNormal = normalize(vNormal);\n vec3 lightDirection = normalize( vViewPosition - worldCameraPosition );\n vec3 R = reflect(lightDirection, worldNormal) * uCameraNormalMatrix;\n vec2 newTexCoor = mapTextureToNormal( R );\n#ifdef WEBGL2\n // In p5js the range of shininess is >= 1,\n // Therefore roughness range will be ([0,1]*8)*20 or [0, 160]\n // The factor of 8 is because currently the getSpecularTexture\n // only calculated 8 different levels of roughness\n // The factor of 20 is just to spread up this range so that,\n // [1, max] of shininess is converted to [0,160] of roughness\n float roughness = 20. / shininess;\n vec4 outColor = textureLod(environmentMapSpecular, newTexCoor, roughness * 8.);\n#else\n vec4 outColor = TEXTURE(environmentMapSpecular, newTexCoor);\n#endif\n // this is to make the darker sections more dark\n // png and jpg usually flatten the brightness so it is to reverse that\n return mix(\n pow(outColor.xyz, vec3(10)),\n pow(outColor.xyz, vec3(1.2)),\n metallic \n );\n}\n\nvoid totalLight(\n vec3 modelPosition,\n vec3 normal,\n float shininess,\n float metallic,\n out vec3 totalDiffuse,\n out vec3 totalSpecular\n) {\n\n totalSpecular = vec3(0.0);\n\n if (!uUseLighting) {\n totalDiffuse = vec3(1.0);\n return;\n }\n\n totalDiffuse = vec3(0.0);\n\n vec3 viewDirection = normalize(-modelPosition);\n\n for (int j = 0; j < 5; j++) {\n if (j < uDirectionalLightCount) {\n vec3 lightVector = (uViewMatrix * vec4(uLightingDirection[j], 0.0)).xyz;\n vec3 lightColor = uDirectionalDiffuseColors[j];\n vec3 specularColor = uDirectionalSpecularColors[j];\n LightResult result = _light(viewDirection, normal, lightVector, shininess, metallic);\n totalDiffuse += result.diffuse * lightColor;\n totalSpecular += result.specular * lightColor * specularColor;\n }\n\n if (j < uPointLightCount) {\n vec3 lightPosition = (uViewMatrix * vec4(uPointLightLocation[j], 1.0)).xyz;\n vec3 lightVector = modelPosition - lightPosition;\n //calculate attenuation\n float lightDistance = length(lightVector);\n float lightFalloff = 1.0 / (uConstantAttenuation + lightDistance * uLinearAttenuation + (lightDistance * lightDistance) * uQuadraticAttenuation);\n vec3 lightColor = lightFalloff * uPointLightDiffuseColors[j];\n vec3 specularColor = lightFalloff * uPointLightSpecularColors[j];\n\n LightResult result = _light(viewDirection, normal, lightVector, shininess, metallic);\n totalDiffuse += result.diffuse * lightColor;\n totalSpecular += result.specular * lightColor * specularColor;\n }\n\n if(j < uSpotLightCount) {\n vec3 lightPosition = (uViewMatrix * vec4(uSpotLightLocation[j], 1.0)).xyz;\n vec3 lightVector = modelPosition - lightPosition;\n \n float lightDistance = length(lightVector);\n float lightFalloff = 1.0 / (uConstantAttenuation + lightDistance * uLinearAttenuation + (lightDistance * lightDistance) * uQuadraticAttenuation);\n\n vec3 lightDirection = (uViewMatrix * vec4(uSpotLightDirection[j], 0.0)).xyz;\n float spotDot = dot(normalize(lightVector), normalize(lightDirection));\n float spotFalloff;\n if(spotDot < uSpotLightAngle[j]) {\n spotFalloff = 0.0;\n }\n else {\n spotFalloff = pow(spotDot, uSpotLightConc[j]);\n }\n lightFalloff *= spotFalloff;\n\n vec3 lightColor = uSpotLightDiffuseColors[j];\n vec3 specularColor = uSpotLightSpecularColors[j];\n \n LightResult result = _light(viewDirection, normal, lightVector, shininess, metallic);\n \n totalDiffuse += result.diffuse * lightColor * lightFalloff;\n totalSpecular += result.specular * lightColor * specularColor * lightFalloff;\n }\n }\n\n if( uUseImageLight ){\n totalDiffuse += calculateImageDiffuse(normal, modelPosition, metallic);\n totalSpecular += calculateImageSpecular(normal, modelPosition, shininess, metallic);\n }\n\n totalDiffuse *= diffuseFactor;\n totalSpecular *= specularFactor;\n}\n";
var normalVert = "IN vec3 aPosition;\nIN vec3 aNormal;\nIN vec2 aTexCoord;\nIN vec4 aVertexColor;\n\n#define HOOK_DEFINES\n\n#ifdef AUGMENTED_HOOK_getWorldInputs\nuniform mat4 uModelMatrix;\nuniform mat4 uViewMatrix;\nuniform mat3 uModelNormalMatrix;\nuniform mat3 uCameraNormalMatrix;\n#else\nuniform mat4 uModelViewMatrix;\nuniform mat3 uNormalMatrix;\n#endif\nuniform mat4 uProjectionMatrix;\n\nuniform vec4 uMaterialColor;\nuniform bool uUseVertexColor;\n\nOUT vec3 vVertexNormal;\nOUT highp vec2 vVertTexCoord;\nOUT vec4 vColor;\n\nstruct Vertex {\n vec3 position;\n vec3 normal;\n vec2 texCoord;\n vec4 color;\n};\n\nvoid main(void) {\n HOOK_beforeVertex();\n\n Vertex inputs;\n inputs.position = aPosition;\n inputs.normal = aNormal;\n inputs.texCoord = aTexCoord;\n inputs.color = (uUseVertexColor && aVertexColor.x >= 0.0) ? aVertexColor : uMaterialColor;\n#ifdef AUGMENTED_HOOK_getObjectInputs\n inputs = HOOK_getObjectInputs(inputs);\n#endif\n\n#ifdef AUGMENTED_HOOK_getWorldInputs\n inputs.position = (uModelMatrix * vec4(inputs.position, 1.)).xyz;\n inputs.normal = uModelNormalMatrix * inputs.normal;\n inputs = HOOK_getWorldInputs(inputs);\n#endif\n\n#ifdef AUGMENTED_HOOK_getWorldInputs\n // Already multiplied by the model matrix, just apply view\n inputs.position = (uViewMatrix * vec4(inputs.position, 1.)).xyz;\n inputs.normal = uCameraNormalMatrix * inputs.normal;\n#else\n // Apply both at once\n inputs.position = (uModelViewMatrix * vec4(inputs.position, 1.)).xyz;\n inputs.normal = uNormalMatrix * inputs.normal;\n#endif\n#ifdef AUGMENTED_HOOK_getCameraInputs\n inputs = HOOK_getCameraInputs(inputs);\n#endif\n\n // Pass varyings to fragment shader\n vVertTexCoord = inputs.texCoord;\n vVertexNormal = normalize(inputs.normal);\n vColor = inputs.color;\n\n gl_Position = uProjectionMatrix * vec4(inputs.position, 1.);\n\n HOOK_afterVertex();\n}\n";
var normalFrag = "IN vec3 vVertexNormal;\nIN highp vec2 vVertTexCoord;\nvoid main(void) {\n HOOK_beforeFragment();\n OUT_COLOR = HOOK_getFinalColor(vec4(vVertexNormal, 1.0), vVertTexCoord);\n HOOK_afterFragment();\n}";
var basicFrag = "IN vec4 vColor;\nIN highp vec2 vVertTexCoord;\nvoid main(void) {\n HOOK_beforeFragment();\n OUT_COLOR = HOOK_getFinalColor(vColor, vVertTexCoord);\n OUT_COLOR.rgb *= OUT_COLOR.a; // Premultiply alpha before rendering\n HOOK_afterFragment();\n}";
var lightVert = "// include lighting.glgl\n\nIN vec3 aPosition;\nIN vec3 aNormal;\nIN vec2 aTexCoord;\nIN vec4 aVertexColor;\n\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\nuniform mat3 uNormalMatrix;\n\nuniform bool uUseVertexColor;\nuniform vec4 uMaterialColor;\n\nOUT highp vec2 vVertTexCoord;\nOUT vec3 vDiffuseColor;\nOUT vec3 vSpecularColor;\nOUT vec4 vColor;\n\nvoid main(void) {\n\n vec4 viewModelPosition = uModelViewMatrix * vec4(aPosition, 1.0);\n gl_Position = uProjectionMatrix * viewModelPosition;\n\n vec3 vertexNormal = normalize(uNormalMatrix * aNormal);\n vVertTexCoord = aTexCoord;\n\n totalLight(viewModelPosition.xyz, vertexNormal, vDiffuseColor, vSpecularColor);\n\n for (int i = 0; i < 8; i++) {\n if (i < uAmbientLightCount) {\n vDiffuseColor += uAmbientColor[i];\n }\n }\n \n vColor = ((uUseVertexColor && aVertexColor.x >= 0.0) ? aVertexColor : uMaterialColor);\n}\n";
var lightTextureFrag = "uniform vec4 uTint;\nuniform sampler2D uSampler;\nuniform bool isTexture;\nuniform bool uEmissive;\n\nIN highp vec2 vVertTexCoord;\nIN vec3 vDiffuseColor;\nIN vec3 vSpecularColor;\nIN vec4 vColor;\n\nvoid main(void) {\n if(uEmissive && !isTexture) {\n OUT_COLOR = vColor;\n }\n else {\n vec4 baseColor = isTexture\n // Textures come in with premultiplied alpha. To apply tint and still have\n // premultiplied alpha output, we need to multiply the RGB channels by the\n // tint RGB, and all channels by the tint alpha.\n ? TEXTURE(uSampler, vVertTexCoord) * vec4(uTint.rgb/255., 1.) * (uTint.a/255.)\n // Colors come in with unmultiplied alpha, so we need to multiply the RGB\n // channels by alpha to convert it to premultiplied alpha.\n : vec4(vColor.rgb * vColor.a, vColor.a);\n OUT_COLOR = vec4(baseColor.rgb * vDiffuseColor + vSpecularColor, baseColor.a);\n }\n}\n";
var phongVert = "precision highp int;\n\n#define HOOK_DEFINES\n\nIN vec3 aPosition;\nIN vec3 aNormal;\nIN vec2 aTexCoord;\nIN vec4 aVertexColor;\n\n#ifdef AUGMENTED_HOOK_getWorldInputs\nuniform mat4 uModelMatrix;\nuniform mat4 uViewMatrix;\nuniform mat3 uModelNormalMatrix;\nuniform mat3 uCameraNormalMatrix;\n#else\nuniform mat4 uModelViewMatrix;\nuniform mat3 uNormalMatrix;\n#endif\nuniform mat4 uProjectionMatrix;\n\nuniform bool uUseVertexColor;\nuniform vec4 uMaterialColor;\n\nOUT vec3 vNormal;\nOUT vec2 vTexCoord;\nOUT vec3 vViewPosition;\nOUT vec3 vAmbientColor;\nOUT vec4 vColor;\n\nstruct Vertex {\n vec3 position;\n vec3 normal;\n vec2 texCoord;\n vec4 color;\n};\n\nvoid main(void) {\n HOOK_beforeVertex();\n\n Vertex inputs;\n inputs.position = aPosition;\n inputs.normal = aNormal;\n inputs.texCoord = aTexCoord;\n inputs.color = (uUseVertexColor && aVertexColor.x >= 0.0) ? aVertexColor : uMaterialColor;\n#ifdef AUGMENTED_HOOK_getObjectInputs\n inputs = HOOK_getObjectInputs(inputs);\n#endif\n\n#ifdef AUGMENTED_HOOK_getWorldInputs\n inputs.position = (uModelMatrix * vec4(inputs.position, 1.)).xyz;\n inputs.normal = uModelNormalMatrix * inputs.normal;\n inputs = HOOK_getWorldInputs(inputs);\n#endif\n\n#ifdef AUGMENTED_HOOK_getWorldInputs\n // Already multiplied by the model matrix, just apply view\n inputs.position = (uViewMatrix * vec4(inputs.position, 1.)).xyz;\n inputs.normal = uCameraNormalMatrix * inputs.normal;\n#else\n // Apply both at once\n inputs.position = (uModelViewMatrix * vec4(inputs.position, 1.)).xyz;\n inputs.normal = uNormalMatrix * inputs.normal;\n#endif\n#ifdef AUGMENTED_HOOK_getCameraInputs\n inputs = HOOK_getCameraInputs(inputs);\n#endif\n\n // Pass varyings to fragment shader\n vViewPosition = inputs.position;\n vTexCoord = inputs.texCoord;\n vNormal = inputs.normal;\n vColor = inputs.color;\n\n gl_Position = uProjectionMatrix * vec4(inputs.position, 1.);\n HOOK_afterVertex();\n}\n";
var phongFrag = "// include lighting.glsl\nprecision highp int;\n\nuniform bool uHasSetAmbient;\nuniform vec3 uAmbientColor;\nuniform vec4 uSpecularMatColor;\nuniform vec4 uAmbientMatColor;\nuniform vec4 uEmissiveMatColor;\n\nuniform vec4 uTint;\nuniform sampler2D uSampler;\nuniform bool isTexture;\n\nIN vec3 vNormal;\nIN vec2 vTexCoord;\nIN vec3 vViewPosition;\nIN vec4 vColor;\n\nstruct ColorComponents {\n vec3 baseColor;\n float opacity;\n vec3 ambientColor;\n vec3 specularColor;\n vec3 diffuse;\n vec3 ambient;\n vec3 specular;\n vec3 emissive;\n};\n\nstruct Inputs {\n vec3 normal;\n vec2 texCoord;\n vec3 ambientLight;\n vec3 ambientMaterial;\n vec3 specularMaterial;\n vec3 emissiveMaterial;\n vec4 color;\n float shininess;\n float metalness;\n};\n\nvoid main(void) {\n HOOK_beforeFragment();\n\n Inputs inputs;\n inputs.normal = normalize(vNormal);\n inputs.texCoord = vTexCoord;\n inputs.ambientLight = uAmbientColor;\n inputs.color = isTexture\n ? TEXTURE(uSampler, vTexCoord) * (vec4(uTint.rgb/255., 1.) * uTint.a/255.)\n : vColor;\n if (isTexture && inputs.color.a > 0.0) {\n // Textures come in with premultiplied alpha. Temporarily unpremultiply it\n // so hooks users don't have to think about premultiplied alpha.\n inputs.color.rgb /= inputs.color.a;\n }\n inputs.shininess = uShininess;\n inputs.metalness = uMetallic;\n inputs.ambientMaterial = uHasSetAmbient ? uAmbientMatColor.rgb : inputs.color.rgb;\n inputs.specularMaterial = uSpecularMatColor.rgb;\n inputs.emissiveMaterial = uEmissiveMatColor.rgb;\n inputs = HOOK_getPixelInputs(inputs);\n\n vec3 diffuse;\n vec3 specular;\n totalLight(vViewPosition, inputs.normal, inputs.shininess, inputs.metalness, diffuse, specular);\n\n // Calculating final color as result of all lights (plus emissive term).\n\n vec4 baseColor = inputs.color;\n ColorComponents c;\n c.opacity = baseColor.a;\n c.baseColor = baseColor.rgb;\n c.ambientColor = inputs.ambientMaterial;\n c.specularColor = inputs.specularMaterial;\n c.diffuse = diffuse;\n c.ambient = inputs.ambientLight;\n c.specular = specular;\n c.emissive = inputs.emissiveMaterial;\n OUT_COLOR = HOOK_getFinalColor(HOOK_combineColors(c), vTexCoord);\n OUT_COLOR.rgb *= OUT_COLOR.a; // Premultiply alpha before rendering\n HOOK_afterFragment();\n}\n";
var fontVert = "IN vec3 aPosition;\nIN vec2 aTexCoord;\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\n\nuniform vec4 uGlyphRect;\nuniform float uGlyphOffset;\n\nOUT vec2 vTexCoord;\n\nvoid main() {\n vec4 positionVec4 = vec4(aPosition, 1.0);\n\n // scale by the size of the glyph's rectangle\n positionVec4.xy *= uGlyphRect.zw - uGlyphRect.xy;\n\n // Expand glyph bounding boxes by 1px on each side to give a bit of room\n // for antialiasing\n vec3 newOrigin = (uModelViewMatrix * vec4(0., 0., 0., 1.)).xyz;\n vec3 newDX = (uModelViewMatrix * vec4(1., 0., 0., 1.)).xyz;\n vec3 newDY = (uModelViewMatrix * vec4(0., 1., 0., 1.)).xyz;\n vec2 pixelScale = vec2(\n 1. / length(newOrigin - newDX),\n 1. / length(newOrigin - newDY)\n );\n vec2 offset = pixelScale * normalize(aTexCoord - vec2(0.5, 0.5));\n vec2 textureOffset = offset * (1. / vec2(\n uGlyphRect.z - uGlyphRect.x,\n uGlyphRect.w - uGlyphRect.y\n ));\n\n // move to the corner of the glyph\n positionVec4.xy += uGlyphRect.xy;\n\n // move to the letter's line offset\n positionVec4.x += uGlyphOffset;\n\n positionVec4.xy += offset;\n \n gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;\n vTexCoord = aTexCoord + textureOffset;\n}\n";
var fontFrag = "#ifndef WEBGL2\n#extension GL_OES_standard_derivatives : enable\n#endif\n\n#if 0\n // simulate integer math using floats\n\t#define int float\n\t#define ivec2 vec2\n\t#define INT(x) float(x)\n\n\tint ifloor(float v) { return floor(v); }\n\tivec2 ifloor(vec2 v) { return floor(v); }\n\n#else\n // use native integer math\n\tprecision highp int;\n\t#define INT(x) x\n\n\tint ifloor(float v) { return int(v); }\n\tint ifloor(int v) { return v; }\n\tivec2 ifloor(vec2 v) { return ivec2(v); }\n\n#endif\n\nuniform sampler2D uSamplerStrokes;\nuniform sampler2D uSamplerRowStrokes;\nuniform sampler2D uSamplerRows;\nuniform sampler2D uSamplerColStrokes;\nuniform sampler2D uSamplerCols;\n\nuniform ivec2 uStrokeImageSize;\nuniform ivec2 uCellsImageSize;\nuniform ivec2 uGridImageSize;\n\nuniform ivec2 uGridOffset;\nuniform ivec2 uGridSize;\nuniform vec4 uMaterialColor;\n\nIN vec2 vTexCoord;\n\n// some helper functions\nint ROUND(float v) { return ifloor(v + 0.5); }\nivec2 ROUND(vec2 v) { return ifloor(v + 0.5); }\nfloat saturate(float v) { return clamp(v, 0.0, 1.0); }\nvec2 saturate(vec2 v) { return clamp(v, 0.0, 1.0); }\n\nint mul(float v1, int v2) {\n return ifloor(v1 * float(v2));\n}\n\nivec2 mul(vec2 v1, ivec2 v2) {\n return ifloor(v1 * vec2(v2) + 0.5);\n}\n\n// unpack a 16-bit integer from a float vec2\nint getInt16(vec2 v) {\n ivec2 iv = ROUND(v * 255.0);\n return iv.x * INT(128) + iv.y;\n}\n\nvec2 pixelScale;\nvec2 coverage = vec2(0.0);\nvec2 weight = vec2(0.5);\nconst float minDistance = 1.0/8192.0;\nconst float hardness = 1.05; // amount of antialias\n\n// the maximum number of curves in a glyph\nconst int N = INT(250);\n\n// retrieves an indexed pixel from a sampler\nvec4 getTexel(sampler2D sampler, int pos, ivec2 size) {\n int width = size.x;\n int y = ifloor(pos / width);\n int x = pos - y * width; // pos % width\n\n return TEXTURE(sampler, (vec2(x, y) + 0.5) / vec2(size));\n}\n\nvoid calulateCrossings(vec2 p0, vec2 p1, vec2 p2, out vec2 C1, out vec2 C2) {\n\n // get the coefficients of the quadratic in t\n vec2 a = p0 - p1 * 2.0 + p2;\n vec2 b = p0 - p1;\n vec2 c = p0 - vTexCoord;\n\n // found out which values of 't' it crosses the axes\n vec2 surd = sqrt(max(vec2(0.0), b * b - a * c));\n vec2 t1 = ((b - surd) / a).yx;\n vec2 t2 = ((b + surd) / a).yx;\n\n // approximate straight lines to avoid rounding errors\n if (abs(a.y) < 0.001)\n t1.x = t2.x = c.y / (2.0 * b.y);\n\n if (abs(a.x) < 0.001)\n t1.y = t2.y = c.x / (2.0 * b.x);\n\n // plug into quadratic formula to find the corrdinates of the crossings\n C1 = ((a * t1 - b * 2.0) * t1 + c) * pixelScale;\n C2 = ((a * t2 - b * 2.0) * t2 + c) * pixelScale;\n}\n\nvoid coverageX(vec2 p0, vec2 p1, vec2 p2) {\n\n vec2 C1, C2;\n calulateCrossings(p0, p1, p2, C1, C2);\n\n // determine on which side of the x-axis the points lie\n bool y0 = p0.y > vTexCoord.y;\n bool y1 = p1.y > vTexCoord.y;\n bool y2 = p2.y > vTexCoord.y;\n\n // could web be under the curve (after t1)?\n if (y1 ? !y2 : y0) {\n // add the coverage for t1\n coverage.x += saturate(C1.x + 0.5);\n // calculate the anti-aliasing for t1\n weight.x = min(weight.x, abs(C1.x));\n }\n\n // are we outside the curve (after t2)?\n if (y1 ? !y0 : y2) {\n // subtract the coverage for t2\n coverage.x -= saturate(C2.x + 0.5);\n // calculate the anti-aliasing for t2\n weight.x = min(weight.x, abs(C2.x));\n }\n}\n\n// this is essentially the same as coverageX, but with the axes swapped\nvoid coverageY(vec2 p0, vec2 p1, vec2 p2) {\n\n vec2 C1, C2;\n calulateCrossings(p0, p1, p2, C1, C2);\n\n bool x0 = p0.x > vTexCoord.x;\n bool x1 = p1.x > vTexCoord.x;\n bool x2 = p2.x > vTexCoord.x;\n\n if (x1 ? !x2 : x0) {\n coverage.y -= saturate(C1.y + 0.5);\n weight.y = min(weight.y, abs(C1.y));\n }\n\n if (x1 ? !x0 : x2) {\n coverage.y += saturate(C2.y + 0.5);\n weight.y = min(weight.y, abs(C2.y));\n }\n}\n\nvoid main() {\n\n // calculate the pixel scale based on screen-coordinates\n pixelScale = hardness / fwidth(vTexCoord);\n\n // which grid cell is this pixel in?\n ivec2 gridCoord = ifloor(vTexCoord * vec2(uGridSize));\n\n // intersect curves in this row\n {\n // the index into the row info bitmap\n int rowIndex = gridCoord.y + uGridOffset.y;\n // fetch the info texel\n vec4 rowInfo = getTexel(uSamplerRows, rowIndex, uGridImageSize);\n // unpack the rowInfo\n int rowStrokeIndex = getInt16(rowInfo.xy);\n int rowStrokeCount = getInt16(rowInfo.zw);\n\n for (int iRowStroke = INT(0); iRowStroke < N; iRowStroke++) {\n if (iRowStroke >= rowStrokeCount)\n break;\n\n // each stroke is made up of 3 points: the start and control point\n // and the start of the next curve.\n // fetch the indices of this pair of strokes:\n vec4 strokeIndices = getTexel(uSamplerRowStrokes, rowStrokeIndex++, uCellsImageSize);\n\n // unpack the stroke index\n int strokePos = getInt16(strokeIndices.xy);\n\n // fetch the two strokes\n vec4 stroke0 = getTexel(uSamplerStrokes, strokePos + INT(0), uStrokeImageSize);\n vec4 stroke1 = getTexel(uSamplerStrokes, strokePos + INT(1), uStrokeImageSize);\n\n // calculate the coverage\n coverageX(stroke0.xy, stroke0.zw, stroke1.xy);\n }\n }\n\n // intersect curves in this column\n {\n int colIndex = gridCoord.x + uGridOffset.x;\n vec4 colInfo = getTexel(uSamplerCols, colIndex, uGridImageSize);\n int colStrokeIndex = getInt16(colInfo.xy);\n int colStrokeCount = getInt16(colInfo.zw);\n \n for (int iColStroke = INT(0); iColStroke < N; iColStroke++) {\n if (iColStroke >= colStrokeCount)\n break;\n\n vec4 strokeIndices = getTexel(uSamplerColStrokes, colStrokeIndex++, uCellsImageSize);\n\n int strokePos = getInt16(strokeIndices.xy);\n vec4 stroke0 = getTexel(uSamplerStrokes, strokePos + INT(0), uStrokeImageSize);\n vec4 stroke1 = getTexel(uSamplerStrokes, strokePos + INT(1), uStrokeImageSize);\n coverageY(stroke0.xy, stroke0.zw, stroke1.xy);\n }\n }\n\n weight = saturate(1.0 - weight * 2.0);\n float distance = max(weight.x + weight.y, minDistance); // manhattan approx.\n float antialias = abs(dot(coverage, weight) / distance);\n float cover = min(abs(coverage.x), abs(coverage.y));\n OUT_COLOR = vec4(uMaterialColor.rgb, 1.) * uMaterialColor.a;\n OUT_COLOR *= saturate(max(antialias, cover));\n}\n";
var lineVert = "/*\n Part of the Processing project - http://processing.org\n Copyright (c) 2012-15 The Processing Foundation\n Copyright (c) 2004-12 Ben Fry and Casey Reas\n Copyright (c) 2001-04 Massachusetts Institute of Technology\n This library is free software; you can redistribute it and/or\n modify it under the terms of the GNU Lesser General Public\n License as published by the Free Software Foundation, version 2.1.\n This library is distributed in the hope that it will be useful,\n but WITHOUT ANY WARRANTY; without even the implied warranty of\n MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU\n Lesser General Public License for more details.\n You should have received a copy of the GNU Lesser General\n Public License along with this library; if not, write to the\n Free Software Foundation, Inc., 59 Temple Place, Suite 330,\n Boston, MA 02111-1307 USA\n*/\n\n#define PROCESSING_LINE_SHADER\n\n#define HOOK_DEFINES\n\nprecision highp int;\nprecision highp float;\n\n#ifdef AUGMENTED_HOOK_getWorldInputs\nuniform mat4 uModelMatrix;\nuniform mat4 uViewMatrix;\n#else\nuniform mat4 uModelViewMatrix;\n#endif\n\nuniform mat4 uProjectionMatrix;\nuniform float uStrokeWeight;\n\nuniform bool uUseLineColor;\nuniform bool uSimpleLines;\nuniform vec4 uMaterialColor;\n\nuniform vec4 uViewport;\nuniform int uPerspective;\nuniform int uStrokeJoin;\n\nIN vec3 aPosition;\nIN vec3 aTangentIn;\nIN vec3 aTangentOut;\nIN float aSide;\nIN vec4 aVertexColor;\n\nOUT vec4 vColor;\nOUT vec2 vTangent;\nOUT vec2 vCenter;\nOUT vec2 vPosition;\nOUT float vMaxDist;\nOUT float vCap;\nOUT float vJoin;\nOUT float vStrokeWeight;\n\nvec2 lineIntersection(vec2 aPoint, vec2 aDir, vec2 bPoint, vec2 bDir) {\n // Rotate and translate so a starts at the origin and goes out to the right\n bPoint -= aPoint;\n vec2 rotatedBFrom = vec2(\n bPoint.x*aDir.x + bPoint.y*aDir.y,\n bPoint.y*aDir.x - bPoint.x*aDir.y\n );\n vec2 bTo = bPoint + bDir;\n vec2 rotatedBTo = vec2(\n bTo.x*aDir.x + bTo.y*aDir.y,\n bTo.y*aDir.x - bTo.x*aDir.y\n );\n float intersectionDistance =\n rotatedBTo.x + (rotatedBFrom.x - rotatedBTo.x) * rotatedBTo.y /\n (rotatedBTo.y - rotatedBFrom.y);\n return aPoint + aDir * intersectionDistance;\n}\n\nstruct StrokeVertex {\n vec3 position;\n vec3 tangentIn;\n vec3 tangentOut;\n vec4 color;\n float weight;\n};\n\nvoid main() {\n HOOK_beforeVertex();\n\n if (!uSimpleLines) {\n // Caps have one of either the in or out tangent set to 0\n vCap = (aTangentIn == vec3(0.)) != (aTangentOut == vec3(0.)) ? 1. : 0.;\n\n // Joins have two unique, defined tangents\n vJoin = (\n aTangentIn != vec3(0.) &&\n aTangentOut != vec3(0.) &&\n aTangentIn != aTangentOut\n ) ? 1. : 0.;\n }\n\n StrokeVertex inputs;\n inputs.position = aPosition.xyz;\n inputs.color = uUseLineColor ? aVertexColor : uMaterialColor;\n inputs.weight = uStrokeWeight;\n inputs.tangentIn = aTangentIn;\n inputs.tangentOut = aTangentOut;\n\n#ifdef AUGMENTED_HOOK_getObjectInputs\n inputs = HOOK_getObjectInputs(inputs);\n#endif\n\n#ifdef AUGMENTED_HOOK_getWorldInputs\n inputs.position = (uModelMatrix * vec4(inputs.position, 1.)).xyz;\n inputs.tangentIn = (uModelMatrix * vec4(aTangentIn, 0.)).xyz;\n inputs.tangentOut = (uModelMatrix * vec4(aTangentOut, 0.)).xyz;\n inputs = HOOK_getWorldInputs(inputs);\n#endif\n\n#ifdef AUGMENTED_HOOK_getWorldInputs\n // Already multiplied by the model matrix, just apply view\n inputs.position = (uViewMatrix * vec4(inputs.position, 1.)).xyz;\n inputs.tangentIn = (uViewMatrix * vec4(aTangentIn, 0.)).xyz;\n inputs.tangentOut = (uViewMatrix * vec4(aTangentOut, 0.)).xyz;\n#else\n // Apply both at once\n inputs.position = (uModelViewMatrix * vec4(inputs.position, 1.)).xyz;\n inputs.tangentIn = (uModelViewMatrix * vec4(aTangentIn, 0.)).xyz;\n inputs.tangentOut = (uModelViewMatrix * vec4(aTangentOut, 0.)).xyz;\n#endif\n#ifdef AUGMENTED_HOOK_getCameraInputs\n inputs = HOOK_getCameraInputs(inputs);\n#endif\n\n vec4 posp = vec4(inputs.position, 1.);\n vec4 posqIn = vec4(inputs.position + inputs.tangentIn, 1.);\n vec4 posqOut = vec4(inputs.position + inputs.tangentOut, 1.);\n vStrokeWeight = inputs.weight;\n\n float facingCamera = pow(\n // The word space tangent's z value is 0 if it's facing the camera\n abs(normalize(posqIn-posp).z),\n\n // Using pow() here to ramp `facingCamera` up from 0 to 1 really quickly\n // so most lines get scaled and don't get clipped\n 0.25\n );\n\n // Moving vertices slightly toward the camera\n // to avoid depth-fighting with the fill triangles.\n // A mix of scaling and offsetting is used based on distance\n // Discussion here:\n // https://github.com/processing/p5.js/issues/7200 \n\n // using a scale <1 moves the lines towards nearby camera\n // in order to prevent popping effects due to half of\n // the line disappearing behind the geometry faces.\n float zDistance = -posp.z; \n float distanceFactor = smoothstep(0.0, 800.0, zDistance); \n \n // Discussed here:\n // http://www.opengl.org/discussion_boards/ubbthreads.php?ubb=showflat&Number=252848 \n float scale = mix(1., 0.995, facingCamera);\n float dynamicScale = mix(scale, 1.0, distanceFactor); // Closer = more scale, farther = less\n\n posp.xyz = posp.xyz * dynamicScale;\n posqIn.xyz = posqIn.xyz * dynamicScale;\n posqOut.xyz = posqOut.xyz * dynamicScale;\n\n // Moving vertices slightly toward camera when far away \n // https://github.com/processing/p5.js/issues/6956 \n float zOffset = mix(0., -1., facingCamera);\n float dynamicZAdjustment = mix(0.0, zOffset, distanceFactor); // Closer = less zAdjustment, farther = more\n\n posp.z -= dynamicZAdjustment;\n posqIn.z -= dynamicZAdjustment;\n posqOut.z -= dynamicZAdjustment;\n \n vec4 p = uProjectionMatrix * posp;\n vec4 qIn = uProjectionMatrix * posqIn;\n vec4 qOut = uProjectionMatrix * posqOut;\n\n // formula to convert from clip space (range -1..1) to screen space (range 0..[width or height])\n // screen_p = (p.xy/p.w + <1,1>) * 0.5 * uViewport.zw\n\n // prevent division by W by transforming the tangent formula (div by 0 causes\n // the line to disappear, see https://github.com/processing/processing/issues/5183)\n // t = screen_q - screen_p\n //\n // tangent is normalized and we don't care which aDirection it points to (+-)\n // t = +- normalize( screen_q - screen_p )\n // t = +- normalize( (q.xy/q.w+<1,1>)*0.5*uViewport.zw - (p.xy/p.w+<1,1>)*0.5*uViewport.zw )\n //\n // extract common factor, <1,1> - <1,1> cancels out\n // t = +- normalize( (q.xy/q.w - p.xy/p.w) * 0.5 * uViewport.zw )\n //\n // convert to common divisor\n // t = +- normalize( ((q.xy*p.w - p.xy*q.w) / (p.w*q.w)) * 0.5 * uViewport.zw )\n //\n // remove the common scalar divisor/factor, not needed due to normalize and +-\n // (keep uViewport - can't remove because it has different components for x and y\n // and corrects for aspect ratio, see https://github.com/processing/processing/issues/5181)\n // t = +- normalize( (q.xy*p.w - p.xy*q.w) * uViewport.zw )\n\n vec2 tangentIn = normalize((qIn.xy*p.w - p.xy*qIn.w) * uViewport.zw);\n vec2 tangentOut = normalize((qOut.xy*p.w - p.xy*qOut.w) * uViewport.zw);\n\n vec2 curPerspScale;\n if(uPerspective == 1) {\n // Perspective ---\n // convert from world to clip by multiplying with projection scaling factor\n // to get the right thickness (see https://github.com/processing/processing/issues/5182)\n\n // The y value of the projection matrix may be flipped if rendering to a Framebuffer.\n // Multiplying again by its sign here negates the flip to get just the scale.\n curPerspScale = (uProjectionMatrix * vec4(1, sign(uProjectionMatrix[1][1]), 0, 0)).xy;\n } else {\n // No Perspective ---\n // multiply by W (to cancel out division by W later in the pipeline) and\n // convert from screen to clip (derived from clip to screen above)\n curPerspScale = p.w / (0.5 * uViewport.zw);\n }\n\n vec2 offset;\n if (vJoin == 1. && !uSimpleLines) {\n vTangent = normalize(tangentIn + tangentOut);\n vec2 normalIn = vec2(-tangentIn.y, tangentIn.x);\n vec2 normalOut = vec2(-tangentOut.y, tangentOut.x);\n float side = sign(aSide);\n float sideEnum = abs(aSide);\n\n // We generate vertices for joins on either side of the centerline, but\n // the \"elbow\" side is the only one needing a join. By not setting the\n // offset for the other side, all its vertices will end up in the same\n // spot and not render, effectively discarding it.\n if (sign(dot(tangentOut, vec2(-tangentIn.y, tangentIn.x))) != side) {\n // Side enums:\n // 1: the side going into the join\n // 2: the middle of the join\n // 3: the side going out of the join\n if (sideEnum == 2.) {\n // Calculate the position + tangent on either side of the join, and\n // find where the lines intersect to find the elbow of the join\n vec2 c = (posp.xy/posp.w + vec2(1.,1.)) * 0.5 * uViewport.zw;\n vec2 intersection = lineIntersection(\n c + (side * normalIn * inputs.weight / 2.),\n tangentIn,\n c + (side * normalOut * inputs.weight / 2.),\n tangentOut\n );\n offset = (intersection - c);\n\n // When lines are thick and the angle of the join approaches 180, the\n // elbow might be really far from the center. We'll apply a limit to\n // the magnitude to avoid lines going across the whole screen when this\n // happens.\n float mag = length(offset);\n float maxMag = 3. * inputs.weight;\n if (mag > maxMag) {\n offset *= maxMag / mag;\n }\n } else if (sideEnum == 1.) {\n offset = side * normalIn * inputs.weight / 2.;\n } else if (sideEnum == 3.) {\n offset = side * normalOut * inputs.weight / 2.;\n }\n }\n if (uStrokeJoin == STROKE_JOIN_BEVEL) {\n vec2 avgNormal = vec2(-vTangent.y, vTangent.x);\n vMaxDist = abs(dot(avgNormal, normalIn * inputs.weight / 2.));\n } else {\n vMaxDist = inputs.weight / 2.;\n }\n } else {\n vec2 tangent = aTangentIn == vec3(0.) ? tangentOut : tangentIn;\n\n vTangent = tangent;\n vec2 normal = vec2(-tangent.y, tangent.x);\n\n float normalOffset = sign(aSide);\n // Caps will have side values of -2 or 2 on the edge of the cap that\n // extends out from the line\n float tangentOffset = abs(aSide) - 1.;\n offset = (normal * normalOffset + tangent * tangentOffset) *\n inputs.weight * 0.5;\n vMaxDist = inputs.weight / 2.;\n }\n\n vCenter = p.xy;\n vPosition = vCenter + offset;\n vColor = inputs.color;\n\n gl_Position.xy = p.xy + offset.xy * curPerspScale;\n gl_Position.zw = p.zw;\n \n HOOK_afterVertex();\n}\n";
var lineFrag = "precision highp int;\nprecision highp float;\n\nuniform vec4 uMaterialColor;\nuniform int uStrokeCap;\nuniform int uStrokeJoin;\n\nIN vec4 vColor;\nIN vec2 vTangent;\nIN vec2 vCenter;\nIN vec2 vPosition;\nIN float vStrokeWeight;\nIN float vMaxDist;\nIN float vCap;\nIN float vJoin;\n\nfloat distSquared(vec2 a, vec2 b) {\n vec2 aToB = b - a;\n return dot(aToB, aToB);\n}\n\nstruct Inputs {\n vec4 color;\n vec2 tangent;\n vec2 center;\n vec2 position;\n float strokeWeight;\n};\n\nvoid main() {\n HOOK_beforeFragment();\n\n Inputs inputs;\n inputs.color = vColor;\n inputs.tangent = vTangent;\n inputs.center = vCenter;\n inputs.position = vPosition;\n inputs.strokeWeight = vStrokeWeight;\n inputs = HOOK_getPixelInputs(inputs);\n\n if (vCap > 0.) {\n if (\n uStrokeCap == STROKE_CAP_ROUND &&\n HOOK_shouldDiscard(distSquared(inputs.position, inputs.center) > inputs.strokeWeight * inputs.strokeWeight * 0.25)\n ) {\n discard;\n } else if (\n uStrokeCap == STROKE_CAP_SQUARE &&\n HOOK_shouldDiscard(dot(inputs.position - inputs.center, inputs.tangent) > 0.)\n ) {\n discard;\n // Use full area for PROJECT\n } else if (HOOK_shouldDiscard(false)) {\n discard;\n }\n } else if (vJoin > 0.) {\n if (\n uStrokeJoin == STROKE_JOIN_ROUND &&\n HOOK_shouldDiscard(distSquared(inputs.position, inputs.center) > inputs.strokeWeight * inputs.strokeWeight * 0.25)\n ) {\n discard;\n } else if (uStrokeJoin == STROKE_JOIN_BEVEL) {\n vec2 normal = vec2(-inputs.tangent.y, inputs.tangent.x);\n if (HOOK_shouldDiscard(abs(dot(inputs.position - inputs.center, normal)) > vMaxDist)) {\n discard;\n }\n // Use full area for MITER\n } else if (HOOK_shouldDiscard(false)) {\n discard;\n }\n }\n OUT_COLOR = HOOK_getFinalColor(inputs.color, vec2(0.0, 0.0));\n OUT_COLOR.rgb *= OUT_COLOR.a;\n HOOK_afterFragment();\n}\n";
var imageLightVert = "precision highp float;\nIN vec3 aPosition;\nIN vec3 aNormal;\nIN vec2 aTexCoord;\n\nOUT vec3 localPos;\nOUT vec3 vWorldNormal;\nOUT vec3 vWorldPosition;\nOUT vec2 vTexCoord;\n\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\nuniform mat3 uNormalMatrix;\n\nvoid main() {\n // Multiply the position by the matrix.\n vec4 viewModelPosition = uModelViewMatrix * vec4(aPosition, 1.0);\n gl_Position = uProjectionMatrix * viewModelPosition; \n \n // orient the normals and pass to the fragment shader\n vWorldNormal = uNormalMatrix * aNormal;\n \n // send the view position to the fragment shader\n vWorldPosition = (uModelViewMatrix * vec4(aPosition, 1.0)).xyz;\n \n localPos = vWorldPosition;\n vTexCoord = aTexCoord;\n}\n\n\n/*\nin the vertex shader we'll compute the world position and world oriented normal of the vertices and pass those to the fragment shader as varyings.\n*/\n";
var imageLightDiffusedFrag = "precision highp float;\nIN vec3 localPos;\n\n// the HDR cubemap converted (can be from an equirectangular environment map.)\nuniform sampler2D environmentMap;\nIN vec2 vTexCoord;\n\nconst float PI = 3.14159265359;\n\nvec2 nTOE( vec3 v ){\n // x = r sin(phi) cos(theta) \n // y = r cos(phi) \n // z = r sin(phi) sin(theta)\n float phi = acos( v.y );\n // if phi is 0, then there are no x, z components\n float theta = 0.0;\n // else \n theta = acos(v.x / sin(phi));\n float sinTheta = v.z / sin(phi);\n if (sinTheta < 0.0) {\n // Turn it into -theta, but in the 0-2PI range\n theta = 2.0 * PI - theta;\n }\n theta = theta / (2.0 * 3.14159);\n phi = phi / 3.14159 ;\n \n vec2 angles = vec2( phi, theta );\n return angles;\n}\n\nfloat random(vec2 p) {\n vec3 p3 = fract(vec3(p.xyx) * .1031);\n p3 += dot(p3, p3.yzx + 33.33);\n return fract((p3.x + p3.y) * p3.z);\n}\n\nvoid main()\n{ \t \n\t// the sample direction equals the hemisphere's orientation\n float phi = vTexCoord.x * 2.0 * PI;\n float theta = vTexCoord.y * PI;\n float x = sin(theta) * cos(phi);\n float y = sin(theta) * sin(phi);\n float z = cos(theta);\n vec3 normal = vec3( x, y, z);\n\n\t// Discretely sampling the hemisphere given the integral's\n // spherical coordinates translates to the following fragment code:\n\tvec3 irradiance = vec3(0.0); \n\tvec3 up\t= vec3(0.0, 1.0, 0.0);\n\tvec3 right = normalize(cross(up, normal));\n\tup = normalize(cross(normal, right));\n\n\t// We specify a fixed sampleDelta delta value to traverse\n // the hemisphere; decreasing or increasing the sample delta\n // will increase or decrease the accuracy respectively.\n\tconst float sampleDelta = 0.100;\n\tfloat nrSamples = 0.0;\n float randomOffset = random(gl_FragCoord.xy) * sampleDelta;\n\tfor(float rawPhi = 0.0; rawPhi < 2.0 * PI; rawPhi += sampleDelta)\n\t{\n float phi = rawPhi + randomOffset;\n for(float rawTheta = 0.0; rawTheta < ( 0.5 ) * PI; rawTheta += sampleDelta)\n {\n float theta = rawTheta + randomOffset;\n // spherical to cartesian (in tangent space) // tangent space to world // add each sample result to irradiance\n float x = sin(theta) * cos(phi);\n float y = sin(theta) * sin(phi);\n float z = cos(theta);\n vec3 tangentSample = vec3( x, y, z);\n \n vec3 sampleVec = tangentSample.x * right + tangentSample.y * up + tangentSample.z * normal;\n irradiance += (TEXTURE(environmentMap, nTOE(sampleVec)).xyz) * cos(theta) * sin(theta);\n nrSamples++;\n }\n\t}\n\t// divide by the total number of samples taken, giving us the average sampled irradiance.\n\tirradiance = PI * irradiance * (1.0 / float(nrSamples )) ;\n \n \n\tOUT_COLOR = vec4(irradiance, 1.0);\n}";
var imageLightSpecularFrag = "precision highp float;\r\nIN vec3 localPos;\r\nIN vec2 vTexCoord;\r\n\r\n// our texture\r\nuniform sampler2D environmentMap;\r\nuniform float roughness;\r\n\r\nconst float PI = 3.14159265359;\r\n\r\nfloat VanDerCorput(int bits);\r\nvec2 HammersleyNoBitOps(int i, int N);\r\nvec3 ImportanceSampleGGX(vec2 Xi, vec3 N, float roughness);\r\n\r\n\r\nvec2 nTOE( vec3 v ){\r\n // x = r sin(phi) cos(theta) \r\n // y = r cos(phi) \r\n // z = r sin(phi) sin(theta)\r\n float phi = acos( v.y );\r\n // if phi is 0, then there are no x, z components\r\n float theta = 0.0;\r\n // else \r\n theta = acos(v.x / sin(phi));\r\n float sinTheta = v.z / sin(phi);\r\n if (sinTheta < 0.0) {\r\n // Turn it into -theta, but in the 0-2PI range\r\n theta = 2.0 * PI - theta;\r\n }\r\n theta = theta / (2.0 * 3.14159);\r\n phi = phi / 3.14159 ;\r\n \r\n vec2 angles = vec2( phi, theta );\r\n return angles;\r\n}\r\n\r\n\r\nvoid main(){\r\n const int SAMPLE_COUNT = 400; // 4096\r\n int lowRoughnessLimit = int(pow(2.0,(roughness+0.1)*20.0));\r\n float totalWeight = 0.0;\r\n vec3 prefilteredColor = vec3(0.0);\r\n float phi = vTexCoord.x * 2.0 * PI;\r\n float theta = vTexCoord.y * PI;\r\n float x = sin(theta) * cos(phi);\r\n float y = sin(theta) * sin(phi);\r\n float z = cos(theta);\r\n vec3 N = vec3(x,y,z);\r\n vec3 V = N;\r\n for (int i = 0; i < SAMPLE_COUNT; ++i)\r\n {\r\n // break at smaller sample numbers for low roughness levels\r\n if(i == lowRoughnessLimit)\r\n {\r\n break;\r\n }\r\n vec2 Xi = HammersleyNoBitOps(i, SAMPLE_COUNT);\r\n vec3 H = ImportanceSampleGGX(Xi, N, roughness);\r\n vec3 L = normalize(2.0 * dot(V, H) * H - V);\r\n\r\n float NdotL = max(dot(N, L), 0.0);\r\n if (NdotL > 0.0)\r\n {\r\n prefilteredColor += TEXTURE(environmentMap, nTOE(L)).xyz * NdotL;\r\n totalWeight += NdotL;\r\n }\r\n }\r\n prefilteredColor = prefilteredColor / totalWeight;\r\n\r\n OUT_COLOR = vec4(prefilteredColor, 1.0);\r\n}\r\n\r\nvec3 ImportanceSampleGGX(vec2 Xi, vec3 N, float roughness){\r\n float a = roughness * roughness;\r\n\r\n float phi = 2.0 * PI * Xi.x;\r\n float cosTheta = sqrt((1.0 - Xi.y) / (1.0 + (a * a - 1.0) * Xi.y));\r\n float sinTheta = sqrt(1.0 - cosTheta * cosTheta);\r\n // from spherical coordinates to cartesian coordinates\r\n vec3 H;\r\n H.x = cos(phi) * sinTheta;\r\n H.y = sin(phi) * sinTheta;\r\n H.z = cosTheta;\r\n\r\n // from tangent-space vector to world-space sample vector\r\n vec3 up = abs(N.z) < 0.999 ? vec3(0.0, 0.0, 1.0) : vec3(1.0, 0.0, 0.0);\r\n vec3 tangent = normalize(cross(up, N));\r\n vec3 bitangent = cross(N, tangent);\r\n\r\n vec3 sampleVec = tangent * H.x + bitangent * H.y + N * H.z;\r\n return normalize(sampleVec);\r\n}\r\n\r\n\r\nfloat VanDerCorput(int n, int base)\r\n{\r\n#ifdef WEBGL2\r\n\r\n uint bits = uint(n);\r\n bits = (bits << 16u) | (bits >> 16u);\r\n bits = ((bits & 0x55555555u) << 1u) | ((bits & 0xAAAAAAAAu) >> 1u);\r\n bits = ((bits & 0x33333333u) << 2u) | ((bits & 0xCCCCCCCCu) >> 2u);\r\n bits = ((bits & 0x0F0F0F0Fu) << 4u) | ((bits & 0xF0F0F0F0u) >> 4u);\r\n bits = ((bits & 0x00FF00FFu) << 8u) | ((bits & 0xFF00FF00u) >> 8u);\r\n return float(bits) * 2.3283064365386963e-10; // / 0x100000000\r\n\r\n#else\r\n\r\n float invBase = 1.0 / float(base);\r\n float denom = 1.0;\r\n float result = 0.0;\r\n\r\n\r\n for (int i = 0; i < 32; ++i)\r\n {\r\n if (n > 0)\r\n {\r\n denom = mod(float(n), 2.0);\r\n result += denom * invBase;\r\n invBase = invBase / 2.0;\r\n n = int(float(n) / 2.0);\r\n }\r\n }\r\n\r\n\r\n return result;\r\n\r\n#endif\r\n}\r\n\r\nvec2 HammersleyNoBitOps(int i, int N)\r\n{\r\n return vec2(float(i) / float(N), VanDerCorput(i, 2));\r\n}\r\n";
const { lineDefs } = getStrokeDefs((n, v) => `#define ${n} ${v}\n`);
const defaultShaders = {
normalVert,
normalFrag,
basicFrag,
lightVert: lightingShader + lightVert,
lightTextureFrag,
phongVert,
phongFrag: lightingShader + phongFrag,
fontVert,
fontFrag,
lineVert: lineDefs + lineVert,
lineFrag: lineDefs + lineFrag,
imageLightVert,
imageLightDiffusedFrag,
imageLightSpecularFrag,
filterBaseVert,
filterBaseFrag,
};
for (const key in defaultShaders) {
defaultShaders[key] = webgl2CompatibilityShader + defaultShaders[key];
}
/**
* 3D graphics class
* @private
* @class p5.RendererGL
* @extends p5.Renderer
* @todo extend class to include public method for offscreen
* rendering (FBO).
*/
class RendererGL extends Renderer3D {
constructor(pInst, w, h, isMainCanvas, elt) {
super(pInst, w, h, isMainCanvas, elt);
if (this.webglVersion === WEBGL2) {
this.blendExt = this.GL;
} else {
this.blendExt = this.GL.getExtension("EXT_blend_minmax");
}
this._userEnabledStencil = false;
// Store original methods for internal use
this._internalEnable = this.drawingContext.enable;
this._internalDisable = this.drawingContext.disable;
// Override WebGL enable function
this.drawingContext.enable = (key) => {
if (key === this.drawingContext.STENCIL_TEST) {
if (!this._clipping) {
this._userEnabledStencil = true;
}
}
return this._internalEnable.call(this.drawingContext, key);
};
// Override WebGL disable function
this.drawingContext.disable = (key) => {
if (key === this.drawingContext.STENCIL_TEST) {
this._userEnabledStencil = false;
}
return this._internalDisable.call(this.drawingContext, key);
};
this._cachedBlendMode = undefined;
this.strandsBackend = glslBackend;
}
setupContext() {
this._setAttributeDefaults(this._pInst);
this._initContext();
// This redundant property is useful in reminding you that you are
// interacting with WebGLRenderingContext, still worth considering future removal
this.GL = this.drawingContext;
}
//////////////////////////////////////////////
// Rendering
//////////////////////////////////////////////
/**
* @private sets blending in gl context to curBlendMode
* @param {Number[]} color [description]
* @return {Number[]} Normalized numbers array
*/
_applyBlendMode () {
if (this._cachedBlendMode === this.states.curBlendMode) {
return;
}
const gl = this.GL;
switch (this.states.curBlendMode) {
case BLEND:
gl.blendEquation(gl.FUNC_ADD);
gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
break;
case ADD:
gl.blendEquation(gl.FUNC_ADD);
gl.blendFunc(gl.ONE, gl.ONE);
break;
case REMOVE:
gl.blendEquation(gl.FUNC_ADD);
gl.blendFunc(gl.ZERO, gl.ONE_MINUS_SRC_ALPHA);
break;
case MULTIPLY:
gl.blendEquation(gl.FUNC_ADD);
gl.blendFunc(gl.DST_COLOR, gl.ONE_MINUS_SRC_ALPHA);
break;
case SCREEN:
gl.blendEquation(gl.FUNC_ADD);
gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_COLOR);
break;
case EXCLUSION:
gl.blendEquationSeparate(gl.FUNC_ADD, gl.FUNC_ADD);
gl.blendFuncSeparate(
gl.ONE_MINUS_DST_COLOR,
gl.ONE_MINUS_SRC_COLOR,
gl.ONE,
gl.ONE
);
break;
case REPLACE:
gl.blendEquation(gl.FUNC_ADD);
gl.blendFunc(gl.ONE, gl.ZERO);
break;
case SUBTRACT:
gl.blendEquationSeparate(gl.FUNC_REVERSE_SUBTRACT, gl.FUNC_ADD);
gl.blendFuncSeparate(gl.ONE, gl.ONE, gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
break;
case DARKEST:
if (this.blendExt) {
gl.blendEquationSeparate(
this.blendExt.MIN || this.blendExt.MIN_EXT,
gl.FUNC_ADD
);
gl.blendFuncSeparate(gl.ONE, gl.ONE, gl.ONE, gl.ONE);
} else {
console.warn(
'blendMode(DARKEST) does not work in your browser in WEBGL mode.'
);
}
break;
case LIGHTEST:
if (this.blendExt) {
gl.blendEquationSeparate(
this.blendExt.MAX || this.blendExt.MAX_EXT,
gl.FUNC_ADD
);
gl.blendFuncSeparate(gl.ONE, gl.ONE, gl.ONE, gl.ONE);
} else {
console.warn(
'blendMode(LIGHTEST) does not work in your browser in WEBGL mode.'
);
}
break;
default:
console.error(
'Oops! Somehow Renderer3D set curBlendMode to an unsupported mode.'
);
break;
}
this._cachedBlendMode = this.states.curBlendMode;
}
_shaderOptions() {
return undefined;
}
_useShader(shader) {
const gl = this.GL;
gl.useProgram(shader._glProgram);
}
/**
* Once all buffers have been bound, this checks to see if there are any
* remaining active attributes, likely left over from previous renders,
* and disables them so that they don't affect rendering.
* @private
*/
_disableRemainingAttributes(shader) {
for (const location of this.registerEnabled.values()) {
if (
!Object.keys(shader.attributes).some(
key => shader.attributes[key].location === location
)
) {
this.GL.disableVertexAttribArray(location);
this.registerEnabled.delete(location);
}
}
}
_drawBuffers(geometry, { mode = TRIANGLES, count }) {
const gl = this.GL;
const glBuffers = this.geometryBufferCache.getCached(geometry);
if (!glBuffers) return;
if (this._curShader.shaderType === 'stroke'){
if (count === 1) {
gl.drawArrays(gl.TRIANGLES, 0, geometry.lineVertices.length / 3);
} else {
try {
gl.drawArraysInstanced(
gl.TRIANGLES,
0,
geometry.lineVertices.length / 3,
count
);
} catch (e) {
console.log(
"🌸 p5.js says: Instancing is only supported in WebGL2 mode"
);
}
}
} else if (this._curShader.shaderType === 'text') {
// Text rendering uses a fixed quad geometry with 6 indices
this._bindBuffer(glBuffers.indexBuffer, gl.ELEMENT_ARRAY_BUFFER);
gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0);
} else if (glBuffers.indexBuffer) {
this._bindBuffer(glBuffers.indexBuffer, gl.ELEMENT_ARRAY_BUFFER);
// If this model is using a Uint32Array we need to ensure the
// OES_element_index_uint WebGL extension is enabled.
if (
this._pInst.webglVersion !== WEBGL2 &&
glBuffers.indexBufferType === gl.UNSIGNED_INT
) {
if (!gl.getExtension("OES_element_index_uint")) {
throw new Error(
"Unable to render a 3d model with > 65535 triangles. Your web browser does not support the WebGL Extension OES_element_index_uint."
);
}
}
if (count === 1) {
gl.drawElements(
gl.TRIANGLES,
geometry.faces.length * 3,
glBuffers.indexBufferType,
0
);
} else {
try {
gl.drawElementsInstanced(
gl.TRIANGLES,
geometry.faces.length * 3,
glBuffers.indexBufferType,
0,
count
);
} catch (e) {
console.log(
"🌸 p5.js says: Instancing is only supported in WebGL2 mode"
);
}
}
} else {
let glMode;
if (mode === TRIANGLES) {
glMode = gl.TRIANGLES;
} else if (mode === TRIANGLE_FAN) {
glMode = gl.TRIANGLE_FAN;
} else {
glMode = gl.TRIANGLE_STRIP;
}
if (count === 1) {
gl.drawArrays(glMode, 0, geometry.vertices.length);
} else {
try {
gl.drawArraysInstanced(glMode, 0, geometry.vertices.length, count);
} catch (e) {
console.log(
"🌸 p5.js says: Instancing is only supported in WebGL2 mode"
);
}
}
}
}
//////////////////////////////////////////////
// Text
//////////////////////////////////////////////
_beforeDrawText() {
this.GL.pixelStorei(this.GL.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
}
_afterDrawText() {
this.GL.pixelStorei(this.GL.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
}
//////////////////////////////////////////////
// Setting
//////////////////////////////////////////////
_setAttributeDefaults(pInst) {
// See issue #3850, safer to enable AA in Safari
const applyAA = navigator.userAgent.toLowerCase().includes("safari");
const defaults = {
alpha: true,
depth: true,
stencil: true,
antialias: applyAA,
premultipliedAlpha: true,
preserveDrawingBuffer: true,
perPixelLighting: true,
version: 2,
};
if (pInst._glAttributes === null) {
pInst._glAttributes = defaults;
} else {
pInst._glAttributes = Object.assign(defaults, pInst._glAttributes);
}
return;
}
_setAttributes(key, value) {
if (typeof this._pInst._glAttributes === "undefined") {
console.log(
"You are trying to use setAttributes on a p5.Graphics object " +
"that does not use a WEBGL renderer."
);
return;
}
let unchanged = true;
if (typeof value !== "undefined") {
//first time modifying the attributes
if (this._pInst._glAttributes === null) {
this._pInst._glAttributes = {};
}
if (this._pInst._glAttributes[key] !== value) {
//changing value of previously altered attribute
this._pInst._glAttributes[key] = value;
unchanged = false;
}
//setting all attributes with some change
} else if (key instanceof Object) {
if (this._pInst._glAttributes !== key) {
this._pInst._glAttributes = key;
unchanged = false;
}
}
//@todo_FES
if (!this.isP3D || unchanged) {
return;
}
if (!this._pInst._setupDone) {
if (this.geometryBufferCache.numCached() > 0) {
p5._friendlyError(
"Sorry, Could not set the attributes, you need to call setAttributes() " +
"before calling the other drawing methods in setup()"
);
return;
}
}
this._resetContext(null, null, RendererGL);
if (this.states.curCamera) {
this.states.curCamera._renderer = this._renderer;
}
}
_initContext() {
if (this._pInst._glAttributes?.version !== 1) {
// Unless WebGL1 is explicitly asked for, try to create a WebGL2 context
this.drawingContext = this.canvas.getContext(
"webgl2",
this._pInst._glAttributes
);
}
this.webglVersion = this.drawingContext
? WEBGL2
: WEBGL;
// If this is the main canvas, make sure the global `webglVersion` is set
this._pInst.webglVersion = this.webglVersion;
if (!this.drawingContext) {
// If we were unable to create a WebGL2 context (either because it was
// disabled via `setAttributes({ version: 1 })` or because the device
// doesn't support it), fall back to a WebGL1 context
this.drawingContext =
this.canvas.getContext("webgl", this._pInst._glAttributes) ||
this.canvas.getContext("experimental-webgl", this._pInst._glAttributes);
}
if (this.drawingContext === null) {
throw new Error("Error creating webgl context");
} else {
const gl = this.drawingContext;
gl.enable(gl.DEPTH_TEST);
gl.depthFunc(gl.LEQUAL);
gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
// Make sure all images are loaded into the canvas premultiplied so that
// they match the way we render colors. This will make framebuffer textures
// be encoded the same way as textures from everything else.
gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
this._viewport = this.drawingContext.getParameter(
this.drawingContext.VIEWPORT
);
}
}
_updateSize() {}
_getMaxTextureSize() {
const gl = this.drawingContext;
return gl.getParameter(gl.MAX_TEXTURE_SIZE);
}
_adjustDimensions(width, height, density = this._pixelDensity) {
if (!this._maxTextureSize) {
this._maxTextureSize = this._getMaxTextureSize();
}
let maxTextureSize = this._maxTextureSize;
let maxAllowedPixelDimensions = Math.floor(
maxTextureSize / density
);
let adjustedWidth = Math.min(width, maxAllowedPixelDimensions);
let adjustedHeight = Math.min(height, maxAllowedPixelDimensions);
if (adjustedWidth !== width || adjustedHeight !== height) {
console.warn(
"Warning: The requested width/height exceeds hardware limits. " +
`Adjusting dimensions to width: ${adjustedWidth}, height: ${adjustedHeight}.`
);
}
return { adjustedWidth, adjustedHeight };
}
_resetBuffersBeforeDraw() {
this.GL.clearStencil(0);
this.GL.clear(this.GL.DEPTH_BUFFER_BIT | this.GL.STENCIL_BUFFER_BIT);
if (!this._userEnabledStencil) {
this._internalDisable.call(this.GL, this.GL.STENCIL_TEST);
}
}
_applyClip() {
const gl = this.GL;
gl.clearStencil(0);
gl.clear(gl.STENCIL_BUFFER_BIT);
this._internalEnable.call(gl, gl.STENCIL_TEST);
this._stencilTestOn = true;
gl.stencilFunc(
gl.ALWAYS, // the test
1, // reference value
0xff // mask
);
gl.stencilOp(
gl.KEEP, // what to do if the stencil test fails
gl.KEEP, // what to do if the depth test fails
gl.REPLACE // what to do if both tests pass
);
gl.disable(gl.DEPTH_TEST);
}
_unapplyClip() {
const gl = this.GL;
gl.stencilOp(
gl.KEEP, // what to do if the stencil test fails
gl.KEEP, // what to do if the depth test fails
gl.KEEP // what to do if both tests pass
);
gl.stencilFunc(
this._clipInvert ? gl.EQUAL : gl.NOTEQUAL, // the test
0, // reference value
0xff // mask
);
gl.enable(gl.DEPTH_TEST);
}
_clearClipBuffer() {
this.GL.clearStencil(1);
this.GL.clear(this.GL.STENCIL_BUFFER_BIT);
if (!this._userEnabledStencil) {
this._internalDisable.call(this.GL, this.GL.STENCIL_TEST);
}
}
// x,y are canvas-relative (pre-scaled by _pixelDensity)
_getPixel(x, y) {
const gl = this.GL;
return readPixelWebGL(
gl,
null,
x,
y,
gl.RGBA,
gl.UNSIGNED_BYTE,
this._pInst.height * this._pInst.pixelDensity()
);
}
/**
* Loads the pixels data for this canvas into the pixels[] attribute.
* Note that set() does not work.
* Any pixel manipulation must be done directly to the pixels[] array.
*
* @private
*/
loadPixels() {
//@todo_FES
if (this._pInst._glAttributes.preserveDrawingBuffer !== true) {
console.log(
"loadPixels only works in WebGL when preserveDrawingBuffer " +
"is true."
);
return;
}
const pd = this._pixelDensity;
const gl = this.GL;
this.pixels = readPixelsWebGL(
this.pixels,
gl,
null,
0,
0,
this.width * pd,
this.height * pd,
gl.RGBA,
gl.UNSIGNED_BYTE,
this.height * pd
);
}
updatePixels() {
const fbo = this._getTempFramebuffer();
fbo.pixels = this.pixels;
fbo.updatePixels();
this.push();
this.resetMatrix();
this.clear();
this.states.setValue("imageMode", CORNER);
this.image(
fbo,
0,
0,
fbo.width,
fbo.height,
-fbo.width / 2,
-fbo.height / 2,
fbo.width,
fbo.height
);
this.pop();
this.GL.clearDepth(1);
this.GL.clear(this.GL.DEPTH_BUFFER_BIT);
}
zClipRange() {
return [-1, 1];
}
defaultNearScale() {
return 0.1;
}
defaultFarScale() {
return 10;
}
supportsTriangleFan() {
return true;
}
viewport(w, h) {
this._viewport = [0, 0, w, h];
this.GL.viewport(0, 0, w, h);
}
_updateViewport() {
this._origViewport = {
width: this.GL.drawingBufferWidth,
height: this.GL.drawingBufferHeight,
};
this.viewport(this._origViewport.width, this._origViewport.height);
}
_createPixelsArray() {
this.pixels = new Uint8Array(
this.GL.drawingBufferWidth * this.GL.drawingBufferHeight * 4
);
}
/**
* clears color and depth buffers
* with r,g,b,a
* @private
* @param {Number} r normalized red val.
* @param {Number} g normalized green val.
* @param {Number} b normalized blue val.
* @param {Number} a normalized alpha val.
*/
clear(...args) {
const _r = args[0] || 0;
const _g = args[1] || 0;
const _b = args[2] || 0;
let _a = args[3] || 0;
const activeFramebuffer = this.activeFramebuffer();
if (
activeFramebuffer &&
activeFramebuffer.format === UNSIGNED_BYTE &&
!activeFramebuffer.antialias &&
_a === 0
) {
// Drivers on Intel Macs check for 0,0,0,0 exactly when drawing to a
// framebuffer and ignore the command if it's the only drawing command to
// the framebuffer. To work around it, we can set the alpha to a value so
// low that it still rounds down to 0, but that circumvents the buggy
// check in the driver.
_a = 1e-10;
}
this.GL.clearColor(_r * _a, _g * _a, _b * _a, _a);
this.GL.clearDepth(1);
this.GL.clear(this.GL.COLOR_BUFFER_BIT | this.GL.DEPTH_BUFFER_BIT);
}
/**
* Resets all depth information so that nothing previously drawn will
* occlude anything subsequently drawn.
*/
clearDepth(depth = 1) {
this.GL.clearDepth(depth);
this.GL.clear(this.GL.DEPTH_BUFFER_BIT);
}
_applyStencilTestIfClipping() {
const drawTarget = this.drawTarget();
if (drawTarget._isClipApplied !== this._stencilTestOn) {
if (drawTarget._isClipApplied) {
this._internalEnable.call(this.GL, this.GL.STENCIL_TEST);
this._stencilTestOn = true;
} else {
if (!this._userEnabledStencil) {
this._internalDisable.call(this.GL, this.GL.STENCIL_TEST);
}
this._stencilTestOn = false;
}
}
}
//////////////////////////////////////////////
// SHADER
//////////////////////////////////////////////
/*
* shaders are created and cached on a per-renderer basis,
* on the grounds that each renderer will have its own gl context
* and the shader must be valid in that context.
*/
baseMaterialShader() {
if (!this._pInst._glAttributes.perPixelLighting) {
throw new Error(
"The material shader does not support hooks without perPixelLighting. Try turning it back on."
);
}
return super.baseMaterialShader();
}
_getLightShader() {
if (!this._defaultLightShader) {
if (this._pInst._glAttributes.perPixelLighting) {
this._defaultLightShader = new Shader(
this,
this._webGL2CompatibilityPrefix("vert", "highp") +
defaultShaders.phongVert,
this._webGL2CompatibilityPrefix("frag", "highp") +
defaultShaders.phongFrag,
{
vertex: {
"void beforeVertex": "() {}",
"Vertex getObjectInputs": "(Vertex inputs) { return inputs; }",
"Vertex getWorldInputs": "(Vertex inputs) { return inputs; }",
"Vertex getCameraInputs": "(Vertex inputs) { return inputs; }",
"void afterVertex": "() {}",
},
fragment: {
"void beforeFragment": "() {}",
"Inputs getPixelInputs": "(Inputs inputs) { return inputs; }",
"vec4 combineColors": `(ColorComponents components) {
vec4 color = vec4(0.);
color.rgb += components.diffuse * components.baseColor;
color.rgb += components.ambient * components.ambientColor;
color.rgb += components.specular * components.specularColor;
color.rgb += components.emissive;
color.a = components.opacity;
return color;
}`,
"vec4 getFinalColor": "(vec4 color, vec2 texCoord) { return color; }",
"void afterFragment": "() {}",
},
}
);
} else {
this._defaultLightShader = new Shader(
this,
this._webGL2CompatibilityPrefix("vert", "highp") +
defaultShaders.lightVert,
this._webGL2CompatibilityPrefix("frag", "highp") +
defaultShaders.lightTextureFrag
);
}
}
return this._defaultLightShader;
}
_getNormalShader() {
if (!this._defaultNormalShader) {
this._defaultNormalShader = new Shader(
this,
this._webGL2CompatibilityPrefix("vert", "highp") +
defaultShaders.normalVert,
this._webGL2CompatibilityPrefix("frag", "highp") +
defaultShaders.normalFrag,
{
vertex: {
"void beforeVertex": "() {}",
"Vertex getObjectInputs": "(Vertex inputs) { return inputs; }",
"Vertex getWorldInputs": "(Vertex inputs) { return inputs; }",
"Vertex getCameraInputs": "(Vertex inputs) { return inputs; }",
"void afterVertex": "() {}",
},
fragment: {
"void beforeFragment": "() {}",
"vec4 getFinalColor": "(vec4 color, vec2 texCoord) { return color; }",
"void afterFragment": "() {}",
},
}
);
}
return this._defaultNormalShader;
}
_getColorShader() {
if (!this._defaultColorShader) {
this._defaultColorShader = new Shader(
this,
this._webGL2CompatibilityPrefix("vert", "highp") +
defaultShaders.normalVert,
this._webGL2CompatibilityPrefix("frag", "highp") +
defaultShaders.basicFrag,
{
vertex: {
"void beforeVertex": "() {}",
"Vertex getObjectInputs": "(Vertex inputs) { return inputs; }",
"Vertex getWorldInputs": "(Vertex inputs) { return inputs; }",
"Vertex getCameraInputs": "(Vertex inputs) { return inputs; }",
"void afterVertex": "() {}",
},
fragment: {
"void beforeFragment": "() {}",
"vec4 getFinalColor": "(vec4 color, vec2 texCoord) { return color; }",
"void afterFragment": "() {}",
},
}
);
}
return this._defaultColorShader;
}
_getLineShader() {
if (!this._defaultLineShader) {
this._defaultLineShader = new Shader(
this,
this._webGL2CompatibilityPrefix("vert", "highp") +
defaultShaders.lineVert,
this._webGL2CompatibilityPrefix("frag", "highp") +
defaultShaders.lineFrag,
{
vertex: {
"void beforeVertex": "() {}",
"StrokeVertex getObjectInputs":
"(StrokeVertex inputs) { return inputs; }",
"StrokeVertex getWorldInputs":
"(StrokeVertex inputs) { return inputs; }",
"StrokeVertex getCameraInputs":
"(StrokeVertex inputs) { return inputs; }",
"void afterVertex": "() {}",
},
fragment: {
"void beforeFragment": "() {}",
"Inputs getPixelInputs": "(Inputs inputs) { return inputs; }",
"vec4 getFinalColor": "(vec4 color, vec2 texCoord) { return color; }",
"bool shouldDiscard": "(bool outside) { return outside; }",
"void afterFragment": "() {}",
},
}
);
}
return this._defaultLineShader;
}
_getFontShader() {
if (!this._defaultFontShader) {
if (this.webglVersion === WEBGL) {
this.GL.getExtension("OES_standard_derivatives");
}
this._defaultFontShader = new Shader(
this,
this._webGL2CompatibilityPrefix("vert", "highp") +
defaultShaders.fontVert,
this._webGL2CompatibilityPrefix("frag", "highp") +
defaultShaders.fontFrag
);
}
return this._defaultFontShader;
}
baseFilterShader() {
if (!this._baseFilterShader) {
this._baseFilterShader = new Shader(
this,
this._webGL2CompatibilityPrefix("vert", "highp") +
defaultShaders.filterBaseVert,
this._webGL2CompatibilityPrefix("frag", "highp") +
defaultShaders.filterBaseFrag,
{
vertex: {},
fragment: {
"vec4 getColor": `(FilterInputs inputs, in sampler2D canvasContent) {
return getTexture(canvasContent, inputs.texCoord);
}`,
},
hookAliases: {
'getColor': ['filterColor'],
},
}
);
}
return this._baseFilterShader;
}
_webGL2CompatibilityPrefix(shaderType, floatPrecision) {
let code = "";
if (this.webglVersion === WEBGL2) {
code += "#version 300 es\n#define WEBGL2\n";
}
if (shaderType === "vert") {
code += "#define VERTEX_SHADER\n";
} else if (shaderType === "frag") {
code += "#define FRAGMENT_SHADER\n";
}
if (floatPrecision) {
code += `precision ${floatPrecision} float;\n`;
}
return code;
}
/*
* WebGL-specific implementation of imageLight shader creation
*/
_createImageLightShader(type) {
if (type === 'diffused') {
return new Shader(
this,
this._webGL2CompatibilityPrefix("vert", "highp") +
defaultShaders.imageLightVert,
this._webGL2CompatibilityPrefix("frag", "highp") +
defaultShaders.imageLightDiffusedFrag
);
} else if (type === 'specular') {
return new Shader(
this,
this._webGL2CompatibilityPrefix("vert", "highp") +
defaultShaders.imageLightVert,
this._webGL2CompatibilityPrefix("frag", "highp") +
defaultShaders.imageLightSpecularFrag
);
}
throw new Error(`Unknown imageLight shader type: ${type}`);
}
/*
* WebGL-specific implementation of mipmap texture creation
*/
_createMipmapTexture(levels) {
return new MipmapTexture(this, levels, {});
}
/*
* Prepare array to collect ImageData levels for WebGL
*/
_prepareMipmapData(size, mipLevels) {
return { levels: [], size, mipLevels };
}
/*
* Accumulate ImageData from framebuffer for WebGL
*/
_accumulateMipLevel(framebuffer, mipmapData, mipLevel, width, height) {
const imageData = framebuffer.get().drawingContext.getImageData(0, 0, width, height);
mipmapData.levels.push(imageData);
}
/*
* Create final MipmapTexture from collected ImageData for WebGL
*/
_finalizeMipmapTexture(mipmapData) {
return new MipmapTexture(this, mipmapData.levels, {
minFilter: LINEAR_MIPMAP,
magFilter: LINEAR,
});
}
createMipmapTextureHandle({ levels, format, dataType, width, height }) {
const gl = this.GL;
const texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);
// Determine GL format and data type
const glFormat = gl.RGBA;
const glDataType = gl.UNSIGNED_BYTE;
for (let level = 0; level < levels.length; level++) {
gl.texImage2D(
gl.TEXTURE_2D,
level,
glFormat,
glFormat,
glDataType,
levels[level]
);
}
// Set mipmap-appropriate filtering
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR);
gl.bindTexture(gl.TEXTURE_2D, null);
return { texture, glFormat, glDataType };
}
/* Binds a buffer to the drawing context
* when passed more than two arguments it also updates or initializes
* the data associated with the buffer
*/
_bindBuffer(buffer, target, values, type, usage) {
const gl = this.GL;
if (!target) target = gl.ARRAY_BUFFER;
gl.bindBuffer(target, buffer);
if (values !== undefined) {
const data = this._normalizeBufferData(values, type);
gl.bufferData(target, data, usage || gl.STATIC_DRAW);
}
}
_prepareBuffer(renderBuffer, geometry, shader) {
const attributes = shader.attributes;
const gl = this.GL;
const glBuffers = this._getOrMakeCachedBuffers(geometry);
// loop through each of the buffer definitions
const attr = attributes[renderBuffer.attr];
if (!attr) {
return;
}
// check if the geometry has the appropriate source array
let buffer = glBuffers[renderBuffer.dst];
const src = geometry[renderBuffer.src];
if (src && src.length > 0) {
// check if we need to create the GL buffer
const createBuffer = !buffer;
if (createBuffer) {
// create and remember the buffer
glBuffers[renderBuffer.dst] = buffer = gl.createBuffer();
}
// bind the buffer
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
// check if we need to fill the buffer with data
if (createBuffer || geometry.dirtyFlags[renderBuffer.src] !== false) {
const map = renderBuffer.map;
// get the values from the geometry, possibly transformed
const values = map ? map(src) : src;
// fill the buffer with the values
this._bindBuffer(buffer, gl.ARRAY_BUFFER, values);
// mark the geometry's source array as clean
geometry.dirtyFlags[renderBuffer.src] = false;
}
// enable the attribute
shader.enableAttrib(attr, renderBuffer.size);
} else {
const loc = attr.location;
if (loc === -1 || !this.registerEnabled.has(loc)) {
return;
}
// Disable register corresponding to unused attribute
gl.disableVertexAttribArray(loc);
// Record register availability
this.registerEnabled.delete(loc);
}
}
_enableAttrib(_shader, attr, size, type, normalized, stride, offset) {
const loc = attr.location;
const gl = this.GL;
// Enable register even if it is disabled
if (!this.registerEnabled.has(loc)) {
gl.enableVertexAttribArray(loc);
// Record register availability
this.registerEnabled.add(loc);
}
gl.vertexAttribPointer(
loc,
size,
type || gl.FLOAT,
normalized || false,
stride || 0,
offset || 0
);
}
_ensureGeometryBuffers(buffers, indices, indexType) {
const gl = this.GL;
if (indices) {
let buffer = buffers.indexBuffer;
if (!buffer) buffer = gl.createBuffer();
this._bindBuffer(buffer, gl.ELEMENT_ARRAY_BUFFER, indices, indexType);
buffers.indexBuffer = buffer;
// If we're using a Uint32Array for our indexBuffer we will need to pass a
// different enum value to WebGL draw triangles. This happens in
// the _drawElements function.
buffers.indexBufferType = indexType === Uint32Array ? gl.UNSIGNED_INT : gl.UNSIGNED_SHORT;
} else if (buffers.indexBuffer) {
// the index buffer is unused, remove it
gl.deleteBuffer(buffers.indexBuffer);
buffers.indexBuffer = null;
}
}
_freeBuffers(buffers) {
const gl = this.GL;
if (buffers.indexBuffer) {
gl.deleteBuffer(buffers.indexBuffer);
}
function freeBuffers(defs) {
for (const def of defs) {
if (buffers[def.dst]) {
gl.deleteBuffer(buffers[def.dst]);
buffers[def.dst] = null;
}
}
}
// free all the buffers
freeBuffers(this.buffers.stroke);
freeBuffers(this.buffers.fill);
freeBuffers(this.buffers.user);
}
_initShader(shader) {
const gl = this.GL;
const vertShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertShader, shader.vertSrc());
gl.compileShader(vertShader);
if (!gl.getShaderParameter(vertShader, gl.COMPILE_STATUS)) {
throw new Error(`Yikes! An error occurred compiling the vertex shader: ${
gl.getShaderInfoLog(vertShader)
} in:\n\n${shader.vertSrc()}`);
}
const fragShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragShader, shader.fragSrc());
gl.compileShader(fragShader);
if (!gl.getShaderParameter(fragShader, gl.COMPILE_STATUS)) {
throw new Error(`Darn! An error occurred compiling the fragment shader: ${
gl.getShaderInfoLog(fragShader)
}`);
}
const program = gl.createProgram();
gl.attachShader(program, vertShader);
gl.attachShader(program, fragShader);
gl.linkProgram(program);
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
throw new Error(
`Snap! Error linking shader program: ${gl.getProgramInfoLog(program)}`
);
}
shader._compiled = true;
shader._glProgram = program;
shader._vertShader = vertShader;
shader._fragShader = fragShader;
}
_finalizeShader() {}
_getShaderAttributes(shader) {
return getWebGLShaderAttributes(shader, this.GL);
}
getUniformMetadata(shader) {
return getWebGLUniformMetadata(shader, this.GL);
}
updateUniformValue(shader, uniform, data) {
return setWebGLUniformValue(
shader,
uniform,
data,
(tex) => this.getTexture(tex),
this.GL
);
}
_updateTexture(uniform, tex) {
const gl = this.GL;
gl.activeTexture(gl.TEXTURE0 + uniform.samplerIndex);
tex.bindTexture();
tex.update();
gl.uniform1i(uniform.location, uniform.samplerIndex);
}
bindTexture(tex) {
// bind texture using gl context + glTarget and
// generated gl texture object
this.GL.bindTexture(this.GL.TEXTURE_2D, tex.getTexture().texture);
}
unbindTexture() {
// unbind per above, disable texturing on glTarget
this.GL.bindTexture(this.GL.TEXTURE_2D, null);
}
_unbindFramebufferTexture(uniform) {
// Make sure an empty texture is bound to the slot so that we don't
// accidentally leave a framebuffer bound, causing a feedback loop
// when something else tries to write to it
const gl = this.GL;
const empty = this._getEmptyTexture();
gl.activeTexture(gl.TEXTURE0 + uniform.samplerIndex);
empty.bindTexture();
gl.uniform1i(uniform.location, uniform.samplerIndex);
}
createTexture({ width, height, format, dataType }) {
const gl = this.GL;
const tex = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, tex);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0,
gl.RGBA, gl.UNSIGNED_BYTE, null);
// TODO use format and data type
return { texture: tex, glFormat: gl.RGBA, glDataType: gl.UNSIGNED_BYTE };
}
createFramebufferTextureHandle(framebufferTexture) {
// For WebGL, framebuffer texture handles are designed to be null
return null;
}
uploadTextureFromSource({ texture, glFormat, glDataType }, source) {
const gl = this.GL;
gl.texImage2D(gl.TEXTURE_2D, 0, glFormat, glFormat, glDataType, source);
}
uploadTextureFromData({ texture, glFormat, glDataType }, data, width, height) {
const gl = this.GL;
gl.texImage2D(
gl.TEXTURE_2D,
0,
glFormat,
width,
height,
0,
glFormat,
glDataType,
data
);
}
getSampler(_texture) {
return undefined;
}
bindTextureToShader({ texture }, sampler, uniformName, unit) {
const gl = this.GL;
gl.activeTexture(gl.TEXTURE0 + unit);
gl.bindTexture(gl.TEXTURE_2D, texture);
const location = gl.getUniformLocation(glProgram, uniformName);
gl.uniform1i(location, unit);
}
setTextureParams(texture) {
return setWebGLTextureParams(texture, this.GL, this.webglVersion);
}
deleteTexture({ texture }) {
this.GL.deleteTexture(texture);
}
/**
* @private blends colors according to color components.
* If alpha value is less than 1, or non-standard blendMode
* we need to enable blending on our gl context.
* @param {Number[]} color The currently set color, with values in 0-1 range
* @param {Boolean} [hasTransparency] Whether the shape being drawn has other
* transparency internally, e.g. via vertex colors
* @return {Number[]} Normalized numbers array
*/
_applyColorBlend(colors, hasTransparency) {
const gl = this.GL;
const isTexture = this.states.drawMode === TEXTURE;
const doBlend =
hasTransparency ||
this.states.userFillShader ||
this.states.userStrokeShader ||
isTexture ||
this.states.curBlendMode !== BLEND ||
colors[colors.length - 1] < 1.0 ||
this._isErasing;
if (doBlend !== this._isBlending) {
if (
doBlend ||
(this.states.curBlendMode !== BLEND &&
this.states.curBlendMode !== ADD)
) {
gl.enable(gl.BLEND);
} else {
gl.disable(gl.BLEND);
}
gl.depthMask(true);
this._isBlending = doBlend;
}
this._applyBlendMode();
return colors;
}
//////////////////////////////////////////////
// Shader hooks
//////////////////////////////////////////////
uniformNameFromHookKey(key) {
return key.slice(key.indexOf(' ') + 1);
}
populateHooks(shader, src, shaderType) {
return populateGLSLHooks(shader, src, shaderType);
}
getShaderHookTypes(shader, hookName) {
return getShaderHookTypes(shader, hookName);
}
//////////////////////////////////////////////
// Framebuffer methods
//////////////////////////////////////////////
defaultFramebufferAlpha() {
return this._pInst._glAttributes.alpha;
}
defaultFramebufferAntialias() {
return this.supportsFramebufferAntialias()
? this._pInst._glAttributes.antialias
: false;
}
supportsFramebufferAntialias() {
return this.webglVersion === WEBGL2;
}
createFramebufferResources(framebuffer) {
const gl = this.GL;
framebuffer.framebuffer = gl.createFramebuffer();
if (!framebuffer.framebuffer) {
throw new Error('Unable to create a framebuffer');
}
if (framebuffer.antialias) {
framebuffer.aaFramebuffer = gl.createFramebuffer();
if (!framebuffer.aaFramebuffer) {
throw new Error('Unable to create a framebuffer for antialiasing');
}
}
}
validateFramebufferFormats(framebuffer) {
const gl = this.GL;
if (
framebuffer.useDepth &&
this.webglVersion === WEBGL &&
!gl.getExtension('WEBGL_depth_texture')
) {
console.warn(
'Unable to create depth textures in this environment. Falling back ' +
'to a framebuffer without depth.'
);
framebuffer.useDepth = false;
}
if (
framebuffer.useDepth &&
this.webglVersion === WEBGL &&
framebuffer.depthFormat === FLOAT
) {
console.warn(
'FLOAT depth format is unavailable in WebGL 1. ' +
'Defaulting to UNSIGNED_INT.'
);
framebuffer.depthFormat = UNSIGNED_INT;
}
if (![
UNSIGNED_BYTE,
FLOAT,
HALF_FLOAT
].includes(framebuffer.format)) {
console.warn(
'Unknown Framebuffer format. ' +
'Please use UNSIGNED_BYTE, FLOAT, or HALF_FLOAT. ' +
'Defaulting to UNSIGNED_BYTE.'
);
framebuffer.format = UNSIGNED_BYTE;
}
if (framebuffer.useDepth && ![
UNSIGNED_INT,
FLOAT
].includes(framebuffer.depthFormat)) {
console.warn(
'Unknown Framebuffer depth format. ' +
'Please use UNSIGNED_INT or FLOAT. Defaulting to FLOAT.'
);
framebuffer.depthFormat = FLOAT;
}
const support = checkWebGLCapabilities(this);
if (!support.float && framebuffer.format === FLOAT) {
console.warn(
'This environment does not support FLOAT textures. ' +
'Falling back to UNSIGNED_BYTE.'
);
framebuffer.format = UNSIGNED_BYTE;
}
if (
framebuffer.useDepth &&
!support.float &&
framebuffer.depthFormat === FLOAT
) {
console.warn(
'This environment does not support FLOAT depth textures. ' +
'Falling back to UNSIGNED_INT.'
);
framebuffer.depthFormat = UNSIGNED_INT;
}
if (!support.halfFloat && framebuffer.format === HALF_FLOAT) {
console.warn(
'This environment does not support HALF_FLOAT textures. ' +
'Falling back to UNSIGNED_BYTE.'
);
framebuffer.format = UNSIGNED_BYTE;
}
if (
framebuffer.channels === RGB &&
[FLOAT, HALF_FLOAT].includes(framebuffer.format)
) {
console.warn(
'FLOAT and HALF_FLOAT formats do not work cross-platform with only ' +
'RGB channels. Falling back to RGBA.'
);
framebuffer.channels = RGBA;
}
}
recreateFramebufferTextures(framebuffer) {
const gl = this.GL;
const prevBoundTexture = gl.getParameter(gl.TEXTURE_BINDING_2D);
const prevBoundFramebuffer = gl.getParameter(gl.FRAMEBUFFER_BINDING);
const colorTexture = gl.createTexture();
if (!colorTexture) {
throw new Error('Unable to create color texture');
}
gl.bindTexture(gl.TEXTURE_2D, colorTexture);
const colorFormat = this._getFramebufferColorFormat(framebuffer);
gl.texImage2D(
gl.TEXTURE_2D,
0,
colorFormat.internalFormat,
framebuffer.width * framebuffer.density,
framebuffer.height * framebuffer.density,
0,
colorFormat.format,
colorFormat.type,
null
);
framebuffer.colorTexture = colorTexture;
gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer.framebuffer);
gl.framebufferTexture2D(
gl.FRAMEBUFFER,
gl.COLOR_ATTACHMENT0,
gl.TEXTURE_2D,
colorTexture,
0
);
if (framebuffer.useDepth) {
// Create the depth texture
const depthTexture = gl.createTexture();
if (!depthTexture) {
throw new Error('Unable to create depth texture');
}
const depthFormat = this._getFramebufferDepthFormat(framebuffer);
gl.bindTexture(gl.TEXTURE_2D, depthTexture);
gl.texImage2D(
gl.TEXTURE_2D,
0,
depthFormat.internalFormat,
framebuffer.width * framebuffer.density,
framebuffer.height * framebuffer.density,
0,
depthFormat.format,
depthFormat.type,
null
);
gl.framebufferTexture2D(
gl.FRAMEBUFFER,
framebuffer.useStencil ? gl.DEPTH_STENCIL_ATTACHMENT : gl.DEPTH_ATTACHMENT,
gl.TEXTURE_2D,
depthTexture,
0
);
framebuffer.depthTexture = depthTexture;
}
// Create separate framebuffer for antialiasing
if (framebuffer.antialias) {
framebuffer.colorRenderbuffer = gl.createRenderbuffer();
gl.bindRenderbuffer(gl.RENDERBUFFER, framebuffer.colorRenderbuffer);
gl.renderbufferStorageMultisample(
gl.RENDERBUFFER,
Math.max(
0,
Math.min(framebuffer.antialiasSamples, gl.getParameter(gl.MAX_SAMPLES))
),
colorFormat.internalFormat,
framebuffer.width * framebuffer.density,
framebuffer.height * framebuffer.density
);
if (framebuffer.useDepth) {
const depthFormat = this._getFramebufferDepthFormat(framebuffer);
framebuffer.depthRenderbuffer = gl.createRenderbuffer();
gl.bindRenderbuffer(gl.RENDERBUFFER, framebuffer.depthRenderbuffer);
gl.renderbufferStorageMultisample(
gl.RENDERBUFFER,
Math.max(
0,
Math.min(framebuffer.antialiasSamples, gl.getParameter(gl.MAX_SAMPLES))
),
depthFormat.internalFormat,
framebuffer.width * framebuffer.density,
framebuffer.height * framebuffer.density
);
}
gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer.aaFramebuffer);
gl.framebufferRenderbuffer(
gl.FRAMEBUFFER,
gl.COLOR_ATTACHMENT0,
gl.RENDERBUFFER,
framebuffer.colorRenderbuffer
);
if (framebuffer.useDepth) {
gl.framebufferRenderbuffer(
gl.FRAMEBUFFER,
framebuffer.useStencil ? gl.DEPTH_STENCIL_ATTACHMENT : gl.DEPTH_ATTACHMENT,
gl.RENDERBUFFER,
framebuffer.depthRenderbuffer
);
}
}
gl.bindTexture(gl.TEXTURE_2D, prevBoundTexture);
gl.bindFramebuffer(gl.FRAMEBUFFER, prevBoundFramebuffer);
}
/**
* To create a WebGL texture, one needs to supply three pieces of information:
* the type (the data type each channel will be stored as, e.g. int or float),
* the format (the color channels that will each be stored in the previously
* specified type, e.g. rgb or rgba), and the internal format (the specifics
* of how data for each channel, in the aforementioned type, will be packed
* together, such as how many bits to use, e.g. RGBA32F or RGB565.)
*
* The format and channels asked for by the user hint at what these values
* need to be, and the WebGL version affects what options are avaiable.
* This method returns the values for these three properties, given the
* framebuffer's settings.
*
* @private
*/
_getFramebufferColorFormat(framebuffer) {
let type, format, internalFormat;
const gl = this.GL;
if (framebuffer.format === FLOAT) {
type = gl.FLOAT;
} else if (framebuffer.format === HALF_FLOAT) {
type = this.webglVersion === WEBGL2
? gl.HALF_FLOAT
: gl.getExtension('OES_texture_half_float').HALF_FLOAT_OES;
} else {
type = gl.UNSIGNED_BYTE;
}
if (framebuffer.channels === RGBA) {
format = gl.RGBA;
} else {
format = gl.RGB;
}
if (this.webglVersion === WEBGL2) {
// https://webgl2fundamentals.org/webgl/lessons/webgl-data-textures.html
const table = {
[gl.FLOAT]: {
[gl.RGBA]: gl.RGBA32F
// gl.RGB32F is not available in Firefox without an alpha channel
},
[gl.HALF_FLOAT]: {
[gl.RGBA]: gl.RGBA16F
// gl.RGB16F is not available in Firefox without an alpha channel
},
[gl.UNSIGNED_BYTE]: {
[gl.RGBA]: gl.RGBA8, // gl.RGBA4
[gl.RGB]: gl.RGB8 // gl.RGB565
}
};
internalFormat = table[type][format];
} else if (framebuffer.format === HALF_FLOAT) {
internalFormat = gl.RGBA;
} else {
internalFormat = format;
}
return { internalFormat, format, type };
}
/**
* To create a WebGL texture, one needs to supply three pieces of information:
* the type (the data type each channel will be stored as, e.g. int or float),
* the format (the color channels that will each be stored in the previously
* specified type, e.g. rgb or rgba), and the internal format (the specifics
* of how data for each channel, in the aforementioned type, will be packed
* together, such as how many bits to use, e.g. RGBA32F or RGB565.)
*
* This method takes into account the settings asked for by the user and
* returns values for these three properties that can be used for the
* texture storing depth information.
*
* @private
*/
_getFramebufferDepthFormat(framebuffer) {
let type, format, internalFormat;
const gl = this.GL;
if (framebuffer.useStencil) {
if (framebuffer.depthFormat === FLOAT) {
type = gl.FLOAT_32_UNSIGNED_INT_24_8_REV;
} else if (this.webglVersion === WEBGL2) {
type = gl.UNSIGNED_INT_24_8;
} else {
type = gl.getExtension('WEBGL_depth_texture').UNSIGNED_INT_24_8_WEBGL;
}
} else {
if (framebuffer.depthFormat === FLOAT) {
type = gl.FLOAT;
} else {
type = gl.UNSIGNED_INT;
}
}
if (framebuffer.useStencil) {
format = gl.DEPTH_STENCIL;
} else {
format = gl.DEPTH_COMPONENT;
}
if (framebuffer.useStencil) {
if (framebuffer.depthFormat === FLOAT) {
internalFormat = gl.DEPTH32F_STENCIL8;
} else if (this.webglVersion === WEBGL2) {
internalFormat = gl.DEPTH24_STENCIL8;
} else {
internalFormat = gl.DEPTH_STENCIL;
}
} else if (this.webglVersion === WEBGL2) {
if (framebuffer.depthFormat === FLOAT) {
internalFormat = gl.DEPTH_COMPONENT32F;
} else {
internalFormat = gl.DEPTH_COMPONENT24;
}
} else {
internalFormat = gl.DEPTH_COMPONENT;
}
return { internalFormat, format, type };
}
_deleteFramebufferTexture(texture) {
const gl = this.GL;
gl.deleteTexture(texture.rawTexture().texture);
this.textures.delete(texture);
}
deleteFramebufferTextures(framebuffer) {
this._deleteFramebufferTexture(framebuffer.color);
if (framebuffer.depth) this._deleteFramebufferTexture(framebuffer.depth);
const gl = this.GL;
if (framebuffer.colorRenderbuffer) gl.deleteRenderbuffer(framebuffer.colorRenderbuffer);
if (framebuffer.depthRenderbuffer) gl.deleteRenderbuffer(framebuffer.depthRenderbuffer);
}
deleteFramebufferResources(framebuffer) {
const gl = this.GL;
gl.deleteFramebuffer(framebuffer.framebuffer);
if (framebuffer.aaFramebuffer) {
gl.deleteFramebuffer(framebuffer.aaFramebuffer);
}
if (framebuffer.depthRenderbuffer) {
gl.deleteRenderbuffer(framebuffer.depthRenderbuffer);
}
if (framebuffer.colorRenderbuffer) {
gl.deleteRenderbuffer(framebuffer.colorRenderbuffer);
}
}
getFramebufferToBind(framebuffer) {
if (framebuffer.antialias) {
return framebuffer.aaFramebuffer;
} else {
return framebuffer.framebuffer;
}
}
updateFramebufferTexture(framebuffer, property) {
if (framebuffer.antialias) {
const gl = this.GL;
gl.bindFramebuffer(gl.READ_FRAMEBUFFER, framebuffer.aaFramebuffer);
gl.bindFramebuffer(gl.DRAW_FRAMEBUFFER, framebuffer.framebuffer);
const partsToCopy = {
colorTexture: [
gl.COLOR_BUFFER_BIT,
framebuffer.colorP5Texture.magFilter === LINEAR ? gl.LINEAR : gl.NEAREST
],
};
if (framebuffer.useDepth) {
partsToCopy.depthTexture = [
gl.DEPTH_BUFFER_BIT,
framebuffer.depthP5Texture.magFilter === LINEAR ? gl.LINEAR : gl.NEAREST
];
}
const [flag, filter] = partsToCopy[property];
gl.blitFramebuffer(
0,
0,
framebuffer.width * framebuffer.density,
framebuffer.height * framebuffer.density,
0,
0,
framebuffer.width * framebuffer.density,
framebuffer.height * framebuffer.density,
flag,
filter
);
const activeFbo = this.activeFramebuffer();
this.bindFramebuffer(activeFbo);
}
}
bindFramebuffer(framebuffer) {
const gl = this.GL;
gl.bindFramebuffer(
gl.FRAMEBUFFER,
framebuffer
? this.getFramebufferToBind(framebuffer)
: null
);
}
framebufferYScale() {
// WebGL textures are upside-down compared to textures that come from
// images and graphics. Framebuffer cameras need to invert their y
// axes when being rendered to so that the texture comes out rightway up
// when read in shaders or image().
return -1;
}
readFramebufferPixels(framebuffer) {
const gl = this.GL;
const prevFramebuffer = this.activeFramebuffer();
gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer.framebuffer);
const colorFormat = this._getFramebufferColorFormat(framebuffer);
const pixels = readPixelsWebGL(
framebuffer.pixels,
gl,
framebuffer.framebuffer,
0,
0,
framebuffer.width * framebuffer.density,
framebuffer.height * framebuffer.density,
colorFormat.format,
colorFormat.type
);
this.bindFramebuffer(prevFramebuffer);
return pixels;
}
readFramebufferPixel(framebuffer, x, y) {
const colorFormat = this._getFramebufferColorFormat(framebuffer);
return readPixelWebGL(
this.GL,
framebuffer.framebuffer,
x,
y,
colorFormat.format,
colorFormat.type
);
}
readFramebufferRegion(framebuffer, x, y, w, h) {
const gl = this.GL;
const colorFormat = this._getFramebufferColorFormat(framebuffer);
const rawData = readPixelsWebGL(
undefined,
gl,
framebuffer.framebuffer,
x * framebuffer.density,
y * framebuffer.density,
w * framebuffer.density,
h * framebuffer.density,
colorFormat.format,
colorFormat.type
);
// Framebuffer data might be either a Uint8Array or Float32Array
// depending on its format, and it may or may not have an alpha channel.
// To turn it into an image, we have to normalize the data into a
// Uint8ClampedArray with alpha.
const fullData = new Uint8ClampedArray(
w * h * framebuffer.density * framebuffer.density * 4
);
// Default channels that aren't in the framebuffer (e.g. alpha, if the
// framebuffer is in RGB mode instead of RGBA) to 255
fullData.fill(255);
const channels = colorFormat.format === gl.RGB ? 3 : 4;
for (let yPos = 0; yPos < h * framebuffer.density; yPos++) {
for (let xPos = 0; xPos < w * framebuffer.density; xPos++) {
for (let channel = 0; channel < 4; channel++) {
const idx = (yPos * w * framebuffer.density + xPos) * 4 + channel;
if (channel < channels) {
// Find the index of this pixel in `rawData`, which might have a
// different number of channels
const rawDataIdx = channels === 4
? idx
: (yPos * w * framebuffer.density + xPos) * channels + channel;
fullData[idx] = rawData[rawDataIdx];
}
}
}
}
// Create image from data
const region = new Image(w * framebuffer.density, h * framebuffer.density);
region.imageData = region.canvas.getContext('2d').createImageData(
region.width,
region.height
);
region.imageData.data.set(fullData);
region.pixels = region.imageData.data;
region.updatePixels();
if (framebuffer.density !== 1) {
region.pixelDensity(framebuffer.density);
}
return region;
}
updateFramebufferPixels(framebuffer) {
const gl = this.GL;
framebuffer.colorP5Texture.bindTexture();
const colorFormat = this._getFramebufferColorFormat(framebuffer);
const channels = colorFormat.format === gl.RGBA ? 4 : 3;
const len = framebuffer.width * framebuffer.height * framebuffer.density * framebuffer.density * channels;
const TypedArrayClass = colorFormat.type === gl.UNSIGNED_BYTE ? Uint8Array : Float32Array;
if (!(framebuffer.pixels instanceof TypedArrayClass) || framebuffer.pixels.length !== len) {
throw new Error(
'The pixels array has not been set correctly. Please call loadPixels() before updatePixels().'
);
}
gl.texImage2D(
gl.TEXTURE_2D,
0,
colorFormat.internalFormat,
framebuffer.width * framebuffer.density,
framebuffer.height * framebuffer.density,
0,
colorFormat.format,
colorFormat.type,
framebuffer.pixels
);
framebuffer.colorP5Texture.unbindTexture();
framebuffer.dirty.colorTexture = false;
const prevFramebuffer = this.activeFramebuffer();
if (framebuffer.antialias) {
// We need to make sure the antialiased framebuffer also has the updated
// pixels so that if more is drawn to it, it goes on top of the updated
// pixels instead of replacing them.
// We can't blit the framebuffer to the multisampled antialias
// framebuffer to leave both in the same state, so instead we have
// to use image() to put the framebuffer texture onto the antialiased
// framebuffer.
framebuffer.begin();
this.push();
this.states.setValue('imageMode', CORNER);
this.setCamera(framebuffer.filterCamera);
this.resetMatrix();
this.states.setValue('strokeColor', null);
this.clear();
this._drawingFilter = true;
this.image(
framebuffer,
0, 0,
framebuffer.width, framebuffer.height,
-this.width / 2, -this.height / 2,
this.width, this.height
);
this._drawingFilter = false;
this.pop();
if (framebuffer.useDepth) {
gl.clearDepth(1);
gl.clear(gl.DEPTH_BUFFER_BIT);
}
framebuffer.end();
} else {
gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer.framebuffer);
if (framebuffer.useDepth) {
gl.clearDepth(1);
gl.clear(gl.DEPTH_BUFFER_BIT);
}
this.bindFramebuffer(prevFramebuffer);
}
}
}
function rendererGL(p5, fn) {
p5.RendererGL = RendererGL;
/**
* @module Rendering
* @submodule Rendering
* @for p5
*/
/**
* Set attributes for the WebGL Drawing context.
* This is a way of adjusting how the WebGL
* renderer works to fine-tune the display and performance.
*
* Note that this will reinitialize the drawing context
* if called after the WebGL canvas is made.
*
* If an object is passed as the parameter, all attributes
* not declared in the object will be set to defaults.
*
* The available attributes are:
* <br>
* alpha - indicates if the canvas contains an alpha buffer
* default is true
*
* depth - indicates whether the drawing buffer has a depth buffer
* of at least 16 bits - default is true
*
* stencil - indicates whether the drawing buffer has a stencil buffer
* of at least 8 bits
*
* antialias - indicates whether or not to perform anti-aliasing
* default is false (true in Safari)
*
* premultipliedAlpha - indicates that the page compositor will assume
* the drawing buffer contains colors with pre-multiplied alpha
* default is true
*
* preserveDrawingBuffer - if true the buffers will not be cleared and
* and will preserve their values until cleared or overwritten by author
* (note that p5 clears automatically on draw loop)
* default is true
*
* perPixelLighting - if true, per-pixel lighting will be used in the
* lighting shader otherwise per-vertex lighting is used.
* default is true.
*
* version - either 1 or 2, to specify which WebGL version to ask for. By
* default, WebGL 2 will be requested. If WebGL2 is not available, it will
* fall back to WebGL 1. You can check what version is used with by looking at
* the global `webglVersion` property.
*
* @method setAttributes
* @for p5
* @param {String} key Name of attribute
* @param {Boolean} value New value of named attribute
* @example
* function setup() {
* createCanvas(100, 100, WEBGL);
* }
*
* function draw() {
* background(255);
* push();
* rotateZ(frameCount * 0.02);
* rotateX(frameCount * 0.02);
* rotateY(frameCount * 0.02);
* fill(0, 0, 0);
* box(50);
* pop();
* }
*
* @example
* // Now with the antialias attribute set to true.
* function setup() {
* setAttributes('antialias', true);
* createCanvas(100, 100, WEBGL);
* }
*
* function draw() {
* background(255);
* push();
* rotateZ(frameCount * 0.02);
* rotateX(frameCount * 0.02);
* rotateY(frameCount * 0.02);
* fill(0, 0, 0);
* box(50);
* pop();
* }
*
* @example
* // press the mouse button to disable perPixelLighting
* function setup() {
* createCanvas(100, 100, WEBGL);
* noStroke();
* fill(255);
* }
*
* let lights = [
* { c: '#f00', t: 1.12, p: 1.91, r: 0.2 },
* { c: '#0f0', t: 1.21, p: 1.31, r: 0.2 },
* { c: '#00f', t: 1.37, p: 1.57, r: 0.2 },
* { c: '#ff0', t: 1.12, p: 1.91, r: 0.7 },
* { c: '#0ff', t: 1.21, p: 1.31, r: 0.7 },
* { c: '#f0f', t: 1.37, p: 1.57, r: 0.7 }
* ];
*
* function draw() {
* let t = millis() / 1000 + 1000;
* background(0);
* directionalLight(color('#222'), 1, 1, 1);
*
* for (let i = 0; i < lights.length; i++) {
* let light = lights[i];
* pointLight(
* color(light.c),
* p5.Vector.fromAngles(t * light.t, t * light.p, width * light.r)
* );
* }
*
* specularMaterial(255);
* sphere(width * 0.1);
*
* rotateX(t * 0.77);
* rotateY(t * 0.83);
* rotateZ(t * 0.91);
* torus(width * 0.3, width * 0.07, 24, 10);
* }
*
* function mousePressed() {
* setAttributes('perPixelLighting', false);
* noStroke();
* fill(255);
* }
* function mouseReleased() {
* setAttributes('perPixelLighting', true);
* noStroke();
* fill(255);
* }
*
* @alt a rotating cube with smoother edges
*/
/**
* @method setAttributes
* @for p5
* @param {Object} obj object with key-value pairs
*/
fn.setAttributes = function (key, value) {
return this._renderer._setAttributes(key, value);
};
/**
* ensures that p5 is using a 3d renderer. throws an error if not.
*/
fn._assert3d = function (name) {
if (!this._renderer.isP3D)
throw new Error(
`${name}() is only supported in WEBGL mode. If you'd like to use 3D graphics and WebGL, see https://p5js.org/examples/form-3d-primitives.html for more information.`
);
};
p5.renderers[WEBGL] = p5.RendererGL;
p5.renderers[WEBGL2] = p5.RendererGL;
}
if (typeof p5 !== "undefined") {
rendererGL(p5, p5.prototype);
}
export { RendererGL, rendererGL as default };