Javascript webgl中的着色

我一直在尝试在webgl中创建阴影，就像在这张图片中一样：在这里我们可以看到一个圆锥体、一个球体和一个灯光（我们可以用滑块改变他的位置）

我曾试图通过查看一些webgl教程网站上的多个着色示例，在html文件中编写一些代码，但现在，我甚至看不到这些形状。我肯定做错了什么，但我只是不知道在哪里。这是我的代码，我还包括了一个链接，因为它包含多个文件。提前谢谢

链接：

光影
属性向量3；
属性vec3异常；
//矩阵模型视图组合对象。
均匀mat4-uMVMatrix；
//投影矩阵
一致mat4上矩阵；
//正常矩阵。
均匀mat3非矩阵；
//卢米尔阵地。
均匀矢量位置；
//正常转换
可变vec3 vNormal；
//la方向顶点lumiere
可变vec3光线；
//la方向摄影机顶点
可变vec3-vEyeVec；
均匀矢量环境；
均匀矢量4；弥漫性；
均匀矢量镜面反射；
均匀载体材料；
均匀载体扩散；
均匀向量4μm材料特异性；
真空总管（真空）{
vec4环境产品=ulightAmbientProduct*uMaterialAlambient；
vec4 diffuseProduct=uLightDiffuse*uMaterialDiffuse；
vec4镜面反射产品=uLightSpecular*uMaterialSpecular；
vec3 pos=（uMVMatrix*vec4（1.0））.xyz；
//位置：左耳/摄像机。
常数vec3眼位=vec3（0,0，-40）；
//变换正常位置
vNormal=规格化（（uNMatrix*aVertexNormal）.xyz）；
//变换光位置
vec4 light=uMVMatrix*vec4（uLightPosition，1.0）；
vec3 lightPos=（uMVMatrix*light）.xyz；
//灯位
vLightRay=标准化（pos-lightPos）；
//矢量眼
vEyeVec=-正常化（pos）；
//最终顶点位置
gl_位置=UMV矩阵*上矩阵*向量4（1.0）；
}
#国际财务报告准则
高精度浮点；
#恩迪夫
可变vec3 vNormal；
可变vec3光线；
可变vec3-vEyeVec；
均匀vec4环境积；
均匀vec4扩散产物；
均匀vec4镜面产品；
均匀性；
真空总管（真空）
{
vec4漫反射=最大值（点（vNormal，vLightRay），0.0）*漫反射积；
vec3 H=标准化（vLightRay+vEyeVec）；
vec4镜面反射=
功率（最大值（点（V正常值，H），0.0），Ushiness）*镜面产品；
if（点（V光线，V正常）<0.0）
镜面反射=vec4（0.0,0.0,0.0,1.0）；
vec4 fColor=环境产品+漫反射+镜面反射；
F颜色a=1.0；
gl_FragColor=fColor；
}
var gl=null；//WebGL上下文
var prg=null；//程序（着色器）
var c_width=0；//变量来存储画布的宽度
变量c_高度=0；//变量来存储画布的高度
var mvMatrix=mat4.create（）；//模型视图矩阵
var pMatrix=mat4.create（）；//投影矩阵
var nMatrix=mat4.create（）；//正规矩阵
var距离=-40；
var animateFlag=false；
var对象=[]；
/**
*该程序包含一系列指令，告诉图形处理单元（GPU）
*如何处理我们经过的每个顶点和碎片。
*顶点着色器和片段着色器一起称为程序。
*/
函数initProgram（）{
var fragmentShader=utils.getShader（gl，“着色器fs”）；
var vertexShader=utils.getShader（gl，“着色器vs”）；
prg=gl.createProgram（）；
gl.attachShader（prg、vertexShader）；
gl.attachShader（prg，碎片着色器）；
总账链接计划（prg）；
如果（！总账getProgramParameter（prg，总账链接状态））{
警报（“无法初始化着色器”）；
}
德国劳埃德船级社使用计划（prg）；
prg.aVertexPosition=gl.getAttribLocation（prg，“aVertexPosition”）；
prg.aVertexNormal=gl.getAttribLocation（prg，“aVertexNormal”）；
prg.uPMatrix=gl.getUniformLocation（prg，“uPMatrix”）；
prg.uMVMatrix=gl.getUniformLocation（prg，“uMVMatrix”）；
prg.uNMatrix=gl.getUniformLocation（prg，“uNMatrix”）；
prg.umateriambient=gl.getUniformLocation（prg，“umateriambient”）；
prg.uMaterialDiffuse=gl.getUniformLocation（prg，“uMaterialDiffuse”）；
prg.uMaterialSpecular=gl.getUniformLocation（prg，“uMaterialSpecular”）；
prg.uShininess=gl.getUniformLocation（prg，“uShininess”）；
prg.uLightPosition=gl.getUniformLocation（prg，“uLightPosition”）；
prg.uLightAmbient=gl.getUniformLocation（prg，“uLightAmbient”）；
prg.uLightDiffuse=gl.getUniformLocation（prg，“uLightDiffuse”）；
prg.uLightSpecular=gl.getUniformLocation（prg，“uLightSpecular”）；
}
函数initLights（）{
//轻便制服
gl.uniform3fv（prg.uLightPosition，[4.5,3.0,15.0]）；
gl.uniform4f（prg.uLightAmbient，1.0,1.0,1.0,1.0）；
gl.uniform4f（prg.uLightDiffuse，1.0,1.0,1.0）；
gl.uniform4f（prg.uLightSpecular，1.0,1.0,1.0,1.0）；
//物体制服
gl.uniform4f（prg.uMaterialAmbient，0.1,0.1,1.0）；
gl.uniform4f（材料扩散系数，0.5,0.8,0.1,1.0）；
gl.uniform4f（prg.uMaterialSpecular，0.6,0.6,1.0）；
德国劳埃德船级社uniform1f（美国劳埃德船级社，200.0）；
}
/**
*创建AJAX请求以异步加载场景
*/
函数loadScene（）{
loadObject（'models/plane.json'）；
loadObject（'models/cone.json'，'cone'）；
loadObject（'models/sphere.json'，'sphere'）；
loadObject（'models/smallsph.json'，'lightsource'）；
}
函数getObject（别名）{
对于（var i=0；i老实说，有太多的问题需要解决。尝试让代码正常工作。首先，您确实需要学习如何进行最小的回购。您发布的代码没有运行，引用了一些不存在的脚本和不存在的数据

代码基于的教程似乎很旧。2020年没有人使用XMLHttpRequest。没有像
requestAnimFrame
这样的函数，它是
requestAnimationFrame
。我认为这是2011年的polyfill留下的。它仍然在使用
，很少有人使用anymo
gl.uniform4fv(prg.uMaterialAmbient, object.ambient);
gl.uniform4fv(prg.uMaterialDiffuse, object.diffuse);
gl.uniform4fv(prg.uMaterialSpecular, object.specular);