GLSL 和 HLSL 有什么区别？把同一个纹理效果写两遍
比较语法前先确定环境：这里的 GLSL 片段着色器面向 WebGL 2，HLSL 像素着色器面向 Direct3D 11 / Shader Model 5。两者都采样同一张图片，并沿 x 方向逐渐混入暖色。本站只运行 GLSL；HLSL 版本需要 Direct3D 程序负责编译并绑定资源。
先固定问题
对照语言时先固定环境：这里的 GLSL 代码针对 WebGL 2 的片段阶段，HLSL 对照针对 Direct3D 11 / Shader Model 5 像素阶段。两边都采样同一张图，沿横坐标把原色混向暖色。网站运行的是 GLSL；HLSL 代码需要由 Direct3D 宿主编译并绑定资源。
vec2 与 float2 很像，但纹理与采样器并不是简单改名：GLSL sampler2D 将采样入口合在一起，HLSL 将 Texture2D 和 SamplerState 分开。uniform 数据在 HLSL 中通常通过常量缓冲传入；片段输出也由 out 变量变成 SV_Target 语义。
关键代码
// GLSL ES 3.00 fragment, with vUv supplied by a vertex shader:
#version 300 es
precision highp float;
uniform sampler2D image;
in vec2 vUv;
out vec4 color;
void main(){
vec3 source=texture(image,vUv).rgb;
color=vec4(mix(source,vec3(1.0,0.65,0.3),vUv.x),1.0);
}
// HLSL SM5 pixel shader (compile separately, not as GLSL):
Texture2D image : register(t0);
SamplerState imageSampler : register(s0);
struct PixelInput { float4 position:SV_POSITION; float2 uv:TEXCOORD0; };
float4 main(PixelInput input):SV_Target {
float3 source=image.Sample(imageSampler,input.uv).rgb;
return float4(lerp(source,float3(1.0,0.65,0.3),input.uv.x),1.0);
}
按顺序验证
先对照采样结果，再对照 mix/lerp。检查顶点输出和片段输入的插值语义是否匹配，之后才迁移矩阵、深度和投影。
适用范围和常见错误
不要机械替换矩阵乘号：必须同时确认向量放在哪一侧、矩阵的数学含义、内存布局与宿主上传方式。也不能把这段 HLSL 粘到 WebGL 编译器中运行。