WebGPU Shading Language - Revision history

MehmetOguzDerin: Reduce blankspace for mobile

2025-06-17T05:53:01Z

Reduce blankspace for mobile

← Previous revision		Revision as of 05:53, 17 June 2025
Line 35:		Line 35:

	struct VertexInput {		struct VertexInput {
	@location(0) position : vec3<f32>,		@location(0) position : vec3<f32>,
	@location(1) color : vec3<f32>,		@location(1) color : vec3<f32>,
	};		};

	struct VertexOutput {		struct VertexOutput {
	@builtin(position) clip_position : vec4<f32>,		@builtin(position) clip_position : vec4<f32>,
	@location(0) color : vec3<f32>,		@location(0) color : vec3<f32>,
	};		};

Line 49:		Line 49:
	@vertex		@vertex
	fn main(v_in : VertexInput) -> VertexOutput {		fn main(v_in : VertexInput) -> VertexOutput {
	var v_out : VertexOutput;		var v_out : VertexOutput;
	v_out.clip_position = mvp * vec4<f32>(v_in.position, 1.0);		v_out.clip_position = mvp * vec4<f32>(v_in.position, 1.0);
	v_out.color = v_in.color;		v_out.color = v_in.color;
	return v_out;		return v_out;
	}		}
	</syntaxhighlight>		</syntaxhighlight>
Line 61:		Line 61:
	====Fragment shader example====		====Fragment shader example====
	<syntaxhighlight lang="wgsl">		<syntaxhighlight lang="wgsl">
	/* Receives interpolated color and writes it to the framebuffer. */		/* Receives interpolated color and
			writes it to the framebuffer. */

	@fragment		@fragment
	fn main(@location(0) color : ~~vec3<f32~~>)		fn main(@location(0) color : vec3f) -> @location(0) vec4f {
		⚫	return vec4<f32>(color, 1.0); // add opaque alpha
	-> @location(0) vec4<f32> {
⚫	return vec4<f32>(color, 1.0); // add opaque alpha
	}		}
	</syntaxhighlight>		</syntaxhighlight>
Line 79:		Line 79:

	struct Params {		struct Params {
	element_count : u32,		element_count : u32,
	};		};

	@group(0) @binding(0) var<storage, read> in_data : array<f32>;		@group(0) @binding(0)
			var<storage, read> in_data : array<f32>;
	@group(0) @binding(1) var<storage, read_write> out_data : array<f32>;		@group(0) @binding(1)
			var<storage, read_write> out_data : array<f32>;
	@group(0) @binding(2) var<uniform> params : Params;		@group(0) @binding(2) var<uniform> params : Params;

	@compute @workgroup_size(64)		@compute @workgroup_size(64)
	fn main(@builtin(global_invocation_id) gid : vec3<u32>) {		fn main(@builtin(global_invocation_id) gid : vec3<u32>) {
	let idx : u32 = gid.x;		let idx : u32 = gid.x;
	if (idx >= params.element_count) {		if (idx >= params.element_count) {
	return;		return;
	}		}
	out_data[idx] = in_data[idx] * 2.0;		out_data[idx] = in_data[idx] * 2.0;
	}		}
	</syntaxhighlight>		</syntaxhighlight>

Frap at 22:00, 10 June 2025

2025-06-10T22:00:07Z

← Previous revision		Revision as of 22:00, 10 June 2025
Line 23:		Line 23:
	Traditional web graphics programming relied on [[WebGL]], which used [[OpenGL Shading Language\|GLSL ES]] for shader programming. However, as web applications became more sophisticated and demanded better performance, the need for a more modern graphics API became apparent.<ref name="webgpu-w3c">{{cite web \|title=WebGPU \|url=https://www.w3.org/TR/webgpu/ \|publisher=W3C \|access-date=2024-01-20}}</ref> WebGPU was developed to address these needs, providing access to modern GPU features while maintaining the security and portability requirements of the web platform.<ref name="gpuweb-explainer"/>		Traditional web graphics programming relied on [[WebGL]], which used [[OpenGL Shading Language\|GLSL ES]] for shader programming. However, as web applications became more sophisticated and demanded better performance, the need for a more modern graphics API became apparent.<ref name="webgpu-w3c">{{cite web \|title=WebGPU \|url=https://www.w3.org/TR/webgpu/ \|publisher=W3C \|access-date=2024-01-20}}</ref> WebGPU was developed to address these needs, providing access to modern GPU features while maintaining the security and portability requirements of the web platform.<ref name="gpuweb-explainer"/>

	==Shader ~~Types~~==		==Shader types==
	WGSL supports multiple shader stages:<ref name="wgsl-spec"/>		WGSL supports multiple shader stages:<ref name="wgsl-spec"/>

	===Vertex ~~Shaders~~===		===Vertex shaders===
	Process individual vertices, transforming positions and computing per-vertex data for rasterization.<ref name="wgsl-spec"/>		Process individual vertices, transforming positions and computing per-vertex data for rasterization.<ref name="wgsl-spec"/>

Line 56:		Line 56:
	</syntaxhighlight>		</syntaxhighlight>

	===Fragment ~~Shaders~~===		===Fragment shaders===
	Execute for each fragment, computing final color values and depth information.<ref name="wgsl-spec"/>		Execute for each fragment, computing final color values and depth information.<ref name="wgsl-spec"/>

Line 70:		Line 70:
	</syntaxhighlight>		</syntaxhighlight>

	===Compute ~~Shaders~~===		===Compute shaders===
	Perform general-purpose parallel computations on the GPU, supporting various algorithms beyond traditional graphics rendering.<ref name="wgsl-spec"/>		Perform general-purpose parallel computations on the GPU, supporting various algorithms beyond traditional graphics rendering.<ref name="wgsl-spec"/>

MehmetOguzDerin: Add shader examples per type as starting point to highlight language

2025-06-10T20:28:33Z

Add shader examples per type as starting point to highlight language

@@ Line 28: / Line 28: @@
 ===Vertex Shaders===
 Process individual vertices, transforming positions and computing per-vertex data for rasterization.<ref name="wgsl-spec"/>
 ===Fragment Shaders===
 Execute for each fragment, computing final color values and depth information.<ref name="wgsl-spec"/>
 ===Compute Shaders===
 Perform general-purpose parallel computations on the GPU, supporting various algorithms beyond traditional graphics rendering.<ref name="wgsl-spec"/>
 ==See also==

Bearcat: no redlinked categories; only categories that actually exist are permitted

2025-06-10T17:11:44Z

no redlinked categories; only categories that actually exist are permitted

← Previous revision		Revision as of 17:11, 10 June 2025
Line 63:		Line 63:
	[[Category:World Wide Web Consortium standards]]		[[Category:World Wide Web Consortium standards]]
	[[Category:Computer graphics]]		[[Category:Computer graphics]]
	[[Category:GPU computing]]

RussBot: Bot: Change redirected category W3C standards to World Wide Web Consortium standards

2025-06-08T07:21:03Z

Bot: Change redirected category W3C standards to World Wide Web Consortium standards

← Previous revision		Revision as of 07:21, 8 June 2025
Line 61:		Line 61:
	[[Category:Shading languages]]		[[Category:Shading languages]]
	[[Category:Web standards]]		[[Category:Web standards]]
	[[Category:~~W3C~~ standards]]		[[Category:World Wide Web Consortium standards]]
	[[Category:Computer graphics]]		[[Category:Computer graphics]]
	[[Category:GPU computing]]		[[Category:GPU computing]]

Bruce1ee: fixed lint errors – stripped tags

2025-06-07T23:59:16Z

fixed lint errors – stripped tags

← Previous revision		Revision as of 23:59, 7 June 2025
Line 15:		Line 15:
	* GPU for the Web {{abbr\|CG\|Community Group}}		* GPU for the Web {{abbr\|CG\|Community Group}}
	}}		}}
	\| editors = ~~{{Plainlist\|}}~~		\| editors =
	}}		}}

MehmetOguzDerin: Infobox

2025-06-07T19:32:02Z

Infobox

@@ Line 1: / Line 1: @@
 {{Short description|Shading language for WebGPU}}
 {{distinguish|OpenGL Shading Language|High-Level Shader Language}}
 '''WebGPU Shading Language''' ('''WGSL''') is a [[High level programming language|high-level]] [[shading language]] with a syntax inspired by [[Rust (programming language)|Rust]].<ref name="wgsl-spec">{{cite web |title=WebGPU Shading Language |url=https://www.w3.org/TR/WGSL/ |publisher=W3C |access-date=2024-01-20}}</ref> It was initially developed by the [[W3C]] [[GPU for the Web Community Group]] to provide developers with a modern, safe, and portable shading language for the [[WebGPU]] [[Application programming interface|API]].<ref name="gpuweb-explainer">{{cite web |title=WebGPU Explainer |url=https://gpuweb.github.io/gpuweb/explainer/ |publisher=W3C GPU for the Web Community Group |access-date=2024-01-20}}</ref> WGSL is designed to be compiled to [[SPIR-V]] or other intermediate representations, enabling execution across different graphics hardware while maintaining security and portability requirements essential for web applications.<ref name="wgsl-spec"/>

MehmetOguzDerin: Add some references

2025-06-07T19:23:13Z

Add some references

← Previous revision		Revision as of 19:23, 7 June 2025
Line 1:		Line 1:
	{{unreferenced\|date=June 2025}}
	{{Short description\|Shading language for WebGPU}}		{{Short description\|Shading language for WebGPU}}
	{{distinguish\|OpenGL Shading Language\|High-Level Shader Language}}		{{distinguish\|OpenGL Shading Language\|High-Level Shader Language}}

	'''WebGPU Shading Language''' ('''WGSL''') is a [[High level programming language\|high-level]] [[shading language]] with a syntax inspired by [[Rust (programming language)\|Rust]]. It was initially developed by the [[W3C]] [[GPU for the Web Community Group]] to provide developers with a modern, safe, and portable shading language for the [[WebGPU]] [[Application programming interface\|API]]. WGSL is designed to be compiled to [[SPIR-V]] or other intermediate representations, enabling execution across different graphics hardware while maintaining security and portability requirements essential for web applications.		'''WebGPU Shading Language''' ('''WGSL''') is a [[High level programming language\|high-level]] [[shading language]] with a syntax inspired by [[Rust (programming language)\|Rust]].<ref name="wgsl-spec">{{cite web \|title=WebGPU Shading Language \|url=https://www.w3.org/TR/WGSL/ \|publisher=W3C \|access-date=2024-01-20}}</ref> It was initially developed by the [[W3C]] [[GPU for the Web Community Group]] to provide developers with a modern, safe, and portable shading language for the [[WebGPU]] [[Application programming interface\|API]].<ref name="gpuweb-explainer">{{cite web \|title=WebGPU Explainer \|url=https://gpuweb.github.io/gpuweb/explainer/ \|publisher=W3C GPU for the Web Community Group \|access-date=2024-01-20}}</ref> WGSL is designed to be compiled to [[SPIR-V]] or other intermediate representations, enabling execution across different graphics hardware while maintaining security and portability requirements essential for web applications.<ref name="wgsl-spec"/>

	==Background==		==Background==
	Traditional web graphics programming relied on [[WebGL]], which used [[OpenGL Shading Language\|GLSL ES]] for shader programming. However, as web applications became more sophisticated and demanded better performance, the need for a more modern graphics API became apparent. WebGPU was developed to address these needs, providing access to modern GPU features while maintaining the security and portability requirements of the web platform.		Traditional web graphics programming relied on [[WebGL]], which used [[OpenGL Shading Language\|GLSL ES]] for shader programming. However, as web applications became more sophisticated and demanded better performance, the need for a more modern graphics API became apparent.<ref name="webgpu-w3c">{{cite web \|title=WebGPU \|url=https://www.w3.org/TR/webgpu/ \|publisher=W3C \|access-date=2024-01-20}}</ref> WebGPU was developed to address these needs, providing access to modern GPU features while maintaining the security and portability requirements of the web platform.<ref name="gpuweb-explainer"/>

	==Shader Types==		==Shader Types==
	WGSL supports multiple shader stages:		WGSL supports multiple shader stages:<ref name="wgsl-spec"/>

	===Vertex Shaders===		===Vertex Shaders===
	Process individual vertices, transforming positions and computing per-vertex data for rasterization.		Process individual vertices, transforming positions and computing per-vertex data for rasterization.<ref name="wgsl-spec"/>

	===Fragment Shaders===		===Fragment Shaders===
	Execute for each fragment, computing final color values and depth information.		Execute for each fragment, computing final color values and depth information.<ref name="wgsl-spec"/>

	===Compute Shaders===		===Compute Shaders===
	Perform general-purpose parallel computations on the GPU, supporting various algorithms beyond traditional graphics rendering.		Perform general-purpose parallel computations on the GPU, supporting various algorithms beyond traditional graphics rendering.<ref name="wgsl-spec"/>

	==See also==		==See also==
Line 27:		Line 26:
	===Other shading languages===		===Other shading languages===
	* [[OpenGL Shading Language\|GLSL]], shading language for OpenGL		* [[OpenGL Shading Language\|GLSL]], shading language for OpenGL
	* [[High-Level Shader Language\|HLSL]], Microsoft's shading language for Direct3D		* [[High-Level Shader Language\|HLSL]], Microsoft's shading language for Direct3D
	* [[Metal Shading Language]], Apple's shading language for Metal		* [[Metal Shading Language]], Apple's shading language for Metal
	* [[Cg (programming language)\|Cg]], NVIDIA's C-based shading language		* [[Cg (programming language)\|Cg]], NVIDIA's C-based shading language
Line 37:		Line 36:
	==External links==		==External links==
	* [https://www.w3.org/TR/WGSL/ WebGPU Shading Language Specification] - Official W3C specification		* [https://www.w3.org/TR/WGSL/ WebGPU Shading Language Specification] - Official W3C specification
	* [https://gpuweb.github.io/gpuweb/ WebGPU Specification] - The broader WebGPU API specification		* [https://gpuweb.github.io/gpuweb/ WebGPU Specification] - The broader WebGPU API specification
	* [https://github.com/gpuweb/gpuweb/tree/main/wgsl WebGPU Working Group on GitHub] - Development repository		* [https://github.com/gpuweb/gpuweb/tree/main/wgsl WebGPU Working Group on GitHub] - Development repository

John B123: Added tags to the page using Page Curation (unreferenced)

2025-06-07T19:10:52Z

Added tags to the page using Page Curation (unreferenced)

← Previous revision		Revision as of 19:10, 7 June 2025
Line 1:		Line 1:
			{{unreferenced\|date=June 2025}}
	{{Short description\|Shading language for WebGPU}}		{{Short description\|Shading language for WebGPU}}
	{{distinguish\|OpenGL Shading Language\|High-Level Shader Language}}		{{distinguish\|OpenGL Shading Language\|High-Level Shader Language}}

MehmetOguzDerin: Create page for WGSL (to be further elaborated)

2025-06-07T18:30:59Z

Create page for WGSL (to be further elaborated)

← Previous revision		Revision as of 18:30, 7 June 2025
Line 1:		Line 1:
			{{Short description\|Shading language for WebGPU}}
	#REDIRECT [[WebGPU#Technology]]
			{{distinguish\|OpenGL Shading Language\|High-Level Shader Language}}

			'''WebGPU Shading Language''' ('''WGSL''') is a [[High level programming language\|high-level]] [[shading language]] with a syntax inspired by [[Rust (programming language)\|Rust]]. It was initially developed by the [[W3C]] [[GPU for the Web Community Group]] to provide developers with a modern, safe, and portable shading language for the [[WebGPU]] [[Application programming interface\|API]]. WGSL is designed to be compiled to [[SPIR-V]] or other intermediate representations, enabling execution across different graphics hardware while maintaining security and portability requirements essential for web applications.
	{{Rcat shell\|
	{{R with possibilities}}
	{{R printworthy}}
	}}
	{{wikidata redirect\|Q117769352}}

			==Background==
			Traditional web graphics programming relied on [[WebGL]], which used [[OpenGL Shading Language\|GLSL ES]] for shader programming. However, as web applications became more sophisticated and demanded better performance, the need for a more modern graphics API became apparent. WebGPU was developed to address these needs, providing access to modern GPU features while maintaining the security and portability requirements of the web platform.

			==Shader Types==
			WGSL supports multiple shader stages:

			===Vertex Shaders===
			Process individual vertices, transforming positions and computing per-vertex data for rasterization.

			===Fragment Shaders===
			Execute for each fragment, computing final color values and depth information.

			===Compute Shaders===
			Perform general-purpose parallel computations on the GPU, supporting various algorithms beyond traditional graphics rendering.

			==See also==
			* [[WebGPU]], the graphics API that uses WGSL
			* [[SPIR-V]], intermediate shader representation
			* [[W3C]], the organization developing WebGPU and WGSL

			===Other shading languages===
			* [[OpenGL Shading Language\|GLSL]], shading language for OpenGL
			* [[High-Level Shader Language\|HLSL]], Microsoft's shading language for Direct3D
			* [[Metal Shading Language]], Apple's shading language for Metal
			* [[Cg (programming language)\|Cg]], NVIDIA's C-based shading language
			* [[Open Shading Language]], offline rendering shading language

			==References==
			{{Reflist}}

			==External links==
			* [https://www.w3.org/TR/WGSL/ WebGPU Shading Language Specification] - Official W3C specification
			* [https://gpuweb.github.io/gpuweb/ WebGPU Specification] - The broader WebGPU API specification
			* [https://github.com/gpuweb/gpuweb/tree/main/wgsl WebGPU Working Group on GitHub] - Development repository

			{{W3C standards}}
			{{Computer graphics}}

			{{DEFAULTSORT:WebGPU Shading Language}}
	[[Category:Shading languages]]		[[Category:Shading languages]]
			[[Category:Web standards]]
			[[Category:W3C standards]]
			[[Category:Computer graphics]]
			[[Category:GPU computing]]