I'm new to webgl and is now trying to do flat shading. I've tried Gouraud shading and it worked fine. So as my first step to implement flat shading, I put
#extension GL_OES_standard_derivatives : enable
in my fragment shader and
if (!gl.getExtension('OES_standard_derivatives'))
throw 'extension not support';
in my initGL function, with the rest part of the code remaining the same.
However, the canvas didn't show up, neither did the message. By adding some alert messages before and after the above code, I guess the problem is that gl.getExtension('OES_standard_derivatives')) didn't respond, so any code after this won't work(including the canvas part).
I've done some searching, but didn't find similar problem.
Any help would be appreciated.
If you could include more information about your environment that would help to understand the problem. Specifically these questions:
What browser are you using?
What version of WebGL are you using?
Are you using pure WebGL or a library (e.g. Three.js)?
Can you post all of your context setup code?
Here is a self contained script that reports to the console whether or not this specific extension is available:
<html>
<head>
<script>
function test() {
var canvas = document.getElementById("sandbox");
gl = canvas.getContext("webgl");
if (!gl)
console.error("WebGL failed to initialize");
else
console.debug("WebGL initialization successful");
var extension = gl.getExtension("OES_standard_derivatives");
if (!extension)
console.error("Extension 'OES_standard_derivatives' was not found");
else
console.debug("Extension 'OES_standard_derivatives' was found");
}
</script>
</head>
<body onload="test();">
<canvas id="sandbox" width="500" height="500" />
</body>
</html>
Save that to a file, open it in the browser you're using, and check the console to see what happened.
Note, in WebGL2 this extension has been promoted to the core profile. From the WebGL OES_standard_derivatives specification:
Promoted to core and no longer available as an extension in WebGL API 2.0 specification. Requires GLSL #version 300 es.
Related
I'm still trying to make the invokescriptasync work. I'm trying the following test on facebook.com and it fails with a HRESULT: 0x80020101' which normally means the script has an error in it, but I tried running the simple javascript in Chrome and IE without any problem.
private async void WebView_OnNavigationCompleted(WebView sender, WebViewNavigationCompletedEventArgs args)
{
await _webView.InvokeScriptAsync("eval", new[]
{
"document.getElementById('blueBarDOMInspector').innerHTML = '';"
});
}
Thanks
I have tested your code and the error is thrown only in case the blueBarDOMInspector is not found. I used the following simple HTML:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head></head>
<body>
<p id="blueBarDOMInspector"></p>
</body>
</html>
You can confirm that the script works as expected with this HTML. So I suspect the problem is rather on HTML side than on side of UWP.
As for ScriptNotify not working - the website must be HTTPS and be added as trusted to appxmanifest. Better solution is web allowed object. A great example was posted in a question yesterday on SO or here as a sample project. Basically you have to create a Windows Runtime Component with a class marked as [WebAllowed] and then inject it in the WebView using AddWebAllowedObject method.
For your invoking JavaScript code issue,I've checked your code, it's simple, the possible issue might be the 'blueBarDOMInspector' object, please make sure that you could get the 'blueBarDOMInspector' object successfully when the OnNavigationCompleted is fired.
For your second question:
I can invoke the script : "window.external.notify('something');" but it doesn't raise the event ScriptNotify which is another problem :-(
Please check the document:
To enable an external web page to fire the ScriptNotify event when calling window.external.notify, you must include the page's Uniform Resource Identifier (URI) in the ApplicationContentUriRules section of the app manifest.
Normally Dart is connected to HTML by means of this code:
<script type="application/dart" src="script.dart"></script>
<script src="packages/browser/dart.js"></script>
By running Build, IntellijIdea transforms the first line into <script src="script.dart.js"> and eliminates the second line, OK. But there are some problems to me:
After Build file has been created, my indentation is broken.
Google PageSpeed Insight test says "Too much http requests", or something like that.
I solved the problem this way. No Build file anymore, I use Dart2js + Terminal to create script.dart.js. As to the HTML code, I've written this little thing below instead.
<script type="application/dart" src="script.dart" id="dart-script"></script>
<script>
(function() {
if (navigator.userAgent.indexOf('(Dart)') === -1) {
var dartScript = document.querySelector('#dart-script');
dartScript.type = 'application/javascript';
dartScript.src = 'script.dart.js';
}
})();
</script>
It works very well. What do you think of it?
I haven't heard of any such problems with the Dart script tags.
Using the transformer of https://pub.dartlang.org/packages/dart_to_js_script_rewriter
removes the Dart script tag which is only required by browsers that support Dart directly, which is only Dartium, which is not supposed to be used to access the web (only for development purposes), therefore for deployment this script tag is irrelevant.
Dart plugin is the same in IntelliJ IDEA, WebStorm and other JetBrains' IDEs. And it doesn't do anything with your source code on build, it only calls pub build as if you ran it from command line (assume you are talking about 'Pub: build' action in context of pubspec.yaml file).
I'll stop here my delirium with this new polyvalent code of my own.
<script>
(function() {
var elem = document.createElement('script');
document.querySelector('body').appendChild(elem);
if (navigator.userAgent.indexOf('(Dart)') === -1) {
elem.type = 'application/javascript';
elem.src = 'script.dart.js';
}
else {
elem.type = 'application/dart';
elem.src = 'script.dart';
}
})();
</script>
Thank you for applause, that's all folks!
I'm currently having an issue with the WebView control used in a Universal WinRT app (Windows 8.1/Windows Phone 8.1).
I currently load the following piece of JavaScript into the WebView using the NatigateToString method:
<html>
<head>
<base href='MY_BASE_URL'>
</head>
<body>
<script>
var idcomments_acct = 'MY_ACC_ID';
var idcomments_post_id='POST_ID';
var idcomments_post_url='POST_URL';
</script>
<span id='IDCommentsPostTitle' style='display:none'></span>
<script type='text/javascript' src='http://www.intensedebate.com/js/genericCommentWrapperV2.js'></script>
</body>
</html>
This is the piece of code for the IntenseDebate generic install that can be found here.
The issue is with this line of code in the referenced IntenseDebate code:
load_js(document.location.protocol+"//connect.facebook.net/en_US/all.js")
This piece of code fails because document.location.protocol is set to about: in the WebView, leading to a 404 error on this call.
On the Android/iOS webviews simply setting the base URI to a http: or https: based address using their loadDataWithBaseUrl methods worked fine, but the WinRT WebView is missing a similar method. And setting the Base url in the HTML itself (like shown in the piece of code above) does work for resolving image url's and sortlike, but this method doens't change the document.location values.
Since I can't modify the referenced JS file and putting the above piece of HTML on a server isn't an option in this apps usecase, is there any way you can force the document.location.protocol to be a certain value in the WinRT webview? Or is there any other way to get this bit of HTML to work in a webview?
There isn't a direct way to do this. WebView doesn't provide any interface to override the document.location . If branching off of the protocol is a common pattern then this may be a good feature to request on http://wpdev.uservoice.com .
I'm not familiar enough with HTML/JavaScript best practices to say for sure, but most of the references I find searching for document.location.protocol warn against assuming that the protocol will always be http: or https. This may be something that IntenseDebate should fix.
That said, you may be able to get past this by injecting code into your page which finds the problem location in the DOM and changing it live. You can't change just the protocol, but you may be able to find where it is referenced and change that there. I assume it gets loaded into the commentScript.src from genericCommentWrapper2.php referenced in genericCommentWrapper2.cs and then added to the document's head.
How Can I get a DOM reference to the canvas Handle. I'm using Delphi, IE11 and the corresponding MSMHTML Type library,I suspected it's along the lines of
canvasHandle := (HTMLDoc3.getElementById('canvas') as IHTMLCanvasElement);
the Html:
<canvas id="canvas">
....
</canvas>
however this throws an exception 'Interface not supported'
TWebBrowser control, by default uses IE7 standards/rendering mode.
You need to tell the control to use latest standards.
There are a few ways of doing this.
Here are two of the ways known to me:
Either you specify FEATURE_<some feature> for your application in the registry (.e.g. FEATURE_BROWSER_EMULATION also a nice article here).
Add a "meta http-equiv-'X-UA-Compatible' content= edge" to the <head> block of a webpage to force Windows IE to use the latest standards.
This will enable your HTML5 functionality working without the need for registry tweaks.
My boss wants the following:
Requirements: Stream m4v videos from our Web-server to clients including standard web browsers (IE7, FF, Chrome, etc) and iPad!
I'm not really sure why he wants m4v...he mentioned efficiency but it may also have to do with iPad compatibility?? Anyway, I'm stuck with m4v.
I've browsed some related questions on SO, and this page is very useful as well:
http://henriksjokvist.net/archive/2009/2/using-the-html5-video-tag-with-a-flash-fallback
So if I understand correctly, HTML5 with <video> tag will take care of all my requirements (browsers & iPad) except IE up to and including IE8.
So in my code:
<div id="demo-video-flash">
<video id="demo-video" poster="snapshot.jpg" controls>
<source src="video.m4v" type="video/mp4" /> <!-- MPEG4 for Safari -->
<source src="video.ogg" type="video/ogg" /> <!-- Ogg Theora for Firefox 3.1b2 -->
</video>
</div>
<script type="text/javascript">
$(document).ready(function() { // ... a dash of jQuery.
var v = document.createElement("video"); // Are we dealing with a browser that supports <video>?
if ( !v.play ) { // If no, use Flash.
var params = {
allowfullscreen: "true",
allowscriptaccess: "always"
};
var flashvars = {
file: "video.f4v",
image: "snapshot.jpg"
};
swfobject.embedSWF("player.swf", "demo-video-flash", "480", "272", "9.0.0", "expressInstall.swf", flashvars, params);
}
});
</script>
As the link above explains, test if the browser supports <video>, and if not, fall back to flash. If the browser supports <video>, I don't need to worry about the player as the browser handles that. If it doesn't support <video>, I need to provide:
(a) A flash player.
(b) A flash-compatible copy of my .m4v video
Questions:
1) Will this solution work for my requirements?
2) Is .m4v a good format to stream to iPad? (I'm guessing yes as it's an Apple proprietary format!)
3) Is .m4v "flash-comatabile"? That is, if I send it to my flash player will it work? I've read conflicting reports on this. If it's not, then I guess I need to have a copy of my video converted to a flash-compatable format...any recommendations? (.f4v seems common but we already have a .mov file will that work?)
4) Last but not least, what's a good flash player. I'm leaning toward flowplayer (http://flowplayer.org/), however, we already have a swf player installed (http://code.google.com/p/swfobject/). Seems this latter one would work...any advantages to one or the other??
Apologies if some parts of this question don't make sense...there's alot of info about video out there and it's hard to piece it all together...hoping some answers here may help. I can refine my question as needed.
Thanks in advance!
Peter
As far as I know..., IE does not support HTML5 so the tag would be unrecognized in IE...