Dit artikel heeft een redactionele beoordeling nodig. Hoe u kunt helpen.
De Shader Editor staat toe om de vertex en de fragment shaders in te zien en deze te bewerken, die gebruikt worden door WebGL.
WebGL is een JavaScript API die interactieve 3D graphics en 2D graphics in de browser renderd, zonder plugins te gebruiken. Met WebGL voorzie je 2 programma's genaamd "shaders". Deze zijn genoemd in de bijbehorende fase van de OpenGL rendering pipeline: een vertex shader, deze levert de coördinaten voor elk nog niet getekende vertex, en een fragment shader, die de kleur levert voor elk afzonderlijke pixel.
Deze shaders zijn geschreven in OpenGL Shading Language, of GLSL. In WebGL kunnen zij op meerdere manieren worden opgenomen in een pagina: als tekst hardcoded in JavaScript bronnen, als afzonderlijke bestanden door<script> tags, of als plain text vanaf de server. JavaScript code in het bestand wordt gecompileerd door de WebGL API' en uitgevoerd op de apparaat zijn GPU.
Met de Shader Editor kun je de bron van de vertex en fragment shaders onderzoeken en bewerken.
Hier is nog een screencast. Deze laat je zien hoe je de Shader Editor kunt gebruiken voor complexe applicaties (in dit geval, de Unreal Engine demo):
De Shader Editor
De Shader Editor is standaard uitgezet. Om hem aan te zetten, opent u de Hulpmiddelen voor webontwikkelaars openen (Ctrl+Shift+I)en klik op "Shader Editor" in het "Standaard Firefox Ontwikkelaarshulpmiddelen" item. U ziet de "Shader Editor" verschijnen in uw toolbar. Klik op de Shader Editor knop en de Shader Editor zal openen.
U ziet een leeg venster met een knop: Laad de pagina opnieuw om GLSL-code te kunnen bewerken.
Om te beginnen moet u een pagina die WebGL context creëert laden. De screenshots hieronder zijn uit de Unreal Engine demo.
U ziet nu een venster verdeelt in 3 vensterruiten: een lijst met alle GLSL programma's aan de linkerzijde, de vertex shader voor het momenteel geselecteerde programma in het midden, en de fragment shader voor het momenteel geselecteerde programma aan de rechterzijde:
Programma's beheren
De linkerkolom somt alle momenteel WebGL gebruikte programma's op. Als je muis zweeft over een van deze programma's, wordt de door dat programma voorziende geometrie in het rood gemarkeerd:
Als je op het oog-icoontje klikt naast programma, aan de linkerzijde, wordt dit specifieke programma uitgeschakeld. Dit is handig voor het focussen op bepaalde shaders of het verbergen van overlappende geometrie:
Wanneer je op een specifiek programma klikt verschijnen de vertex en fragment shaders in de andere kolommen. Deze kunt u bewerken.
Shaders bewerken
In het middelste en de rechterkolom worden de vertex en fragment shaders getoont van het momenteel geselecteerde programma.
Deze programma's kunt u bewerken en het resultaat ziet u de volgende keer wanneer WebGL herlaad (bijvoorbeeld, in de volgende animatieframe). Ook kunt u bijvoorbeeld de kleuren aanpassen:
De editor highlights syntax errors in uw code:
Als u de muis op het rode rondje met witte kruis houdt, ziet u meer details over het probleem:
