小编Bre*_*ble的帖子

取消绑定WebGL缓冲区,值得吗?

在各种来源中,我看到了在使用后对"解除绑定"缓冲区的建议,即将其设置为null.我很好奇是否真的需要这个.例如

var buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);

// ... buffer related operations ...

gl.bindBuffer(gl.ARRAY_BUFFER, null); // unbinding
Run Code Online (Sandbox Code Playgroud)

一方面,它可能更适合调试,因为您可能会获得更好的错误消息,但是解除绑定缓冲区是否始终存在重大性能损失?通常建议尽可能减少WebGL调用.

performance buffer webgl

9
推荐指数
1
解决办法
2899
查看次数

去除GLSL着色器产生的波纹图案

我已经设置了这个最小的测试用例,您可以使用自定义片段着色器(jsfiddle)轻松查看通过对示波器红色进行欠采样而产生的莫尔图案.

使用GLSL删除此类模式的一般技术是什么?我认为它涉及衍生物扩展,但我从未完全理解如何实现它.我觉得我基本上要做抗锯齿吗?

var canvas = document.getElementById('canvas');
var scene = new THREE.Scene();
var renderer = new THREE.WebGLRenderer({canvas: canvas, antialias: true});
var camera = new THREE.PerspectiveCamera(75, canvas.clientWidth / canvas.clientWidth, 1, 1000);

var geometry = new THREE.SphereGeometry(50, 50, 50);
var material = new THREE.ShaderMaterial({
  vertexShader: document.getElementById('vertex-shader').textContent,
  fragmentShader: document.getElementById('fragment-shader').textContent
});
var sphere = new THREE.Mesh(geometry, material);

scene.add(sphere);

camera.position.z = 100;

var period = 30;
var clock = new THREE.Clock();
render();

function render() {
  requestAnimationFrame(render);
  
  if (canvas.width !== canvas.clientWidth || canvas.height !== canvas.clientHeight) …
Run Code Online (Sandbox Code Playgroud)

glsl webgl three.js

7
推荐指数
1
解决办法
885
查看次数

了解WebGL状态

是否有任何文档可以找到哪些文档记录了WebGL调用所需的前提条件?

我已经对WebGL基础知识有了很强的把握,但现在我正在创建自己的"框架",并且我正在深入了解.

例如,enableVertexAttribArray调用.此调用是否要求当前着色器处于"使用"状态?它在哪里存储这个"启用"标志?如果我切换着色器程序,我再次使用它时是否必须重新启用它?

我喜欢某种图表,解释所有"有状态"信息的存储位置,以及它何时会脱离上下文.

另一个例子是使用gl.bindBuffer,ARRAY_BUFFER和ELEMENT_ARRAY_BUFFER的缓冲区是否存储在不同的位置?

考虑到所有这些,是否建议在JavaScript中使用并行状态以避免运行WebGL调用?即存储'currentBuffer'对象,以避免在已经绑定的情况下反复绑定相同的缓冲区.我可以想象,在一般情况下,这变得相当多的状态重复,但可能对性能非常好.

一点基本问题,但很难找到信息.

webgl

6
推荐指数
2
解决办法
957
查看次数

标签 统计

webgl ×3

buffer ×1

glsl ×1

performance ×1

three.js ×1