小编gma*_*man的帖子

在我的WebGL中,在JavaScript控制台中,我看到了警告

PERFORMANCE WARNING: Some textures are unrenderable.

这是什么意思？

我希望能够OES_texture_half_float在WebGL中使用扩展并提供我自己的数据,但Float16Array在JavaScript中没有.那么如何生成半浮点数据呢？

在两个场景中,转换必须在glMatrix中交换.

即在glMatrix中实现1):

mat4.translate(modelViewMatrix, modelViewMatrix, [0.6, 0.0, 0.0]);
mat4.rotateZ(modelViewMatrix, modelViewMatrix, degToRad(45));

为什么转换顺序颠倒了？

使用three.js,我想对单个场景应用单独的后处理效果,然后将所有这些场景组合成最终渲染.为此,我使用的是three.js Effects Composer.

const radialBlurShader = {
	uniforms: {
		"tDiffuse": { value: null },
	},
	vertexShader: `
		varying vec2 vUv;
		void main() {
			vUv = uv;
			gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
		}
	`,

	fragmentShader: `
		uniform sampler2D tDiffuse;
		varying vec2 vUv;

    const float strength = 0.7;
    const int samples = 50;

		void main() {
      vec4 col = vec4(0);

      vec2 dir = vec2(0.5) - vUv;
      for (int i = 0; i < samples; i++) {
        float amount = …

基本上我想要继承功能

Base = function() { };

Base.prototype.foo = function() {
  console.log("base foo");
};

Derived = function() { };

somelib.inherit(Derived, Base);

Derived.prototype.foo = function() {
  console.log("derived foo");
}

d = new Derived():
d.foo();

我想要它打印

derived foo
base foo

是的我知道我可以显式调用Base.prototype.foo.call(this); 我只是想知道是否有一种模式可以自动调用被覆盖的超类函数.我试图解决的问题是2倍.

1. 派生类不应该记得调用它们的父方法,它只是自动发生.
2. 如果1.不可能发生那么至少我想Derived不要叫名字Base,因为那很脆弱.相反,我希望它调用父类或其他东西,所以你不必知道基数.这样,如果您更改基础的名称,则不必修复每个派生类.

我在找什么

在填充整个场景的three.js场景中显示网格.在这种情况下,场景是整个窗口.

此网格表示3D表面,可以使用鼠标移动使用THREE.TrackballControls此网格面向相机,因此最初它看起来像一个平面(2D)表面,直到使用鼠标拉动轨迹球.

网格线的宽度应等于渲染器的宽度.

我做了什么

我已经为我到目前为止所做的工作设置了一个有效的jsFiddle.

首先,我找到场景的边界(所有这些都在jsFiddle中),

App = function(sceneContainerName) {
   this.sceneContainerName = sceneContainerName;

   this.SCREEN_WIDTH = window.innerWidth;
   this.SCREEN_HEIGHT = window.innerHeight;

   this.MAX_X = this.SCREEN_WIDTH / 2;
   this.MIN_X = 0 - (this.SCREEN_WIDTH / 2);
   this.MAX_Y = this.SCREEN_HEIGHT / 2;
   this.MIN_Y = 0 - (this.SCREEN_HEIGHT / 2);

   this.NUM_HORIZONTAL_LINES = 50;

   this.init();

};

设置three.js

init: function() {
   // init scene
   this.scene = new THREE.Scene();

   // init camera
   // View Angle, Aspect, Near, Far
   this.camera = new THREE.PerspectiveCamera(45, this.SCREEN_WIDTH / this.SCREEN_HEIGHT, …

我真的很难理解d3 area和stack布局的东西.我尝试制作我认为最小的例子,但没有出现,事实上它在控制台中打印错误.我得不到什么？这是代码.

var svg = d3.select("body").append("svg")
    .attr("width", 400)
    .attr("height", 300)

var testData = [
  [ 0, 10],
  [10, 20],
  [20, 30],
  [30, 20],
];

svg.selectAll("path.area")
    .data(testData)
  .enter().append("path")
    .style("fill", "#ff0000")
    .attr("d", d3.svg.area());

有人决定做一个快速测试,看看本机客户端在速度方面与javascript的比较.他们通过运行10 000 000 sqrt计算并测量所花费的时间来做到这一点.结果用javascript:0.096秒,用NaCl:4.241秒......怎么会这样？速度不是首先使用NaCl的原因之一吗？或者我错过了一些编译器标志或什么？

下面是运行的代码:

clock_t t = clock();
float result = 0;
for(int i = 0; i < 10000000; ++i) {
    result += sqrt(i);
}
t = clock() - t;      
float tt = ((float)t)/CLOCKS_PER_SEC;
pp::Var var_reply = pp::Var(tt);
PostMessage(var_reply);

PS:这个问题是出现在本机客户端邮件列表中的某些内容的编辑版本

我是Three.js的新手.

我想在3D空间上绘制曲线(基于一些参数方程),使用THREE.JS,来说明绘图的路径.

为了实现这一点,我基本上尝试了两种方式:

方法一:更新几何中的值.:

var lineGeometry = new THREE.Geometry();
lineGeometry.vertices.push(new THREE.Vector3(starting_x,starting_y,starting_z));
var lineMaterial = new THREE.LineBasicMaterial({color: 0xffffff});
var line = new THREE.Mesh(lineGeometry, lineMaterial);
scene.add(line);


function render() {
    requestAnimationFrame(animate);
    //calculate x,y,z based on my equation  
    lineGeometry.vertices.push(new THREE.Vector3(x,y,z));
    renderer.render(scene, camera);
}

APPROACH TWO:使用Tween.js更新功能. 参考

var lineGeometry = new THREE.Geometry();
lineGeometry.vertices.push(new THREE.Vector3(starting_x,starting_y,starting_z));
var lineMaterial = new THREE.LineBasicMaterial({color: 0xffffff});
var line = new THREE.Mesh(lineGeometry, lineMaterial);
scene.add(line);

var position = {x: -15, y: 0, z: 0};
var target = {x: 4, y: …

我最近开始玩three.js.注意到即使有几千个简单的立方体,性能也开始下降.

所以这带来了我的主要问题:有没有办法使用three.js？我很确定这种性能下降与drawcalls有关,因此如果以某种方式使用three.js进行实例化,它可以帮助支持性能.

我知道缓冲区但是在这一点上我不可能创建一个几何缓冲区,它可以让我在运行时修改单个对象.如果有一个库来处理所有这些,这也算作一个解决方案.

不久,我正在寻找一个相当于three.js中的对象实例.任何建议表示赞赏.