WebGLShader - Web API 接口参考

function createShader (gl, sourceCode, type) { // Compiles either a shader of type gl.VERTEX_SHADER or gl.FRAGMENT_SHADER var shader = gl. SkiptomaincontentSkiptosearchSkiptoselectlanguageWeb开发技术WebAPI接口参考WebGLShaderArticleActions中文(简体)此页面由社区从英文翻译而来。

了解更多并加入MDNWebDocs社区。

描述范例规范浏览器兼容性参阅RelatedTopicsWebGLAPIWebGLShader继承WebGLObjectRelatedpagesforWebGLANGLE_instanced_arraysEXT_blend_minmax(en-US)EXT_color_buffer_half_float(en-US)EXT_disjoint_timer_query(en-US)EXT_frag_depth(en-US)EXT_sRGB(en-US)EXT_shader_texture_lod(en-US)EXT_texture_filter_anisotropic(en-US)OES_element_index_uint(en-US)OES_standard_derivatives(en-US)OES_texture_float(en-US)OES_texture_float_linear(en-US)OES_texture_half_float(en-US)OES_texture_half_float_linear(en-US)OES_vertex_array_objectWEBGL_color_buffer_float(en-US)WEBGL_compressed_texture_etc1(en-US)WEBGL_compressed_texture_pvrtc(en-US)WEBGL_compressed_texture_s3tc(en-US)WEBGL_compressed_texture_s3tc_srgb(en-US)WEBGL_debug_renderer_info(en-US)WEBGL_debug_shaders(en-US)WEBGL_depth_texture(en-US)WEBGL_draw_buffers(en-US)WEBGL_lose_contextWebGL2RenderingContextWebGLActiveInfoWebGLBufferWebGLContextEventWebGLFramebufferWebGLObjectWebGLProgramWebGLQueryWebGLRenderbufferWebGLRenderingContextWebGLSamplerWebGLShaderPrecisionFormatWebGLSyncWebGLTextureWebGLTransformFeedback(en-US)WebGLUniformLocationWebGLVertexArrayObject描述范例规范浏览器兼容性参阅WebGLShader WebGLAPI的WebGLShader可以是一个顶点着色器（vertexshader）或片元着色器（fragmentshader）。

每个WebGLProgram都需要这两种类型的着色器。

描述要创建一个WebGLShader需要使用WebGLRenderingContext.createShader，通过WebGLRenderingContext.shaderSource()然后挂接GLSL源代码,最后调用WebGLRenderingContext.compileShader()完成着色器（shader）的编译。

此时WebGLShader仍不是可用的形式，他需要被添加到一个WebGLProgram里。

functioncreateShader(gl,sourceCode,type){ //Compileseitherashaderoftypegl.VERTEX_SHADERorgl.FRAGMENT_SHADER varshader=gl.createShader(type); gl.shaderSource(shader,sourceCode); gl.compileShader(shader); if(!gl.getShaderParameter(shader,gl.COMPILE_STATUS)){ varinfo=gl.getShaderInfoLog(shader); throw"CouldnotcompileWebGLprogram.\n\n"+info; } returnshader; } 参看WebGLProgram关于添加着色器的信息。

范例创建一个顶点着色器（vertexshader）注意，有很多其他方式编译和访问着色器（shader）源代码字符串.这些示例仅用于例证说明。

varvertexShaderSource= "attributevec4position;\n"+ "voidmain(){\n"+ "gl_Position=position;\n"+ "}\n"; //从上面例子使用createShader函数。

varvertexShader=createShader(gl,vertexShaderSource,gl.VERTEX_SHADER) 创建一个片元着色器（fragmentshader）varfragmentShaderSource= "voidmain(){\n"+ "gl_FragColor=vec4(1.0,1.0,1.0,1.0);\n"+ "}\n"; //从上面例子使用createShader函数。

varfragmentShader=createShader(gl,fragmentShaderSource,gl.FRAGMENT_SHADER) 规范SpecificationWebGLSpecification#5.8浏览器兼容性BCDtablesonlyloadinthebrowser参阅 WebGLProgram WebGLRenderingContext.attachShader() WebGLRenderingContext.bindAttribLocation() WebGLRenderingContext.compileShader() WebGLRenderingContext.createProgram() WebGLRenderingContext.createShader() WebGLRenderingContext.deleteProgram() WebGLRenderingContext.deleteShader() WebGLRenderingContext.detachShader() WebGLRenderingContext.getAttachedShaders()(en-US) WebGLRenderingContext.getProgramParameter() WebGLRenderingContext.getProgramInfoLog() WebGLRenderingContext.getShaderParameter() WebGLRenderingContext.getShaderPrecisionFormat()(en-US) WebGLRenderingContext.getShaderInfoLog()(en-US) WebGLRenderingContext.getShaderSource() WebGLRenderingContext.isProgram() WebGLRenderingContext.isShader() WebGLRenderingContext.linkProgram() WebGLRenderingContext.shaderSource() WebGLRenderingContext.useProgram() WebGLRenderingContext.validateProgram() Foundaproblemwiththispage?EditonGitHubSourceonGitHubReportaproblemwiththiscontentonGitHubWanttofixtheproblemyourself?SeeourContributionguide.Lastmodified:2022年7月20日,byMDNcontributors