I have a problem with my Three.js script. I have this scene,
http://jsfiddle.net/Rhtr2/7/
but as soon as I enable shadows (uncomment spot.castShadow=true;) it gets to this:
http://prntscr.com/jx7id
I'm not sure where in my code is the problem, but I think it is something obviously.
Btw: Other Three.js examples with shadow work, so it's not a generally problem of my gpu, and there is no console output.
You have a lot of mistakes in your fiddle. Please see the three.js examples for how to add a renderer to the DOM correctly.
Also, you need to experiment until you understand how rotations work in three.js.
And you need to set your shadow camera near and far planes correctly.
Here is an updated fiddle: http://jsfiddle.net/Rhtr2/58/
Yikes! Fiddle Version 58! Read the jsfiddle FAQ. You do not need to "update" your fiddle to run it.
Related
With AIR 24 release we are able to set anti aliasing on Stage3D now, but there are some issues with it. Can anybody help how to use it in right way without changing entire project code ?
The issue I have is that anti alias works great, and no more jagged edges, but there are rendering issues and I guess some texture normals are being inverted, also when using Occlusion Material there are some jagged material shadows...
Next thing I notice is when drawing Wireframe Globe with Lines Segments - the lines are visible on the globe all the time, no matter if you add some object in front or not.
So, intersecting line segments with other materials don't work at all, and lines are on the screen forever.
Please, help if you find any trick fixing the issues.
Thanks
Just to add some more information: the issue seems to happen when shareContext = true. Without Starling there is antialiasing and the lineSegments are rendered at the current depth. It would be interesting to see if it works with other sharedContext besides Starling to isolate the issue. If I find an answer I will come back and post it. It would be nice to get this working. Any idea the performance hit on mobile of having a second instance of away3d? Layering that way might be a dirty work around.
*****EDIT****
AntiAliasing on the line Segments only occurs with sharedContext. View3D class does not seem to have it's antiAlias value set anywhere and when I forced it to a value of 2, all hell broke loose.
Edit#2
Mesh appears above line segments, Sprite3D do not.
I've been writing a little planet generator using Haxe + Away3D, and deploying to HTML5/WebGL. But I'm having a strange issue when rendering my clouds. I have the planet mesh, and then the clouds mesh slightly bigger in the same position.
I'm using a perlin noise function to generate the planetary features and the cloud formations, writing them to a bitmap and applying the bitmap as the texture. Now, strangely, when I deploy this to iOS or C++/OSX, it renders exactly how I wanted it to:
Now, when I deploy to WebGL, it generates an identical diffuse map, but renders as:
(The above was at a much lower resolution, due to how often I was reloading the page. The problem persisted at higher resolutions.)
The clouds are there, and the edges look alright, wispy and translucent. But the inside is opaque and seemingly being rendered differently (each pixel is the same color, only the alpha channel is changed)
I realize this is likely something to do with how the code is ultimately compiled/generated in haxe, but I'm hoping it's something simple like a render setting or blending mode I'm not setting. But since I'm not even sure exactly what is happening, I wouldn't know where to look.
Here's the diffuse map being produced. I overlaid it on red so the clouds would be viewable.
Bitmapdata.perlinNoise does not work on html5.
You should implement it by yourself, or you could use pre-rendered image.
public function perlinNoise (baseX:Float, baseY:Float, numOctaves:UInt, randomSeed:Int, stitch:Bool, fractalNoise:Bool, channelOptions:UInt = 7, grayScale:Bool = false, offsets:Array = null):Void {
openfl.Lib.notImplemented ("BitmapData.perlinNoise");
}
https://github.com/openfl/openfl/blob/c072a98a3c6699f4d334dacd783be947db9cf63a/openfl/display/BitmapData.hx
Also, WebGL-Inspector is very useful for debugging WebGL apps. Have you used it?
http://benvanik.github.io/WebGL-Inspector/
Well, then, did you upload that image from ByteArray?
Lime once allowed access ByteArray with array index operator, even though it shouldn't on js. This is fixed in the lastest version of Lime to avoid mistakes.
I used __get and __set method instead of [] to access a byte array.
Away3d itself might be the cause of this issue too, because the code of backend is generated from different source files depending on the target you use.
For example, byteArrayOffset parameter of Texture.uploadFromByteArray is supported on html5, but not on native.
If away3d is the cause of the problem, which part of the code is causing the problem? I'm not sure for now.
EDIT: I've also experienced a problem with OpenFL's latest WebGL backend. I think legacy OpenFL doesn't have this problem. OpenFL's sprite renderer was changing colorMask (and possibly other OpenGL render states) without my knowledge! This problem occured because my code and OpenFL's sprite renderer was actually using the same OpenGL context. I got rid of this problem by manually disabling OpenFL's sprite renderer.
I was asking myself how I could obtain an iOS 7 like blur/transparency effect. Something like this:
(source: ilounge.com)
I'd like to apply this to a whole QDialog. I know how to obtain a nice transparency, but not how to get this blur.
Can someone help?
Thanks a lot!
Basically, you need to first get a screenshot of the desktop. Then you need to blur it. Then probably save the image to the harddrive. Then you need to set it as the background for your dialog.
And then you need to make the background for each button transparent, too.
If you use QGraphicsView or OpenGL, the last three steps may be very different.
http://qt-project.org/doc/qt-5.0/qtgui/qscreen.html#grabWindow
http://qt-project.org/doc/qt-5.0/qtwidgets/desktop-screenshot.html
Lines of code where it actually grabs the screen:
QScreen *screen = QGuiApplication::primaryScreen();
if (screen)
originalPixmap = screen->grabWindow(0);
In Qt 4.8, it used to be done this way:
http://qt-project.org/doc/qt-5.0/qtgui/qpixmap.html#grabWindow
To blur the screenshot, use this:
http://doc-snapshot.qt-project.org/4.8/qgraphicsblureffect.html
You may need to save it to the harddrive for QStylesheets to be able to find it.
To set the background image, try something like this:
http://qt-project.org/doc/qt-5.0/qtwidgets/stylesheet-reference.html#background-image-prop
Example of how to set a stylesheet:
qApp->setStyleSheet("QLineEdit { background-color: yellow }");
http://qt-project.org/doc/qt-4.8/stylesheet-examples.html
http://qt-project.org/forums/viewthread/1397
Hope that helps.
Thanks a lot for your help phyatt, I succeeded. Although my code works, the result is not as pretty as iOS':
iOS7-like blur with Qt
however, I'm going to post the whole code on my website, I'll post the link here in a while.
Stay tuned!
[EDIT] here's the link to the detailed how-to: iOS7 like blur effect with QT
I would like to apply a color saturation on the entire final renderer.
Is there an easy way to do it without using shaders ?
I don't know anything about DirectX :x
I saw an "Effect" parameter in spriteBatch.Begin() but i didn't find any tutorial about it :s
Hope you can guide me.
You need a shader to this. A shader is an Effect.
You can create a new effect by right clicking a content project, clicking "Add New Item", and selecting a "Effect" file. The resulting .fx file is in the HLSL language. It will be compiled by the content pipeline, and you an load it with:
Effect myEffect = Content.Load<Effect>("myEffect");
There is an official example of how to use effects with SpriteBatch here (if you want desaturation, there's an example in there). And this blog post may also be useful.
I won't reproduce the code for a saturation effect here, but you can find several examples via Google. Here is one example on the GameDev site.
I've created an html page with a jQueryUI slider in one div and a THREE.CubeGeometry in another (see http://codesigntools.com/sample7). The idea is to scale the cube using a global variable (slider1val) which is controlled by the slider. I've looked here and here but no avail. You can see from the linked code that I'm trying to make changes to the cube within the 'animate' function. Is that right?
I'm pretty new to js and to Three.js but I've used processing quite a bit so maybe I'm going about this the wrong way. Is there an example of someting similar I could look at, or could somebody walk me through the process of accessing and manipulating the cube's size with a global variable?
Thanks!
Answering my own question in the hopes that it will help somebody else:
Both comments were correct:
I had to define the cube globally and then act on its scale from
inside my updateGeom() function
Cory Gross had a good
example (now a dead link).
For in-depth example, please see on github here