WebGLShader - Web APIs - MDN - Mozilla

function createShader (gl, sourceCode, type) { // Compiles either a shader of type gl.VERTEX_SHADER or gl.FRAGMENT_SHADER const shader = gl. SkiptomaincontentSkiptosearchSkiptoselectlanguageReferencesWebAPIsWebGLShaderArticleActionsEnglish(US)DescriptionExamplesSpecificationsBrowsercompatibilitySeealsoRelatedTopicsWebGLAPIWebGLShaderInheritance:WebGLObjectRelatedpagesforWebGLANGLE_instanced_arraysEXT_blend_minmaxEXT_color_buffer_half_floatEXT_disjoint_timer_queryEXT_frag_depthEXT_sRGBEXT_shader_texture_lodEXT_texture_filter_anisotropicOES_element_index_uintOES_standard_derivativesOES_texture_floatOES_texture_float_linearOES_texture_half_floatOES_texture_half_float_linearOES_vertex_array_objectWEBGL_color_buffer_floatWEBGL_compressed_texture_etc1WEBGL_compressed_texture_pvrtcWEBGL_compressed_texture_s3tcWEBGL_compressed_texture_s3tc_srgbWEBGL_debug_renderer_infoWEBGL_debug_shadersWEBGL_depth_textureWEBGL_draw_buffersWEBGL_lose_contextWebGL2RenderingContextWebGLActiveInfoWebGLBufferWebGLContextEventWebGLFramebufferWebGLObjectWebGLProgramWebGLQueryWebGLRenderbufferWebGLRenderingContextWebGLSamplerWebGLShaderPrecisionFormatWebGLSyncWebGLTextureWebGLTransformFeedbackWebGLUniformLocationWebGLVertexArrayObjectDescriptionExamplesSpecificationsBrowsercompatibilitySeealsoWebGLShaderTheWebGLShaderispartoftheWebGLAPIandcaneitherbeavertexorafragmentshader.AWebGLProgramrequiresbothtypesofshaders. WebGLObject WebGLShader DescriptionTocreateaWebGLShaderuseWebGLRenderingContext.createShader,thenhookuptheGLSLsourcecodeusingWebGLRenderingContext.shaderSource(),andfinallyinvokeWebGLRenderingContext.compileShader()tofinishandcompiletheshader.AtthispointtheWebGLShaderisstillnotinausableformandmuststillbeattachedtoaWebGLProgram. functioncreateShader(gl,sourceCode,type){ //Compileseitherashaderoftypegl.VERTEX_SHADERorgl.FRAGMENT_SHADER constshader=gl.createShader(type); gl.shaderSource(shader,sourceCode); gl.compileShader(shader); if(!gl.getShaderParameter(shader,gl.COMPILE_STATUS)){ constinfo=gl.getShaderInfoLog(shader); throw'CouldnotcompileWebGLprogram.\n\n'+info; } returnshader; } SeeWebGLProgramforinformationonattachingtheshaders.ExamplesCreatingavertexshaderNotethattherearemanyotherstrategiesforwritingandaccessingshadersourcecodestrings.Theseexampleareforillustrationpurposesonly. constvertexShaderSource= 'attributevec4position;\n'+ 'voidmain(){\n'+ 'gl_Position=position;\n'+ '}\n'; //UsethecreateShaderfunctionfromtheexampleabove constvertexShader=createShader(gl,vertexShaderSource,gl.VERTEX_SHADER) CreatingafragmentshaderconstfragmentShaderSource= 'voidmain(){\n'+ 'gl_FragColor=vec4(1.0,1.0,1.0,1.0);\n'+ '}\n'; //UsethecreateShaderfunctionfromtheexampleabove constfragmentShader=createShader(gl,fragmentShaderSource,gl.FRAGMENT_SHADER) SpecificationsSpecificationWebGLSpecification#5.8BrowsercompatibilityBCDtablesonlyloadinthebrowserSeealso WebGLProgram WebGLRenderingContext.attachShader() WebGLRenderingContext.bindAttribLocation() WebGLRenderingContext.compileShader() WebGLRenderingContext.createProgram() WebGLRenderingContext.createShader() WebGLRenderingContext.deleteProgram() WebGLRenderingContext.deleteShader() WebGLRenderingContext.detachShader() WebGLRenderingContext.getAttachedShaders() WebGLRenderingContext.getProgramParameter() WebGLRenderingContext.getProgramInfoLog() WebGLRenderingContext.getShaderParameter() WebGLRenderingContext.getShaderPrecisionFormat() WebGLRenderingContext.getShaderInfoLog() WebGLRenderingContext.getShaderSource() WebGLRenderingContext.isProgram() WebGLRenderingContext.isShader() WebGLRenderingContext.linkProgram() WebGLRenderingContext.shaderSource() WebGLRenderingContext.useProgram() WebGLRenderingContext.validateProgram() Foundaproblemwiththispage?EditonGitHubSourceonGitHubReportaproblemwiththiscontentonGitHubWanttofixtheproblemyourself?SeeourContributionguide.Lastmodified:Jul13,2022,byMDNcontributors