标签: rendering

使用jQuery动画CSS不透明度淡化和@ font-face为Internet Explorer提供了非常难看的字体渲染?

我正在开发一个HTML/CSS/jQuery网站,试图像Flash网站一样.我不得不使用@ font-face来获得所需的字体.客户端也希望淡入文本和内容(因此它看起来像Flash文件).问题是,在Internet Explorer中,字体看起来是锯齿状和丑陋的.

我的字体CSS的CSS看起来像这样:

@font-face {
font-family: 'SansumiRegular';
src: url('../fonts/Sansumi-Bold.eot');
src: local('Sansumi Regular'), local('Sansumi-Bold'), url('../fonts/Sansumi-Bold.ttf') format('truetype');}
Run Code Online (Sandbox Code Playgroud)

...来自:http://www.fontsquirrel.com/fontface/generator

淡入淡出的jQuery是这样的:

$('#site').css({opacity: '0.0'});
... preloads the images with jQuery, and at callback do fade...
$('#site').animate({opacity: '1.0'}, 1000);
Run Code Online (Sandbox Code Playgroud)

基本上,没有办法解决我需要使用特定字体(不是标准的网络字体)的事实,我必须使用某种淡入淡出技术来"看起来像Flash文件".

这在Firefox,Safari,Chrome中看起来都很棒......但在IE中它看起来很垃圾 - 所有的锯齿状,几乎不可读.环顾四周之后,我发现这个jQuery插件旨在处理IE中的ClearType问题:http://allcreatives.net/2009/12/05/jquery-plugin-ie-font-face-cleartype-fix/

...但我感觉这是因为这导致了字体问题.也许是因为IE不支持opacity CSS命令?...但它确实在所有IE浏览器中都褪色了?!我甚至尝试了一种相对未知的技术,将不透明的背景颜色(如#FFFFFF)应用于文本渐变的元素,但这似乎仍然没有做任何事情.

一定有这个问题吗?除了这个小字体问题,该网站是完整的!

css jquery fonts internet-explorer rendering

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

AS3 x和y属性精度

在ActionScript 3(和IIRC 2)中,显示对象上的x和y属性始终存储为0.05的倍数.

所以像是一样obj.x = 66.6666的东西obj.x = 66.65

大多数时候,这没关系.但有时我最终会得到速度很慢的物体,例如每秒1个像素.1/60(fps)=每帧0.017像素.obj.x += 0.017将永远不会真正改变x值,因为它被四舍五入到最接近的0.05.
这迫使我覆盖DisplayObject的x和y属性,以便它们不会被舍入.

我可以理解舍入坐标到最接近的渲染积分值.使用更高级的渲染器,我甚至可以理解舍入到二进制可表示的一些分数(例如0.25).但0.05不能用二进制表示.

那么为什么Flash的创造者决定四舍五入到最接近的.05?这对我来说似乎是一个任意数字.

flash precision rendering actionscript-3 coordinates

6
推荐指数
2
解决办法
3827
查看次数

为什么fieldset填充会导致孩子在FF中绝对错位?

不确定这里发生了什么或我出错的地方但是与Chrome 9. IE8,Opera 11或Safari 5相比,FF3.6没有正确显示下面链接中的绿色按钮.

所有其他人把按钮放在父母的右下角,12px.FF3.6将它放在24px并且在右侧:

http://jsfiddle.net/sxkWZ/2/

任何人都知道这个问题或者我错过了一些明显的东西?

更新:确认FF4 Beta 11中的问题.考虑提交Mozilla.

谢谢,丹尼斯

css forms firefox rendering

6
推荐指数
1
解决办法
918
查看次数

强制把手模板按需渲染流星

如何强制流星模板(车把模板)通过javascript重新渲染.例如,

我有一个模板(template1.html)

<template name="template1">
</template>
Run Code Online (Sandbox Code Playgroud)

我想从我的/client目录中的任何地方强制渲染此模板.车把包里有什么可以做到的吗?

编辑:添加更多细节

我第一次创建这个模板没有任何困难,无论是通过把手还是javascript.我想刷新模板并使我的rendered回调再次运行.我有代码,在呈现该模板时将获取并显示相关数据.

<template name="template1">
     {{each items}}
      {{> template2}}
     {{/each}}
 <template/>
Run Code Online (Sandbox Code Playgroud)

如果项目中的任何数据发生变化,那么我理解,template1并且template2两者都会呈现,但是当有任何数据发生变化时会发生什么template2,我想template1再次刷新/渲染?

rendering handlebars.js meteor

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

unity3d:使用主摄像头的深度缓冲区渲染另一个摄像头视图

在我的主相机渲染后,我想将其深度缓冲区用于(或复制)到(禁用)相机的深度缓冲区.我的目标是在绘制不透明对象后使用深度缓冲区时将粒子绘制到较小的渲染目标上(使用单独的相机).我无法在单个相机中执行此操作,因为出于性能原因,目标是为粒子使用较小的渲染目标.

Unity中的替换着色器也不是一个选项:我希望我的粒子使用他们现有的着色器 - 我只是希望在绘制粒子之前用主摄像头的深度缓冲器的子采样版本覆盖粒子摄像头的深度缓冲.

我没有得到任何回复我之前的问题 ; 因此,重新发布.

这是附在我的主相机上的脚本.它呈现所有非粒子层,我用它OnRenderImage来调用粒子相机.

public class MagicRenderer : MonoBehaviour {
public Shader   particleShader; // shader that uses the main camera's depth buffer to depth test particle Z
public Material blendMat;       // material that uses a simple blend shader
public int      downSampleFactor = 1;

private RenderTexture particleRT;
private static GameObject pCam;

void Awake () {
    // make the main cameras depth buffer available to the shaders via _CameraDepthTexture
    camera.depthTextureMode = DepthTextureMode.Depth;
}

// Update …
Run Code Online (Sandbox Code Playgroud)

graphics rendering unity-game-engine

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

OpenGL状态冗余消除树,呈现状态优先级

我正在我的游戏引擎中使用自动OpenGL批处理方法,以减少绘制调用和冗余调用.

我的批处理树设计从最昂贵的状态开始,并为每个较便宜的状态添加叶子.

示例:树根:着色器/程序兄弟:混合状态... aso

所以我的问题是这个列表中最有可能是最昂贵的电话:

  • 约束计划
  • 绑定纹理
  • 绑定缓冲区
  • 缓冲纹理,顶点数据
  • 绑定渲染目标
  • glEnable/glDisable
  • 混合状态方程,颜色,函数,colorWriteMask
  • 深度模板状态depthFunc,stencilOperations,stencilFunction,writeMasks

还想知道哪种方法会更快:
- 将所有可处理的绘制命令收集到单个顶点缓冲区并仅调用1个绘制调用(此方法也会强制更新cpu侧每个顶点的矩阵变换)
- 不要批处理并渲染很多小绘制调用,只有批处理粒子系统......

PS:渲染目标将始终更改为Pre或Post,具体取决于使用情况.

迄今取得的进展:

  • Andon M. Coleman:最便宜的均匀和顶点阵列绑定,昂贵的FBO,纹理绑定
  • datenwolf:程序使State Cache无效

1:帧缓冲状态
2:程序
3:纹理绑定
...
N:顶点数组绑定,统一绑定

WebGL中的当前执行树:

  • 程序
  • 属性指针
  • 质地
  • 混合状态
  • 深度国家
  • 模具前/后状态
  • 光栅化州
  • 采样器状态
  • 绑定缓冲区
  • 绘制数组

每个步骤都是一个兄弟哈希树,以避免再次检查主渲染队列中的状态缓存

加载纹理/程序/着色器/缓冲区在渲染到额外队列之前发生,以便将来进行多线程处理,并确保在对其执行任何操作之前初始化上下文.

自渲染对象的最大问题是你无法控制什么时候发生的事情,例如如果开发人员在gl初始化之前调用这些方法,他就不知道为什么会有一些错误或问题...

opengl rendering opengl-es directx-11 batching

6
推荐指数
1
解决办法
1560
查看次数

OpenGL:动态改变纹理坐标

我目前正在尝试使用位图渲染整数的值(考虑入侵者的记分板),但是在游戏运行时我无法更改纹理坐标.

我链接着色器和数据,如下所示:

GLint texAttrib = glGetAttribLocation(shaderProgram, "texcoord");
glEnableVertexAttribArray(texAttrib);
glVertexAttribPointer(texAttrib, 2, GL_FLOAT, GL_FALSE,
4 * sizeof(float), (void*)(2 * sizeof(float)));
Run Code Online (Sandbox Code Playgroud)

在我的着色器中,我执行以下操作:顶点着色器:

#version 150

uniform mat4 mvp;

in vec2 position;
in vec2 texcoord;

out vec2 Texcoord;


void main() {
    Texcoord = texcoord;
    gl_Position =  mvp * vec4(position, 0.0, 1.0) ;
}
Run Code Online (Sandbox Code Playgroud)

FragmentShader:

#version 150 core
in vec2 Texcoord;
out vec4 outColor;

uniform sampler2D tex;
void main() {
    outColor = texture2D(tex, Texcoord);
}
Run Code Online (Sandbox Code Playgroud)

如何更改此代码/实现一个能够更改texcoord变量的函数?

c++ opengl shader rendering opengl-es

6
推荐指数
1
解决办法
5339
查看次数

透视投影:证明1/z是线性的吗?

在3D渲染(或几何形状)中,在光栅化算法中,当您将三角形的顶点投影到屏幕上然后查找像素是否与2D三角形重叠时,通常需要找到深度或z坐标像素重叠的三角形.通常,该方法包括计算三角形的2D"投影"图像中的像素的重心坐标,然后使用这些坐标来内插三角形原始顶点z坐标(在顶点被投影之前).

现在它写在所有教科书中,你不能直接插入顶点的顶点坐标,但你需要这样做:

(抱歉不能让乳胶工作?)

1/z = w0*1/v0.z + w1*1/v1.z + w2*1/v2.z

其中w0,w1和w2是三角形上"像素"的重心坐标.

现在,我正在照顾的是两件事:

  • 什么是表明插值z不起作用的正式证明?
  • 什么是证明1/z做正确的事情的正式证明?

为了表明这不是家庭作业;-)而且我自己做了一些工作,我找到了问题2的以下解释.

基本上,三角形可以由平面方程定义.这样你就可以写:

Ax + By + Cz = D.

然后你将z隔离得到z =(D - Ax - By)/ C.

然后你将这个公式除以z,就像你用透视除法一样,如果你开发,重新组合等,你得到:

1/z = C/D + A/D x/z + B/D y/z.

然后我们将C'= C/D B'= B/D命名为A'= A/D:

1/z = A'x/z + B'y/z + C'

它说x/z和y/z只是一旦投影在屏幕上三角形上的点的坐标,右边的等式是"仿射"函数,因此1/z是线性函数???

这对我来说似乎不是一个示范?或者这可能是正确的想法,但不能通过查看这是一个仿射函数的等式来说明你怎么说.如果你将所有条款相乘,你得到:

A'x + B'y + C'z = 1.

这基本上就是我们原来的方程式(只需用适当的术语代替A'B'和C').

geometry rendering perspective

6
推荐指数
1
解决办法
421
查看次数

javafx渲染故障在jre 1.8.0_60

我有一个javaFX 8应用程序在jre 1.8.0_45中运行得非常好但是今天有一个用户来找我有问题.经过一番调查后,我意识到这与他最近发布的jre有关,特别是1.8.0_60.我正在阅读一个GIS shapefile并在我的版本中绘制几个路径到一个组(如30.000或更多)它有点慢,但它工作正常.在最新版本中,图像显得扭曲.以块的形式抽出不合适的路径.

在jre 1.8.0_45下生成的正确图像

在jre 1.8.0_60下生成的失真图像

所以我决定做一个小测试应用程序来将问题与我可能正在做的任何事情分开.在这样做时,我发现问题不仅在绘制路径组时,而且绘制到画布时.此外,如果我设法重绘屏幕,图像看起来会很好.例如,我有一个带有包含路径的Group的visible属性的复选框,所以如果我将它设置为false然后为true,则需要一些时间绘制场景,但它看起来很好.测试应用程序非常简单,如果你按一个按钮生成一个带有一些正方形10px10p的画布,如果你按另一个生成更多正方形,从而出现渲染小故障.

package gisUI;

import javafx.application.Application;
import javafx.application.Platform;
import javafx.scene.Group;
import javafx.scene.Node;
import javafx.scene.Scene;
import javafx.scene.canvas.Canvas;
import javafx.scene.canvas.GraphicsContext;
import javafx.scene.control.Button;
import javafx.scene.layout.HBox;
import javafx.scene.layout.Pane;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;
import javafx.scene.paint.Paint;
import javafx.scene.shape.LineTo;
import javafx.scene.shape.MoveTo;
import javafx.scene.shape.Path;
import javafx.stage.Stage;

public class Path2DTestApplication extends Application {
    private static final int WIDTH = 10;

    Group content = new Group();

    @Override
    public void start(Stage stage) throws Exception {
        stage.setTitle("JavaFX 1.8.0_60 rendering test");

        Button button = new Button("Canvas …
Run Code Online (Sandbox Code Playgroud)

java rendering javafx-8

6
推荐指数
1
解决办法
745
查看次数

如何根据设备大小渲染不同的组件?

我正在寻找一个断点为1024的响应式应用程序。当用户登录/注册时,将有几个问题需要回答。

在移动设备上,这将一次在屏幕上呈现为一个问题。然后,用户将看到一个滑动过渡屏幕,将其移至下一个问题。

一旦超过断点,所有问题将同时显示在屏幕上。

有谁知道是否有任何样式框架可用于此类工作,或者是否存在基于像素宽度的条件渲染的变通办法?

这将是一个基于React的应用程序。当前使用基础进行样式设计。

谢谢!!

rendering device styling zurb-foundation reactjs

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