我从ThreeJS的WebGL渲染器开始,在没有额外库+ GLSL着色器的情况下做了一些“常规”的WebGL。我现在正试图在我的ThreeJS程序中编写自定义着色器,我注意到ThreeJS处理了许多标准的东西,比如投影和模型/视图矩阵。我的简单顶点着色器现在看起来如下:
// All of these seem to be predefined:
// vec3 position;
// mat4 projectionMatrix;
// mat4 modelViewMatrix;
// mat3 normalMatrix;
// vec3 normal;
// I added this
v
我成功地制作了一个webgl示例,全部放在一个没有包含库的文件中,并且只有正在使用的函数:
我画了一个由两个三角形组成的正方形,我让它离相机越来越远,离相机越来越近。我想了解这个部分是如何工作的:
// Now move the drawing position a bit to where we want to start
// drawing the square.
mvMatrix = [
[1,0,0,0],
[0,1,0,0],
[0,0,1,-12+Math.sin(g.loops/6)*4],
[0,0,0,1]
];
var mvUniform
我有一个问题,有时( 50到100) Internet explorer会抛出此警告,这将导致webgl呈现失败并引发:
WEBGL11257:在GPU上渲染WebGL内容花费的时间太长了。暂时切换到软件渲染。
我使用Three.js,当发生这种情况时,我的Webgl呈现器上下文将停止工作,因为它假定它使用的是GPU。然后,它将抛出x个特定于WebGL的函数的错误。
通过在注册表编辑器:中执行以下更改,可以在我的计算机上通过超过时间限制(默认为500 my )来修复此问题。
当然,这不是一个可持续的解决方案,因为运行IE11或Edge的客户端不应该这样做。我想知道是否有人偶然发现了这个
我在我的片段着色器中使用了一个sampler2D数组(这些是影子映射,最多可以有16个,所以数组比使用16个单独的变量更好)。然后,我将WebGL2上下文(const context = canvas.getContext('webgl2');)添加到正在使用的THREE.WebGLRenderer中,现在无法使程序工作:当我试图在这样的循环中访问取样器数组元素时,它说的是array index for samplers must be constant integral expressions:
uniform sampler2D samplers[MAX_SPLITS];
在OpenGL中,建议在链接程序( )之后分离和删除着色器。
但是,当我在WebGL中这样做时,Safari和Firefox似乎都有问题(而Chrome的行为与预期一样)。分离和删除着色器在WebGL中的工作方式是不同的,还是仅仅是浏览器实现没有遵循标准?
当我使用这个函数时,会出现这样的问题:
function setupShader(){
var vertexShaderSrc = document.getElementById('vertexShader').textContent;
var fragmentShaderSrc = document.ge