标签: webgl
如何像GL_REPEAT一样重复纹理贴图？
我的游戏中有一个房子模型,我有一些房子几何材料.房子的墙上有一种材料,我有一个纹理图像来显示砖块.
var mat = new THREE.MeshPhongMaterial( {
ambient: 0x969696,
map: THREE.ImageUtils.loadTexture( 'textures/G/G0.jpg' ),
overdraw: true,combine: THREE.MultiplyOperation
} );
通过这种方式,纹理贴图就像GL_CLAMP我希望它显示一样GL_REPEAT.
我该怎么办？
如果您看不到图像,请检查此项.
推荐指数
解决办法
查看次数
需要加快我的SVG.我可以转换为WebGL或画布吗？
我有一个带有10138个零件的SVG图纸,因此它运行缓慢.
我想让它更像http://workshop.chromeexperiments.com/globe
以下是我正在考虑的解决方案/问题
- 有没有办法让SVG部件以较少处理器密集的方式呈现？
- 我可以将SVG转换为WebGL或画布吗？
- 我可以将它作为SVG运行但是通过WebGL或画布渲染吗？
我只是想让它更快......想法？
这是一个截图
推荐指数
解决办法
查看次数
WebGL - 无效操作useProgram
我正在学习WebGL和我在这个教程与照明做.我是JavaScript的新手,所以我还不太擅长调试它.我不断收到这些错误,任何人都知道我为什么会得到它们以及如何解决它？
WebGL: INVALID_OPERATION: useProgram: program not valid http://insanergamer.zxq.net/:1
WebGL: INVALID_OPERATION: getAttribLocation: program not linked http://insanergamer.zxq.net/:1
WebGL: INVALID_OPERATION: getUniformLocation: program not linked http://insanergamer.zxq.net/:1
WebGL: too many errors, no more errors will be reported to the console for this context.
的index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf 8" />
<link rel="stylesheet" href="main.css">
<script type="text/javascript" language="javascript" src="gl-matrix.js"></script>
<script type="text/javascript" language="javascript" src="webgl-utils.js"></script>
<script type="text/javascript" language="javascript" src="first.js"></script>
<script id="shader-fs" type="x-shader/x-fragment">
precision mediump float;
varying vec2 vTextureCoord;
varying vec3 vLightWeighting;
uniform sampler2D uSampler; …推荐指数
解决办法
查看次数
THREE.JS暗影对面的光影
我使用了THREE.js r49创建了2个立方体几何体和一个定向光源,在它们上投射阴影并获得结果,如下图所示.
我注意到绿色圆圈中的阴影不应该出现,因为方向光在两个立方体后面.我想这是材料问题,我尝试更改各种材料参数以及更改材料类型本身,但结果仍然相同.我还用r50和r51测试了相同的代码并得到了相同的结果.
有人可以给我一些提示如何摆脱那个阴影.
两个多维数据集都使用CubeGeometry和MeshLambertMaterial创建如下代码.
代码:
// ambient
var light = new THREE.AmbientLight( 0xcccccc );
scene.add( light );
// the large cube
var p_geometry = new THREE.CubeGeometry(10, 10, 10);
var p_material = new THREE.MeshLambertMaterial({ambient: 0x808080, color: 0xcccccc});
var p_mesh = new THREE.Mesh( p_geometry, p_material );
p_mesh.position.set(0, -5, 0);
p_mesh.castShadow = true;
p_mesh.receiveShadow = true;
scene.add(p_mesh);
// the small cube
var geometry = new THREE.CubeGeometry( 2, 2, 2 );
var material = new THREE.MeshLambertMaterial({ambient: 0x808080, color: Math.random() …推荐指数
解决办法
查看次数
改变Three.js collada对象的纹理和颜色
我最近在官方网站上使用了我的collada对象(.dae)获得了三个例子ColladaLoader.js.现在我的问题是,如何更改加载的collada对象颜色属性并添加自定义纹理？我尝试添加纹理没有运气.
这是我的代码(与原始示例略有不同):
function load_model(el) {
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var container, stats;
var camera, scene, renderer, objects;
var particleLight, pointLight;
var dae, skin;
var loader = new THREE.ColladaLoader();
loader.options.convertUpAxis = true;
loader.load( '/site_media/models/model.dae', function ( collada ) {
dae = collada.scene;
skin = collada.skins[ 0 ];
dae.scale.x = dae.scale.y = dae.scale.z = 0.90;
dae.updateMatrix();
init(el);
animate();
} );
function init(el) {
container = document.createElement( 'div' );
el.append( container );
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / …推荐指数
解决办法
查看次数
推荐指数
解决办法
查看次数
WebGL片段着色器未在if语句上正确分支
我正在开发一个实现阴影贴图的WebGL程序.在计算每个片段的深度值之后,我在末尾有一个if语句,它根据片段是否在阴影中来计算光照.
gl_FragColor = vec4(calcLighting(light0, eye_dir, eye_dir_norm, normal), 1);
if (light_tex_coord.z - depth <= 0.0) {
gl_FragColor += vec4
( calcLighting(light1, eye_dir, eye_dir_norm, normal)
, 0.0
);
}
depth阴影贴图的深度在哪里,light_tex_coord是片段在场景空间中的位置light1.light1是一个围绕模型旋转的点光源,light0是一个静态定位在相机上的点光源.
这里的问题是从不采用if分支,因此场景只light0应用于它.我检查了depth,light_tex_coord和calculateLighting正常工作.
不过,这是奇怪的事情,用以下代码替换上面的内容:
if (light_tex_coord.z - depth <= 0.0) {
gl_FragColor = vec4(0,1,0,1);
} else {
gl_FragColor = vec4(1,0,0,1);
}
使阴影区域正确绘制为红色,并且无阴影区域以绿色绘制.也就是说,正确评估分支.用这个替换它:
gl_FragColor = vec4(calcLighting(light0, eye_dir, eye_dir_norm, normal), 1);
gl_FragColor += vec4
( calcLighting(light1, eye_dir, eye_dir_norm, normal) …推荐指数
解决办法
查看次数
在WebGL中禁用特定几何体的抗锯齿
我已经编写了一个基于磁贴的引擎 - 只要在WebGL中禁用了抗锯齿,一切看起来都很好.
启用抗锯齿时,有时会渲染图块边缘的像素,这些像素主要显示为背景像素并适当填充深度缓冲区.当更强烈(更高的α)像素进入时,由于深度缓冲而被丢弃.
我确实尝试禁用深度缓冲区,并"将混合因子设置为GL_SRC_ALPHA_SATURATE(源)和GL_ONE(目标)",如下所示:http://www.glprogramming.com/red/chapter06.html .这导致绘制纯白色像素 - 不确定那里发生了什么.
我的纹理上的图形都被填充,因此WebGL不应该有过滤问题.我已经使填充极端,以确保这不是一个促成因素.
我已经glSampleCoverage()在黑暗中探索并尝试了几次射击,随机值不会产生任何价值.我不熟悉它实际上做了什么,除了一些抽象的建议外,在网上找不到任何好的例子.
我宁愿不禁用深度缓冲区.
GL_MULTISAMPLE 不可用.
我有一个带C++环境的Emscripten - 但这没关系,我可以根据需要编写内联javascript - 但我认为这是通用的OpenGL解决方案.
有没有办法在WebGL中仅为某些几何体禁用抗锯齿？
好:
坏:
推荐指数
解决办法
查看次数
WebGL使用什么版本的GLSL
这是一种每种设备的东西吗？或者它是基于浏览器？很抱歉这样一个基本问题,但我似乎无法找到一个直接的答案.
推荐指数
解决办法
查看次数
在片段着色器中线性过滤浮点纹理的伪像
我正在使用本教程中的以下代码对WebGL中的片段着色器中的浮点纹理执行线性过滤:
float fHeight = 512.0;
float fWidth = 1024.0;
float texelSizeX = 1.0/fWidth;
float texelSizeY = 1.0/fHeight;
float tex2DBiLinear( sampler2D textureSampler_i, vec2 texCoord_i )
{
float p0q0 = texture2D(textureSampler_i, texCoord_i)[0];
float p1q0 = texture2D(textureSampler_i, texCoord_i + vec2(texelSizeX, 0))[0];
float p0q1 = texture2D(textureSampler_i, texCoord_i + vec2(0, texelSizeY))[0];
float p1q1 = texture2D(textureSampler_i, texCoord_i + vec2(texelSizeX , texelSizeY))[0];
float a = fract( texCoord_i.x * fWidth ); // Get Interpolation factor for X direction.
// Fraction near to valid data.
float pInterp_q0 …推荐指数
解决办法
查看次数
标签 统计
webgl ×10
opengl-es ×4
three.js ×4
glsl ×3
javascript ×3
textures ×2
c++ ×1
canvas ×1
collada ×1
emscripten ×1
html5-canvas ×1
shader ×1
svg ×1