小编pai*_*ead的帖子

铬帆布检查员2015

我使用了这个漂亮的功能,铬有很长一段时间称为"画布检查员".这是一个必须手动启用的实验性开发功能.

通过像THREE.js这样的东西使用webgl非常有帮助,你可以轻松地创建一堆不受欢迎的绘制调用.

此外,它可以在任何网站上工作,你可以简单地拍摄快照,看看画布上发生了什么.

它......有一天奇迹般地消失了,谷歌并没有提供任何见解.

我尝试了一些扩展,但他们感觉不太好,或者我甚至无法让他们工作.还有另一种方法可以让它重新融入Chrome吗?

html5 google-chrome canvas

26
推荐指数
3
解决办法
2万
查看次数

如何使用导入语法加载三轨道控件?

有人试过在 ReactJS 中使用 OrbitControls 函数吗?这是我写的示例代码:

import React, { Component } from 'react';
import 'tachyons';
import * as THREE from 'react';
import OrbitControls from 'three-orbitcontrols';
class App extends Component {
render() {
...
//Controls
const controls = new OrbitControls(camera, renderer.domElement)
controls.dampingFactor = 0.25
controls.enableZoom = false
Run Code Online (Sandbox Code Playgroud)

它返回以下错误:

./node_modules/three-orbitcontrols/OrbitControls.js
1054:70-89 "export 'OrbitControls' (imported as 'THREE') was not found in 'three'
Run Code Online (Sandbox Code Playgroud)

有谁知道如何解决这个问题?

javascript three.js reactjs

15
推荐指数
3
解决办法
1万
查看次数

除了属性之外,还为结构化对象创建变量

我有:

const { state: { mode } } = this

console.log(mode) //'mode'
console.log(state) //undefined
Run Code Online (Sandbox Code Playgroud)

我也想声明state变量.

有没有办法在不将其分成两个陈述的情况下对其进行解构?

const { state } = this
const { mode } = state
Run Code Online (Sandbox Code Playgroud)

javascript ecmascript-6

13
推荐指数
1
解决办法
560
查看次数

webgl 着色器调试/性能/成本

我一直在使用 Three.js 来实验和学习 GLSL 和 WebGL。我来自 3D 艺术世界,所以我了解网格、3D 数学、光照等概念。虽然我查阅了 OpenGL 和 WebGL 文献(以及 gpu gems、eric lengyels 数学书等),但我似乎错过了一些关键的东西适用于图形的 CS 概念。

目前,我正在使用颜色进行调试,并使用画布检查器来查看绘制调用需要多长时间。

我感兴趣的是这样的问题:

  1. GLSL 函数有多重。例如,在性能、MAD 指令等方面,除法与乘法或 sin 相比究竟如何?
  2. 假设你有这样的东西

    vec2 normalizedCoord = gl_FragCoord.xy / uniform_resolution.xy;
    vs
    vec2 normalizedCoord = gl_FragCoord.xy * uniform_resolution_inverse.xy;
    vs
    ... the same with lowp/mediump/highp
    
    Run Code Online (Sandbox Code Playgroud)

    精度/性能会发生什么变化?

  3. 或者类似的东西

    vec4 someVec4 = ...;
    
    float sum = dot(someVec4,vec4(1.));
    vs 
    float sum = someVec4.x + someVec4.y + someVec4.z + someVec4.w;
    
    Run Code Online (Sandbox Code Playgroud)
  4. 例如,当进行某种采样(SSAO 或类似的操作)时,纹理查找有何含义?

这是迈克尔·亚伯拉什·布莱克(Michael Abrash Black)书中可以找到的信息类型吗?

如果有人可以帮助我更好地表达这个问题,我将不胜感激:)

shader glsl webgl

5
推荐指数
1
解决办法
1383
查看次数

dat.gui单选按钮

我正在使用三个js中的复选框。我创建了一个用户控制面板,其中添加了复选框。我想要做的是当我单击任何一个复选框而另一个复选框已经被选中前一个复选框时应该不受检查。所以任何人都可以告诉我该怎么做。

这是我为复选框编写的代码。

function addDatGui(){
            var gui = new dat.GUI();

            parameters = {
                a:false,
                b:false,
                c:false
            }
            var first = gui.addFolder("Plastic");
                var pos1 = first.add(parameters,'a').name('Possitive Charge');
                var neg1 = first.add(parameters,'b').name('Negative Charge');
                var neu1 = first.add(parameters,'c').name('Neutral');
            var second = gui.addFolder("Glass");
                var pos2 = second.add(parameters,'a').name('Possitive Charge');
                var neg2 = second.add(parameters,'b').name('Negative Charge');
                var neu2 = second.add(parameters,'c').name('Neutral');
              pos1.onChange(PCharge);
              neg1.onChange(Ncharge);
              neu1.onChange(NeCharge);
              var show = gui.add(parameters,'a').name('Show Charge'); 
}
Run Code Online (Sandbox Code Playgroud)

这就是我现在所拥有的

javascript dat.gui

4
推荐指数
1
解决办法
811
查看次数

三.js 法线贴图渲染方式不同 windows/mac

我写了一个着色器,使用 3ds max 生成的法线贴图。我在windows上得到了无缝结果 ,但我在 mac 上看到了接缝。这可能与我开发法线贴图的方向有关(但我再次相信我在 opengl 模式下运行 chrome),还是某种精度问题?有没有没有mac的调试方法?

根据下面的 gmans 回答,我已添加

gl.pixelStorei(gl.UNPACK_COLORSPACE_CONVERSION_WEBGL, gl.NONE);
Run Code Online (Sandbox Code Playgroud)

链接在这里

webgl法线贴图接缝

textures webgl three.js glsles

2
推荐指数
1
解决办法
539
查看次数

什么是 THREE.DirectGeometry?

我唯一能找到的是:

DirectGeometry 是一个内部类,您通常不应该弄乱它

不久前它曾被称为“DynamicGeometry”?

我搞乱了 Three.js 的很多内部结构,比如制作自己的着色器、扩展库、制作自定义缓冲区几何形状等。

我的理解是,它THREE.Geometry给了我很多易于导航的结构,但会带来性能成本。在某些时候还需要转换为 buffer 几何形状。在频谱的另一端,我有一个THREE.BufferGeometry可以组装的数组,进而THREE.BufferAttributes使用类型化数组。

直接几何适合哪里?

three.js

2
推荐指数
1
解决办法
2903
查看次数