WebGL

Optimal way to render multiple scenes with large numbers of objects in Three.js

由 |▌冷眼眸甩不掉的悲伤 提交于 2019-12-22 06:49:04
问题 Imagine that you want to draw two scenes, each with hundreds of spheres, and provide the ability to switch between these scenes. What is an optimal way to do this? Currently a switch takes about 4 to 5 seconds because I am deleting, creating, and drawing all of the spheres on each switch. Below is an example of the code that runs on a scene switch. clearObjects(); resetCamera(); for(var i = 0; i < 500; i++) { var geometry = new THREE.SphereGeometry(radius, 50, 50); var material = new THREE

WebGL warning: “Attribute 0 is disabled. This has significant performance penalty”

由 我只是一个虾纸丫 提交于 2019-12-22 06:36:44
问题 When I run the JavaScript/WebGL code below (please scroll down), I see the following warning message in my development console: [.WebGLRenderingContext] PERFORMANCE WARNING: Attribute 0 is disabled. This has significant performance penalty The code below successfully draws a white dot on the canvas. However, I want the warning to go away . What do I need to change in the code below to make it stop appearing? The HTML: <!DOCTYPE html> <html> <body> <canvas id="canvas" width="100" height="100">

WebGL: Everything is blurry despite using same code

由 落爺英雄遲暮 提交于 2019-12-22 05:35:23
问题 Just starting out with WebGL, trying to draw some basic lines, not even polygons. I found a few examples, copy-pasted them locally and run them out of Firefox, they look good: sharp, clearly defined edges. Then, I create my own project, refactoring the (bad!) samle code, using RequireJS to load, etc, the sample still works but now my edges/points/lines are all BLURRY. Like some bad antialiasing setting is messing everything up. I tried everything, at first my code looked somewhat different

Does webGL contain push/popMatrix?

由 橙三吉。 提交于 2019-12-22 05:18:33
问题 Does webGL contain push/popMatrix? and if not, how would I go about recreating them? 回答1: No, WebGL is based off of OpenGL ES 2.0, so there is no built in matrix management or fixed function pipeline. The model view and projection matrices need to be completely managed in your own code and passed to shaders at draw time. You really don't need push and pop matrix if you are using a scene graph or some kind of other similar scene management system. All you really need is a good matrix and

WebGL: enablevertexattribarray index out of range

由 廉价感情. 提交于 2019-12-22 03:51:23
问题 Here my vertex and fragment shaders: <script id="shader-fs" type="x-shader/x-fragment"> precision mediump float; uniform sampler2D uSampler; varying vec4 vColor; varying vec2 vTextureCoord; void main(void) { gl_FragColor = vColor; // gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t)); } </script> <script id="shader-vs" type="x-shader/x-vertex"> attribute vec3 aVertexPosition; attribute vec4 aVertexColor; attribute vec2 aTextureCoord; uniform mat4 uMVMatrix; uniform

How to change one texture image of a 3d model(maya ) in three.js at runtime

由 匆匆过客 提交于 2019-12-22 00:55:21
问题 This site is loading a maya model using three.js. This model has Below texture pictures Here is the JS var SCREEN_WIDTH = window.innerWidth; var SCREEN_HEIGHT = window.innerHeight; var container; var camera, scene; var canvasRenderer, webglRenderer; var mesh, zmesh, geometry, materials; var windowHalfX = window.innerWidth / 2; var windowHalfY = window.innerHeight / 2; var meshes = []; function init() { container = document.createElement('div'); document.body.appendChild(container); camera =

Passing color to fragment shader from javascript

由 自作多情 提交于 2019-12-21 23:07:12
问题 I am currently learning webgl and have a question. I am trying to make a triangle and passing the color info into fragment shader from js file. The following is my js code. var VSHADER_SOURCE = 'attribute vec4 a_Position;\n'+ 'attribute vec4 a_Color;\n'+ 'varying vec4 v_Color;\n'+ 'void main(){\n'+ 'gl_Position = a_Position;\n'+ 'v_Color = a_Color;\n'+ '}\n'; var FSHADER_SOURCE = 'precision highp float;\n'+ 'varying vec4 v_Color;\n'+ 'void main() {\n'+ 'gl_FragColor = v_Color;\n'+ '}\n';

Serve three.js?

由 孤人 提交于 2019-12-21 22:12:12
问题 I'm trying to serve the example found here over a [Node] http server with socket.io. The example runs just fine. The code below... var app = require('http').createServer(handler) , io = require('socket.io').listen(app) , fs = require('fs') app.listen(8086); function handler (req, res) { fs.readFile(__dirname + '/spinnycube.html', function (err, data) { if (err) { res.writeHead(500); return res.end('Error loading spinnycube.html'); } res.writeHead(200); res.end(data); }); } io.sockets.on(

Coloring rectangle in function of distance to nearest edge produces weird result in diagonals

由 北战南征 提交于 2019-12-21 21:37:18
问题 I'm trying to color a rectangle in ShaderToy/GLSL in function of each pixel's distance to the nearest rectangle edge. However, a weird (darker) result can be seen on its diagonals: I'm using the rectangle UV coordinates for it, with the following piece of code: void mainImage( out vec4 fragColor, in vec2 fragCoord ) { // Normalized pixel coordinates (from 0 to 1) vec2 uv = fragCoord/iResolution.xy; vec2 uvn=abs(uv-0.5)*2.0; float maxc=max(uvn.y,uvn.x); vec3 mate=vec3(maxc); fragColor = vec4

Unproject results for object picking

由 半城伤御伤魂 提交于 2019-12-21 21:27:51
问题 There are several references to this around the web, including from stackoverflow. I have an unproject method which returns x,y coordinates which are returning in range of -1 and 1. Im wondering if these values are correct. If so, then what do i do with these values, multiply b the cameras position? Reference: How to convert mouse coordinate on screen to 3D coordinate Updated I found a bug in my matrix library, where I was missing some matrix components, I think it was in the multiplication
订阅 WebGL